I am creating an application in which users can manipulate SVG objects (for example, images) infinitely many times, namely rotate and scale them. And I use Raphael.js to work with SVG.
How do I "reset" an object to its original state before applying a new transformation so that the new transformation does not overlap with the previous one?
Bellow is a test (and its fiddle works here: jsfiddle.net/5TsW6/3/ ), where I tried to reset the object in the second viewport before applying the SAME conversion as the first, but my attempt had no effect, because The result in two viewports is different when it should 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 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