javascript - KineticJS 拖动一个连接线的框

Question

我以前在网上看到过这样的例子，但我再也找不到链接了。

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

它是对上一个的更新。