KineticJS 拖动一个连接线的框

2022-01-17 00:00:00 javascript html html5-canvas kineticjs

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

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.

谢谢.

推荐答案

做起来并不难...

创建你的盒子:

 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/

它是对上一个的更新.

相关文章