如何重置SVG转换（即将SVG对象返回到其原始状态）？ [英] How to reset SVG transformations (i.e. return an SVG object to its original state)?

问题描述

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

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?

贝娄是一个测试（这里有一个小小的工作： jsfiddle .net / 5TsW6 / 3 / ）我在第一个应用SAME转换之前尝试重置第二个视口中的对象，但我的尝试没有效果，因为结果两个视口是不同的，当它应该是相同的时候：

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>​

脚本：

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 ，这意味着先考虑先前的转换应用，因此差异。

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.

这篇关于如何重置SVG转换（即将SVG对象返回到其原始状态）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！