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 t

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.