javascript - 回転またはスケールが変更されたときにRaphaeljsでパスをドラッグする

javascript path drag-and-drop draggable raphael

Raphael JSライブラリ(バージョン2.0.0)とパスをドラッグする機能について質問があります。ドラッグ機能でパスを操作できますが、パスのスケールまたは回転を変更すると、ドラッグ機能ですべてのコントロールが失われ、要素がどこにでも飛んでしまいます。

ドラッグ可能なライブラリを使用しようとしましたが、ご覧のとおり、Raphael 2.0.0をサポートしていないため使用できません。Raphaelの新機能であるコードでCatmull-Rom curvetoを使用しているためです。 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);
答え
Raphael 2.0はSVGマトリックスを使用し、translateメソッドは現在のマトリックスに変換を追加するだけです。代わりに、絶対座標を使用して調べる必要があります。

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;
}


たぶんthis.attr( "x")とthis.attr( "cx")も行列変換されたポイントなので、次のようにして絶対値を取得する必要があります:

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


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

javascript - プログラムでdata-href属性を変更した後、Facebook Likeウィジェットを再ロードする

javascript - blur()メソッドを呼び出すと、ウィンドウはどのくらい前にプッシュされますか?

javascript - ドラッグ中の壁とのRaphael JS衝突検出

javascript - $ .eachは1つのシリーズのハイチャートのみを表示します

javascript - キャンバスのセクションを(グリッドに基づいて)再描画する

javascript - Pythonを使用してGoogle App EngineにjQueryオートコンプリートを実装するにはどうすればよいですか?

javascript - 検索テキストボックスに基づいて行を表示/非表示

java - Java Scripting Engineクラスのインスタンス化

javascript - ScrollToスクリプトでスクロールするときにページのちらつき/途切れを防ぐ方法はありますか?

javascript - iframeを取得するための正しいJavaScript関数とは