问题描述
我以前在网上看到过这样的例子，但我再也找不到链接了.
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/
它是对上一个的更新.
这篇关于KineticJS 拖动一个连接线的框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！