KineticJS 拖动一个连接线的框答案

【问题标题】：KineticJS drag a box with line connectedKineticJS 拖动一个连接线的框
【发布时间】：2012-12-26 10:51:46
【问题描述】：

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

基本上它是一个可拖动框的 KineticJS 示例，并带有线连接到它。当您围绕线移动框时，将保持连接并重绘到框的位置。

我真的很想知道是否有其他人看过这个例子，或者如何做到这一点。我用谷歌搜索了这个例子，但我在任何地方都找不到答案。

谢谢。

【问题讨论】：

here 就是一个例子。如果有人看到另一个，请告诉我！

标签： javascript html html5-canvas kineticjs

【解决方案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/

它是对上一个的更新。

【讨论】：

不知道你到底在找什么，但这是我想出的，但只有一行。
基本上， line.setPoints( ... your points here ... ) 是您想要重新创建线的内容，然后是 layer.draw 以确保它正在被重绘。
试图获得类似this 的东西来分别绘制所有线条。感谢您迄今为止的帮助！
看看上面更新的链接显示的内容，几乎完全符合您上面的要求。感谢您选择我的答案，当您获得足够的代表时，您是否也可以投票？
编辑：jsfiddle.net/KS9Bf/192你需要在外部资源中添加新版本的动力学。