CODEWITHSUNDEEP
javascriptraphaeltransformation
user1762087
user1762087

Reputation: 460

raphael move set multiple times

I have a set containing a circle,rectangle and a text

I can move it to specific location (50 points to the right) like this:

object.entireSet.transform("T50,0");

And it works just OK

Now I want to move it again (50 points to the right again)

object.entireSet.transform("T50,0");

BUT the object stays on the same place. If I want to move it like I want, I have to rewrite the command like this

object.entireSet.transform("T100,0");

So my thought here is, that the raphael somehow remember the original point (0,0) of transformation and therefore (T50,0) will always move to the same point.

Do you know how to reset the transformation, so following code

object.entireSet.transform("T50,0"); //first move
object.entireSet.transform("T50,0"); //second move

will result in an object moved from original point (x,y) to point (x+50,y) and then to (x+100,y)?

Upvotes: 2

Views: 151

Answers (1)

Vidup
Vidup

Reputation: 113

You can find the solution in the documentation : http://raphaeljs.com/reference.html#Element.transform

set.transform("T50,0");
set.transform("...t50,0"); // This appends the transformation to the first one

jsFiddle here : http://jsfiddle.net/vyFC6/1

EDIT : I realised you may need a bit more explainations to understand why your code isn't working.

It has to do with the SVG nature of Raphael. You might want to quickly learn the basics of SVG to understand better some of Raphael's functionnalities.

All the transform calls you do on a same element actually update the value of a string, that's used to... well transform it.

When you do this :

set.transform("T50,0");
set.transform("T50,0");

The value of the string is "T50,0" after the first call. You just rewrite it with the second call ==> its value is still "T50,0" in the end. This is why it doesn't change.

When you do this : 

set.transform("T50,0");
set.transform("...t50,0");

The value of the string becomes more or less this : "T50,0t50,0" which means in Raphael : translate 50 on x and 0 on y, THEN 50 on x and 0 on y.

To make it clear i updated my fiddle. You can find in it different transform calls that i hope will help you understand how it works.

Upvotes: 1

Related Questions