javascript - KineticJSは、線が接続されたボックスをドラッグします

Question

これは以前にWebで行われた例を見たことがありますが、リンクが見つかりません。

基本的には、ドラッグ可能なボックスのKineticJSの例であり、線が接続されています。ボックスを線の周りに移動すると、接続が維持され、ボックスの位置に再描画されます。

他の誰かが例を見たかどうか、またはこれをどのように達成できるかを本当に知りたいです。私は例をグーグルで検索しましたが、どこにも答えが見つかりません。

ありがとう。

Answer 1

するのはそれほど難しいことではありません...

ボックスを作成します。

 var box = new Kinetic.Rect({x:10,y:10, other stuff });

あなたのラインを作成します：

 var line = new Kinetic.Line({ x: box.getX(), y: box.getY(), other stuff });
 var originalPoint = {x: box.getX(), y: box.getY()}; // save original box coordinates

次に、ドラッグイベントを追加して行を再定義します

 box.on('dragstart dragmove', function(){
     line.setPoints([originalPoint.x, originalPoint.y, box.getX(), box.getY() ]);
     layer.draw();  //redraw current layer
 });

そのように：http：//jsfiddle.net/KS9Bf/3/

これはまさにあなたが尋ねていたものです：http：//jsfiddle.net/KS9Bf/6/

その前のものへのアップデート。