KineticJS拖动与线箱连接(KineticJS drag a box with line co

我见过这之前在网络上做了一个例子，但我不能再找到链接。

基本上，它是一个可拖动的盒的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/

它更新到前一个。

文章来源: KineticJS drag a box with line connected