CODEWITHSUNDEEP
javascriptsvgraphael
altunyurt
altunyurt

Reputation: 2936

Preserving scaling of multiple items in set with Raphael

I have a set of several shapes each scaled in different rates.

When the set transformed to another point using 

set.transform("tp1,p2")

shapes rescale to their normal sizes. For each of the shapes scaled in different proportions of their original sizes, i can not give a scale option to set.transform.

How can i preserve scaling of each item in set during transform()?

My question in code:

http://jsfiddle.net/XHr4H/

Upvotes: 0

Views: 105

Answers (1)

Kevin Nielsen
Kevin Nielsen

Reputation: 4433

Raphael's imperfect way of dealing with this is to allow transformation directives to be either prepended to the transform sequence (using "directive...") or appended to the transform sequence (using "...directive"). In your case, the simplest way to achieve the effect you're after is to prepend the relative transform you want in your setTimeout function.

var paper = Raphael("paper", 200, 200);

var s = paper.set(),
    r = paper.rect(0,0,30,30).attr({"fill":"green"}).transform("t27,30s0.2"),
    r2  = paper.rect(40,0,30,30).attr({"fill":"red"}).transform("t27,30s0.4");
s.push(r,r2);
setTimeout(function(){
    s.transform("t100,150...");  // here 'tis
}, 2000);

The transform("t100,150...") essentially inserts the desired translate into the beginning of the transform string for each element in the set. Thus, r's transform evaluates cumulatively to "t127,180s0.2" and r2's becomes "t127,180s0.4".

Upvotes: 1

Related Questions