これは以前にWebで行われた例を見たことがありますが、リンクが見つかりません。
基本的には、ドラッグ可能なボックスのKineticJSの例であり、線が接続されています。ボックスを線の周りに移動すると、接続が維持され、ボックスの位置に再描画されます。
他の誰かが例を見たかどうか、またはこれをどのように達成できるかを本当に知りたいです。私は例をグーグルで検索しましたが、どこにも答えが見つかりません。
ありがとう。
これは以前にWebで行われた例を見たことがありますが、リンクが見つかりません。
基本的には、ドラッグ可能なボックスのKineticJSの例であり、線が接続されています。ボックスを線の周りに移動すると、接続が維持され、ボックスの位置に再描画されます。
他の誰かが例を見たかどうか、またはこれをどのように達成できるかを本当に知りたいです。私は例をグーグルで検索しましたが、どこにも答えが見つかりません。
ありがとう。
するのはそれほど難しいことではありません...
ボックスを作成します。
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/
その前のものへのアップデート。