Snap.svg - ドラッグした後に回転しないでください

Question

これは基本的な質問で、簡単に回答できますように！基本的には、図形をドラッグしてダブルクリックし、90度回転させたいと思います。しかし、開始点から形状を動かすと、回転がうまく行きます。私はそうのような回転のために中心点を再計算しようとしています...

var bbox = tri.getBBox(); 
tri.animate({ 
    transform: "R"+angle+"," + bbox.cx + "," + bbox.cy 
}, 500) 

はフィドル... http://jsfiddle.net/henryJack/hsfor158/7/を参照してください。

ご迷惑をおかけして申し訳ありません。

Answer 1

私は潜在的に2つの問題があると思います。

まず、既存のトランスフォームを上書きして既存のトランスフォームを含め、その上に新しいトランスフォームを追加するとします。

element.transform() 

既存の変換をそのまま適用します。だから古いものと新しいものを組み合わせることができます。

tri.animate({ 
    transform: tri.transform() + "R"+angle+"," + bbox.cx + "," + bbox.cy 
}, 500) 

しかし、私は考える第二の問題は、getBBox（）は、デフォルトでは、アカウントの変換に入れていない、とあなたは、ダブルクリックし、使用上のどこかに変換保存することもできますので、それは、変換を蓄積することですそれはtransform（）の代わりに。

スナップgetBBox（）に隠しパラメータがあります。getBBox（1）を指定すると、ローカル変換が考慮されます（間違っている可能性があるので、私は、この特定のトピックに関する新しい質問をします。ソースコードでは、ソースコードがパラメータisWithoutTransformを呼び出しますが、これをどのように解釈しているかによって異なります。

あなたは2 ...

var bbox = tri.getBBox(1); 
angle += 90; 
tri.animate({ 
    transform: tri.transform() + "r"+angle+"," + bbox.cx + "," + bbox.cy 
}, 500); 

jsfiddle

可能なより良いソリューションを組み合わせることができますので、しかし、より良い方法があるかもしれません：あなたのアカウントにに適用され、さらに変換を取る必要がある場合（例えば、変換されたグループ内の場合）、より複雑になり、getTransformedBBoxのような関数を追加するか、代わりに別の解決策を考えてください。例えば、外側のグループをドラッグするにはiを回転させるnner要素。とにかくこれを代替ソリューションとして実行することもできます（グループに要素を追加し、グループをドラッグして追加しますが、要素を回転させるだけです）！余分なグループ

var triGroup = s.group(tri) 
var angle = 0; 
var rotate = function() { 
    var bbox = tri.getBBox(); 
    angle += 90; 
    bbox = tri.getBBox(); 
    tri.animate({ 
     transform: "r"+angle+"," + bbox.cx + "," + bbox.cy 
    }, 500); 
} 

triGroup.dblclick(rotate); 
triGroup.drag(); 

jsfiddle 2