KineticJS拖动一个连接线的盒子 [英] KineticJS drag a box with line connected

问题描述

我之前在网上看到过这样做的一个例子，但我找不到链接了。

I've seen an example of this done on the web before, but I cannot find the link anymore.

基本上它是一个可拖动框的KineticJS示例，其中连接了线条。当你移动行周围的行将保持连接并重绘到框的位置。

Basically it is a KineticJS example of a draggable box, with lines connected to it. When you move the box around the line will stay connected and redraw to the box's position.

我真的只想知道是否有其他人看过这个例子，或者如何这可以完成。我用谷歌搜索了这个例子，但我无法在任何地方找到答案。

I would really just like to know if anyone else has seen the example, or how this could be accomplished. I have googled the example, but I cannot find the answer anywhere.

谢谢。

推荐答案

做起来并不难......

It's not too difficult to do...

创建你的盒子：

 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

然后添加拖动事件重新定义行

then add a drag event redefine the line

 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/

它是对前一个的更新。

Its an update to the previous one.

这篇关于KineticJS拖动一个连接线的盒子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！