Линия, всегда соединяющая два перетаскиваемых элемента в канве с использованием KineticJS

Question

Я пытаюсь создать Use Case Creator в HTML5 Canvas с использованием Kinetic JS. До сих пор я могу создать линию, щелкнув правой кнопкой мыши два элемента (Actor и Use Case), которые я хочу подключить.

Но эта линия остается неизменной при перетаскивании одного из элементов, к которому она подключена. Я хочу линию, которая всегда соединяет два элемента, даже когда один из них перетаскивается.

Другими словами, я хочу, чтобы элементы, с которыми соединена линия, действовали как привязки к линии.

Я пытался понять это, но не смог осуществить.

Answer 1

Вы можете сохранить соединение actor+useCase, переместив соединительную линию, когда actor или useCase перетаскиваются.

Предположим, у вас есть 3 кинетических узла или группы:

1. Актерский узел,
2. Узел useCase,
3. Кинетическая линия, предназначенная для их соединения.

Установите обработчики событий dragmove для actor и 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);
});

В обработчике dragmove получите позиции актера и useCase и измените положение соединительной линии.

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