CODEWITHSUNDEEP
javascriptraphael
Rob Allsopp
Rob Allsopp

Reputation: 3528

Raphael js: Scale and translate elements in a set proportionally

It seems that if you scale a set in raphael, it will scale the elements inside, but not translate them proportionally. So for instance if I have two squares next to each other in my set, and I scale the set up, the squares begin overlapping each other instead of the second square moving over as it resizes in order to stay right next to the first square. Is there a way to get this behavior in raphael?

Upvotes: 1

Views: 1419

Answers (1)

Jake Wilson
Jake Wilson

Reputation: 91243

As Ian mentioned, the key is to set the X,Y origin for the scale. By default, when you scale an element, it uses the geometric center of the element as the origin to scale from:

path.transform('S1.5'); // Scale 1.5x in both axis

So if you scale a set of objects, it will scale each individual element from it's own individual geometric center.

But you can optionally set an X and Y origin for the scale:

path.transform('S1.5,1.5,0,0'); // Scale 1.5 in X and 1.5 in Y, with origin set at the Paper's 0,0 as the origin.

Therefore, if you have a set of elements, and all of them are scaled using the Paper's 0,0 as their scale origin, then they will all scale proportionally to each other.

Upvotes: 2

Related Questions