4

I'm having serious trouble understanding how to compute the coordinates of rotation/scale pivots (e.g. rotation point) for SVG transformations, using Raphael.js. In short, if you apply a transformation such as image.transform("S1.5R45"), the transformations are applied in relation to the default rotation & scale pivot, which I'm not sure how to calculate.

To exemplify, I've put together a fiddle (jsfiddle.net/GVEqf/), where the aim is to have exactly the same output in both the viewports, for a couple of transformations on an image object. In the first viewport, I don't specify the rotation point, but in the second one I do. However, I can't get the same results. What I need is to input the rotation coordinates for the second viewport, so that the output is identical with the first case.

Please help.

Andrei Oniga
  • 8,219
  • 15
  • 52
  • 89
  • I don't quite get the question. Are you wondering what rotation point to specify to get the same result as if it wasn't specified? – Qnan Oct 27 '12 at 15:25

1 Answers1

4

When not specified the pivot is the center of the element. Here you have to take care of the position you have applied to the images and the scaling that will be done. Since in this case your scaling is relative to the top left corner of the image, we can just multiply the center coordinate by it.

// Compute rotation pivot coordinates
var scaling = 1.5;
rx = (x + (img_width / 2)) * scaling;
ry = (y + (img_height / 2)) * scaling;

// Apply transformations
image1.transform("S1.5,1.5,0,0R45");
image2.transform("S1.5,1.5,0,0R45,"+rx+","+ry);

http://jsfiddle.net/TYCJ7/

Joan Charmant
  • 2,012
  • 1
  • 18
  • 23
  • Exactly the answer I was looking for. And something I've been looking for for some time now. Thank you! – Andrei Oniga Oct 27 '12 at 19:51
  • I've run into quite a bit of trouble. In the application I'm building, the users have the possibility of scaling/rotating the objects they add to the viewport (such as images, like the one in the fiddle) an infinite number of times. And I've come to realize that I can't reset an object to its initial state, in order to apply a different transformation without overlapping it with the previous ones. Meaning that after the last transformation (in the fiddle), if I repeat the same code sequence, the position and aspect of the objects change. Why is this and how can I solve it? Please help. – Andrei Oniga Oct 28 '12 at 08:28
  • I opened a different topic about it: [stackoverflow.com/questions/13107528/how-to-reset-svg-transformations](http://stackoverflow.com/questions/13107528/how-to-reset-svg-transformations). If you have some time, I'd really appreciate your input on this, I've been pulling out my hair for 2 weeks now. – Andrei Oniga Oct 28 '12 at 08:57