我以前在网上看到过这样的例子,但我找不到链接了。
基本上它是一个可拖动框的 KineticJS 示例,其中有线连接到它。当您围绕线移动框时,该框将保持连接并重新绘制到框的位置。
我真的很想知道是否有其他人看过这个例子,或者如何实现。我已经用谷歌搜索了这个例子,但我无法在任何地方找到答案。
谢谢。
最佳答案
做起来并不难......
创建你的盒子:
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/
它是对上一个的更新。
关于javascript - KineticJS 拖动一个连线的盒子,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14285235/