gpt4 book ai didi

javascript - 如何重置 SVG 转换(即将 SVG 对象返回到其原始状态)?

转载 作者:行者123 更新时间:2023-11-28 02:38:13 33 4
gpt4 key购买 nike

我正在构建一个应用程序,用户可以在其中无限次操作 svg 对象(例如图像),即旋转和缩放它们。我使用 Raphael.js 来处理 SVG。

如何在应用新转换之前将对象“重置”到其初始状态,以便新转换不会与前一个转换重叠?

贝娄是一个测试(这是一个工作 fiddle : jsfiddle.net/5TsW6/3/ ),我尝试在应用与第一个视口(viewport)相同的转换之前重置第二个视口(viewport)中的对象,但我的尝试没有效果,因为两个视口(viewport)中的结果不同,而它应该是相同的:

<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

最佳答案

重置正在进行中。您在第二个转换中犯了一个拼写错误,使用了 r45 而不是 R45,意思是“在应用之前考虑之前的转换”,因此存在差异。

关于javascript - 如何重置 SVG 转换(即将 SVG 对象返回到其原始状态)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13107528/

33 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com