KineticJS拖動一個線條連接的盒子

Question

我以前在網絡上看到過這樣的例子，但是我找不到鏈接了。

基本上它是一個可拖動盒子的KineticJS示例，線條連接到它。當你移動盒子周圍的盒子時將保持連接並重新繪製盒子的位置。

我真的很想知道是否有其他人看過這個例子，或者如何做到這一點。我用google搜索了這個例子，但是我無法在任何地方找到答案。

謝謝。

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/

其更新到前一個。