KineticJS drag a box with line connected

Question

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

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.

Thanks.

Answer 1

It's not too difficult to do...

Create your box:

 var box = new Kinetic.Rect({x:10,y:10, other stuff });

create your line:

 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
 });

like so: http://jsfiddle.net/KS9Bf/3/

This is exactly what you were asking about: http://jsfiddle.net/KS9Bf/6/

Its an update to the previous one.