我之前在网上看到过这样做的一个例子,但我找不到链接了。
基本上它是一个可拖动框的KineticJS示例,其中连接了线条。当您移动框周围的线条时,将保持连接并重新绘制到框的位置。
我真的只想知道是否有其他人看过这个例子,或者如何实现这一点。我用Google搜索了这个例子,但我无法在任何地方找到答案。
感谢。
答案 0 :(得分:3)
这不太难......
创建您的包装盒:
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/
它是对前一个的更新。