回転またはスケールが変更されたときにRaphaeljsのパスをドラッグします。

Question

Raphael JSライブラリ（バージョン2.0.0）に関する質問と、パスをドラッグする機能があります。ドラッグ機能が自分のパスで動作するようになりますが、パスのスケールや回転を変更すると、ドラッグ機能はすべてのコントロールを失い、私の要素はどこにでも飛びます。

draggable-libraryを使用しようとしましたが、Raphael 2.0.0をサポートしていないため、使用できません。私のコードでCatmull-Rom curvetoを使用しています。 Raphael 2.0.0の新機能です。

ご協力いただければ幸いです！ここに私のコードは次のとおりです。

paper = Raphael(document.getElementById("holder"), 768, 1024); 

var startPath = function() { 
    this.ox = this.type == "rect" ? this.attr("x") : this.attr("cx"); 
    this.oy = this.type == "rect" ? this.attr("y") : this.attr("cy"); 
}, 
movePath = function (dx, dy) { 
    var trans_x = (dx)-this.ox; 
    var trans_y = (dy)-this.oy; 

    this.translate(trans_x,trans_y); 
    this.ox = dx; 
    this.oy = dy; 
}, 
    upPath = function() { 
    // nothing special 
}; 

drawing = "M152.854,210.137c-9.438-64.471,22.989-102.26,124.838-96.551s244.094,41.985,152.664,151.667C338.926,374.934,162.761,277.813,152.854,210.137z"; 

shape = paper.path(drawing);; 
shape.translate(0,0); 
shape.scale(1,1); 

shape.attr({ 
    'stroke': '#000000', 
    'fill': 'blue', 
    'stroke-width': '5', 
}); 

shape.drag(movePath, startPath, upPath); 

ので、これが動作しているが、できるだけ早く私は、例えば、次のコードを追加すると、それが動作しない：

shape.scale(2,2); 
shape.rotate(90); 

Answer 1

ラファエル2.0は、SVG行列と変換する方法を使用しています現在の行列への変換のみを追加します。たぶんthis.attr（「X」）とthis.attr（「CX」）はまた、行列変換ポイントです

movePath = function (dx, dy) { 
    var trans_x = (dx)-this.ox; 
    var trans_y = (dy)-this.oy; 

    this.transform("T"+[trans_x,trans_y]); 
    this.ox = dx; 
    this.oy = dy; 
} 

、その後、あなたは絶対的に取得する必要があります：あなたは次のように、代わりに絶対座標を使用してになります値を使用して：

x = this.matrix.e; 
y = this.matrix.f 

上記のコードはテストされていないことに注意してください。