Question

I’m building an app where users can manipulate svg objects (e.g. images) an infinite number of times, namely rotate and scale them. And I use Raphael.js to work with the SVG’s.

How do I “reset” an object to its initial state before applying new transformation so that the new transformation won’t overlap the previous one?

Bellow is a test (and here’s a working fiddle of it: jsfiddle.net/5TsW6/3/) where I’ve attempted to reset the object in the second viewport before applying the SAME transformation as the first one, but my attempt had no effect, because the outcome in the two viewports is different, when it’s supposed to be the same:

<div id="wrapper1" style="width:250px; height:250px; outline:1px solid invert; float:left; margin-right:5px;"></div>
<div id="wrapper2" style="width:250px; height:250px; outline:1px solid invert; float:left;"></div>​

And the script:

var img_width=100, img_height=75,
    canvas1, canvas2,
    image1, image2,
    w1, w2, // contours
    x,y,    // attributes "x" and "y"
    rx,ry;  // coordinates for the rotation pivot

// Create the canvases
canvas1 = new Raphael(document.getElementById("wrapper1"), 250, 250);  
canvas2 = new Raphael(document.getElementById("wrapper2"), 250, 250);


// Add the images to the canvases    
image1 = canvas1.image("http://picselbocs.com/projects/cakemyface/image-gallery/intermediate/3295094303_2b50e5fe03_z.jpg",0,0,img_width,img_height);
image2 = canvas2.image("http://picselbocs.com/projects/cakemyface/image-gallery/intermediate/3295094303_2b50e5fe03_z.jpg",0,0,img_width,img_height);


// Modify (x,y) 
x = 40;
y = 80;
image1.attr({"x":x,"y":y});
image2.attr({"x":x,"y":y});


// Add the objects' contours
canvas1.rect(x,y,img_width,img_height).attr({"stroke-width":"1px","stroke":"#00F"});
canvas2.rect(x,y,img_width,img_height).attr({"stroke-width":"1px","stroke":"#00F"});

// Compute the rotation pivot coordinates (the pivot should coincide with the object's center)
var scaling = 1.2;
rx = (x + img_width / 2) * scaling;
ry = (y + img_height / 2) * scaling;

// Apply transformations
image1.transform("S"+scaling+","+scaling+",0,0R45,"+rx+","+ry);
image2.transform("S"+scaling+","+scaling+",0,0R45,"+rx+","+ry);



// ----- Here starts second transformation ------ //
image2.transform("").transform("S"+scaling+","+scaling+",0,0r45,"+rx+","+ry);   // I've attempted to reset the transform string, but with no effect
​

Answer 1

The reset is working. You made a typo in the second transformation, using r45 instead of R45, meaning “take the previous transformation into account before applying”, hence the difference.