1

私は、ユーザーがsvgオブジェクト（画像など）を無限に操作できるアプリを構築しています。つまり、それらを回転および拡大縮小します。そして、Raphael.jsを使用してSVGを操作します。

新しい変換を適用する前にオブジェクトを初期状態に「リセット」して、新しい変換が前の変換と重ならないようにするにはどうすればよいですか？

ベローは、最初のビューポートと同じ変換を適用する前に、2番目のビューポートでオブジェクトをリセットしようとしたテストです（これが実際のフィドルです： jsfiddle.net/5TsW6/3/ ）。同じであると想定される場合、2つのビューポートの結果が異なるため、効果があります。

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

1 に答える 1

1

リセットは機能しています。2番目の変換でタイプミスをしました。r45代わりにを使用してR45、「適用する前に前の変換を考慮に入れる」ことを意味します。したがって、違いがあります。

于 2012-10-28T10:26:50.943 に答える