Path is translated #16

Closed
otm opened this Issue Mar 21, 2013 · 9 comments

Comments

Projects
None yet
3 participants

otm commented Mar 21, 2013

There are really two issues in this example.

  1. The path is drawn it is also translated and I don't understand why
  2. The translations on the rect changes when the rect is dragged

Here is an example: http://jsfiddle.net/qeKdv/

Owner

wout commented Mar 21, 2013

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.

Owner

wout commented Mar 24, 2013

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.

otm commented Mar 24, 2013

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.

Owner

wout commented Mar 25, 2013

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.

otm commented Mar 25, 2013

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 notifications@github.comwrote:

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/wout/svg.js/issues/16#issuecomment-15380957
.

Owner

wout commented Mar 25, 2013

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.

otm commented Apr 12, 2013

I think this issue can be closed.

@otm otm closed this Apr 12, 2013

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?

Owner

wout commented Aug 10, 2013

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)

@gummybears gummybears referenced this issue in svgdotjs/svg.draggable.js Jan 13, 2014

Closed

Dragging a path #15

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment