1
我正在构建一个应用程序,用户可以无限次操作svg对象(例如图像),即旋转和缩放它们。我使用Raphael.js与SVG一起工作。如何重置SVG转换(即将SVG对象返回到其原始状态)?
如何在应用新转换之前将对象重置为其初始状态,以便新转换不会重叠前一个对象?
贝娄是一个测试(这里是它的工作小提琴:jsfiddle.net/5TsW6/3/),我已经尝试采用同样的改造为第一行前在第二视窗对象复位,但我的尝试都没有效果,因为在两个视口的结果是不同的,当它应该是相同的:
<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>
和脚本:
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
你是对的:) –
在这种情况下,我疯了。因为我正在开发的应用程序([picselbocs.com/projects/cakemyface](http://picselbocs.com/projects/cakemyface/)),如果我旋转一个对象,然后调整它的大小(到目前为止,这么好),然后再次旋转它,在最后一次旋转时,元素会错位,我不明白为什么。看起来我完全按照小提琴计算所有参数,但有些错误。 –
只是一个想法:在你的cakemyface中,如果你想使用'