Path is translated about svg.js HOT 9 CLOSED

From v0.9 to v0.10 the whole translation system has been reworked. There are some undesirable glitches here and there. Hopefully today I can publish v0.11 which is a much more solid and better tested release.

from svg.js.

Version v0.11 has been released and the SVG.Wrap class has been removed completely so we can continue this discussion.

You have two options here and if you need to have a straight line from one box to the other, it would be more convenient to use the line() element. I fiddled you something here:

http://jsfiddle.net/wout/bKCyS/4/

If you really need to use a path element you can use an undocumented feature called "unbiased". By default svg.js will compensate for any positive or negative x and y values to be 0. This is necessary for the move() and center() methods to work as expected. This recalculation happens every time you call the plot() method. Obviously this will result in the path to be positioned with its left top on x=0, y=0, like you can see in the example here:

http://jsfiddle.net/wout/xeBc5/

But if you create the path as an "unbiased" path, this recalculation will not happen. You can create an unbiased path by adding a true flag as the second argument:

var path = draw.path(string, true)

This will result in the expected behavior:

http://jsfiddle.net/wout/xeBc5/6/

But it is important to mention that x(), y(), cx(), cy(), move(), center() and size() will not work as expected on unbiased paths, polygons and polylines.

from svg.js.

I'm starting to understand, but I'm not there yet.

Note: I'm drawing a complex shape, so I need the path.

However, I created some helper functions and when i started using them the problem disappeared, but I guess that it's because I don't use the plot function. Here is an example:
http://jsfiddle.net/xeBc5/7/

However, this behavior is a bit strange. Doing javascript draw.rect(width, height).move(x,y) is logical.

However, doing draw.path('M10 10, L20 20') and the result is a line from <0,0> to <10,10> is not so logical. Especially compared to the SVG.Line example.

Also, I tried to check but I can't see any problem with x(), y(), cx(), cy(), move(), center() and size().

Also, as the translation is not there my animations are stable now.

from svg.js.

I get your point. If you are drawing paths manually it might seem odd that a path starting at 10,10 is repositioned at 0,0. The idea behind it is that every element, when created, starts at 0,0. Afterwards it can be moved to a new position. The goal of the move() method is to move elements by their visual upper left corner according to their bounding box. It is a convenience method to ensure expected behaviour along all element types. The plot() exists to work with the other convenience methods. For more control you can always resort to attr('d', pathstring), like you did.

Your solution is the way to go. In fact it would make for a nice plugin if the rest of the path vocabulary were implemented.

from svg.js.

I will keep on adding more functionality to the Path extension as I need
them. I will publish it on Github quite soon. Even if not everything is
included in the beginning.

At the moment I do not keep an internal representation of the Path, in that
case it would be quite easy to write another plugin that enables editing
(but through an API and visualy in the browser) of the Path.

If you have any suggestions about the API don't hesitate to send some ideas
to me.

I'm also working on a math plugin. All math that are used is quite simple,
but it takes time to implement and I guess that alot of new users to SVG:s
would appreciate it.

BTW, maybe it's a good idea to write abit about the way this is implemented
in the docs. As I guess that I will not be the last that get bitten by this.

Cheers!

//Nils

On Mon, Mar 25, 2013 at 8:44 AM, Wout Fierens [email protected]:

I get your point. If you are drawing paths manually It might seem odd that
a path starting at 10,10 is repositioned at 0,0. The idea behind it is
that every element, when created, starts at 0,0. Afterwards it can be
moved to a new position. The goal of the move() method is to move
elements by their visual upper left corner according to its bounding box.
It is a convenience method to ensure expected behaviour along alle element
types. The plot() exists to work with the other convenience methods. For
more control you can always resort to attr('d', pathstring), like you did.

Your solution is the way to go. In fact it would make for a nice plugin if
the rest of the path vocabulary were implemented.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/16#issuecomment-15380957
.

from svg.js.

Great, let me know if you need any help with the plugin. Even if it is not ready it will be worth mentioning it in the docs. About the docs, I am for other options. The single page github page is getting cramped. I will definitely mention the translation logic.

from svg.js.

I think this issue can be closed.

from svg.js.

I'm really stuck on this. I'm trying to draw a path like

text.path("M 0 35 a 35,35 0 1,1 70,0 a 35,35 0 1,1 -70,0 z")

which is a circle. (I'm not using <circle> because I'm using the path for a textPath among other things).

Whatever I try, the positioning is always wrong. It looks like svgjs adds a cx attribute equal to 35 (the initial y point). Why is it doing that?

Then, why I try to position the path like this

x.innerCircle.center 90, 90

The actual center ends of being far from that point, like 130, 130.

What am doing wrong?

from svg.js.

I'm not quite sure what you are doing wrong. If I try to replicate your description everything seems to work correctly:

http://jsfiddle.net/wout/QULMQ/

// draw and position path
var path = draw.path('M 0 35 a 35,35 0 1,1 70,0 a 35,35 0 1,1 -70,0 z').center(90,90)

// create visual marker
var marker = draw.circle(6).fill('#f09').center(90,90)

from svg.js.