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/

其更新到前一个。