How to set position of a path ?

[LudoO]

Hi,

I'd like to set position for a path

This code didn't work : polygon3.attr({cx: 20, cy: 30});

while it works well for circle
polygon3.translate(10,20);
or using translate (but move is relative ; i need absolute position)

any idea ?

thanks !

[charles thomas]

Have a look at and learn http://www.w3.org/Graphics/SVG/ because SVG path syntax is the only parameter for the path method. You can manipulate the position of your polygon with the "M" command using the attr method. Note the "M" command's new "xy" parameter will be different from previous and will be at the front of the single parameter you present to the "path" method. The remainder of the parameter will consist of your changed or unchanged polygon information. "cx" and "cy" are attributes of the circle primitive and should not be used. In the documentation I noticed that it says circle Parameters x number X coordinate of the centre y number Y coordinate of the centre r number radius and i'm thinking it should use "cx" and "cy" or at least mention that the "associated" attributes are these. --- On Mon, 11/9/09, LudoO <ludovic...@gmail.com> wrote:

The new Internet Explorer® 8 - Faster, safer, easier. Optimized for Yahoo! Get it Now for Free!

[LudoO]

For the moment i use this

setPosition: function(x, y){
var dx = x - this.svg.attrs.path[0][1];
var dy = y - this.svg.attrs.path[0][2];
this.svg.translate(dx, dy);
},

but i'm not very happy with this code !!

ludo

[LudoO]

ok,
I keep this in mind, i do a mistake by reading docs too fast.

But i search for a method of raphael which can do this.
I didn't want to manipulate svg element by myself !

I hoped that raphaeljs wraps access to svg in a certain homogeneity.
Could we move an item using a moveTo(x, y) or attr({x:10, y:20})
method , whatever element type (circle, path...)?

Thanks

On Nov 9, 5:36 pm, charles thomas <charles...@yahoo.com> wrote:
> Have a look at and learnhttp://www.w3.org/Graphics/SVG/because SVG path syntax is the only parameter for the path method.

>
> You can manipulate the position of your polygon with the "M" command using the attr method.
>
> Note the "M" command's new "xy" parameter will be different from previous and will be at the front of the single parameter you present to the "path" method. The remainder of the parameter will consist of your changed or unchanged polygon information.
>
> "cx" and "cy" are attributes of the circle primitive and should not be used.
>
> In the documentation I noticed that it says
>
>                             circle
>                         Parameters

>                         x number X coordinate of the centrey number Y coordinate of the centrer number radiusand i'm thinking it should use "cx" and "cy" or at least mention that the "associated" attributes are these.
>
> --- On Mon, 11/9/09, LudoO <ludovic.vale...@gmail.com> wrote:

>
> From: LudoO <ludovic.vale...@gmail.com>
> Subject: How to set position of a path ?
> To: "Raphaël" <raph...@googlegroups.com>
> Received: Monday, November 9, 2009, 8:07 AM
>
> Hi,
>
> I'd like to set position for a path
>
> This code didn't work : polygon3.attr({cx: 20, cy: 30});
>
> while it works well for circle
> polygon3.translate(10,20);
> or using translate (but move is relative ; i need absolute position)
>
> any idea ?
>
> thanks !
>

>       __________________________________________________________________
> Get a sneak peak at messages with a handy reading pane with All new Yahoo! Mail:http://ca.promos.yahoo.com/newmail/overview2/

[justlost]

I know this is post a bit old, but I was looking for a way to set a
path's position myself.
Since there was no clean way of doing this I decided to download the
developer version of raphaeljs and I added this to line 2902:
Element[proto].moveTo = function(x, y){
switch (this.type) {
case "path":
var path = pathToRelative(this.attrs.path),
dim = pathDimensions(path),
dx = (path[0][1] - dim.x) + x,
dy = (path[0][2] - dim.y) + y;
path[0][1] = dx;
path[0][2] = dy;
return this.attr({path: path});
break;
default:
return this.attr({x: x, y: y});
break;
}
return this;
};

since raphaeljs has some really nice functions hidden in it this is
the only way I could use them and keep my code small... anyways to use
it:
- create a path: var p = paper.path(.... path stuff here...);
- now you can move it like this: p.moveTo(100, 100);

I made it so that the position pivot was the top left most point in
the path, since the path's origin point can be anywhere on the canvas.

Hope this helps someone!
btw, those nice functions in raphaeljs need not be hidden. can we
please have them available for use plugin writters?

On Nov 10, 3:12 am, LudoO <ludovic.vale...@gmail.com> wrote:
> ok,
> I keep this in mind, i do a mistake by reading docs too fast.
>
> But i search for a method of raphael which can do this.
> I didn't want to manipulate svg element by myself !
>
> I hoped that raphaeljs wraps access to svg in a certain homogeneity.
> Could we move an item using a moveTo(x, y) or attr({x:10, y:20})
> method , whatever element type (circle,path...)?
>
> Thanks
>
> On Nov 9, 5:36 pm, charles thomas <charles...@yahoo.com> wrote:
>

> > Have a look at and learnhttp://www.w3.org/Graphics/SVG/becauseSVGpathsyntax is the only parameter for thepathmethod.
>
> > You can manipulate thepositionof your polygon with the "M" command using the attr method.

[jwieland]

This function is a god send, thanks for sharing.

note: some of you might be using raphael.path.methods.js since it is
included in a lot of examples. Inside that plugin there is already a
moveTo function which will take precedence. raphael.path.methods.js
moveTo must be for something else since it does not actually move
anything. Solution just rename this function to something else.

> > > Have a look at and learnhttp://www.w3.org/Graphics/SVG/becauseSVGpathsyntaxis the only parameter for thepathmethod.