A line always connecting two draggable elements in canvas using KineticJS

Question

I am trying to create a Use Case Creator in HTML5 Canvas using Kinetic JS.So far I can make a line by right clicking on two elements(An actor and a Use Case) I want to connect.

But this line remains fixed on dragging one of the element to which it is connected to. I want a line that always connects the two elements even when one of them is dragged.

In other words I want the elements to which the line is connected to act as anchors to the line.

I tried understanding this, but failed to implement.

http://jsfiddle.net/zg24b/ INSTRUCTIONS: 1.INSERT AN ACTOR. 2.INSERT A USE CASE. 3.RIGHT CLICK IN THE ACTOR AND THEN RIGHT CLICK ON THE USE CASE TO MAKE ASSOCIATION. — user2328832, Apr 28 '13 at 11:05

score 2 · Accepted Answer · answered Apr 28 '13 at 17:16

You can keep the actor+useCase connected by repositioning the connecting line when actor or useCase are dragged.

Assume you have 3 kinetic nodes or groups:

An actor node,
A useCase node,
A kinetic line dedicated to connecting them.

Set up dragmove event handlers for actor and useCase.

// when the actor is dragged, reposition the connecting line

actor.on('dragmove', function () {
    connectThem(actor,useCase,connectingLine);
});

// when the useCase is dragged, reposition the connecting line

useCase.on('dragmove', function () {
    connectThem(actor,useCase,connectingLine);
});

In the dragmove handler, get the actor and useCase positions and reposition the connecting line.

// reposition the line to connect the actor & useCase

function connectThem(actor,useCase,connectingLine){

    // get the XY of the actor+useCase to connect
    var x1 = actor.getX();
    var y1 = actor.getY();
    var x2 = useCase.getX();
    var y2 = useCase.getY();

    // reposition the connecting line
    connectingLine.setPoints([x1,y1,x2,y2]);

    // send the connecting line to the back
    connectingLine.setZIndex(0);

    // redraw the layer
    layer.draw();
};

Now the only problem is that how do I keep a record of all the lines that are connected to a particular use case, so that all of them show same behavior on dragging the connected use case. HELP ! — user2328832, May 06 '13 at 12:08

A line always connecting two draggable elements in canvas using KineticJS

1 Answers1