4

Raphael.jsを使用して、SVG変換の回転/スケールピボット（回転ポイントなど）の座標を計算する方法を理解するのに深刻な問題があります。つまり、などimage.transform("S1.5R45")の変換を適用すると、変換はデフォルトの回転とスケールピボットに関連して適用されますが、計算方法がわかりません。

例として、フィドル（ jsfiddle.net/GVEqf/ ）をまとめました。ここでの目的は、画像オブジェクトのいくつかの変換のために、両方のビューポートでまったく同じ出力を持つことです。最初のビューポートでは回転点を指定しませんが、2番目のビューポートでは指定します。しかし、同じ結果を得ることができません。必要なのは、2番目のビューポートの回転座標を入力して、出力が最初の場合と同じになるようにすることです。

助けてください。

4

1 に答える 1

4

指定しない場合、ピボットは要素の中心になります。ここでは、画像に適用した位置と実行されるスケーリングに注意する必要があります。この場合、スケーリングは画像の左上隅を基準にしているため、中心座標にそれを掛けることができます。

// Compute rotation pivot coordinates
var scaling = 1.5;
rx = (x + (img_width / 2)) * scaling;
ry = (y + (img_height / 2)) * scaling;

// Apply transformations
image1.transform("S1.5,1.5,0,0R45");
image2.transform("S1.5,1.5,0,0R45,"+rx+","+ry);

http://jsfiddle.net/TYCJ7/

于 2012-10-27T18:28:08.057 に答える