使用KineticJS總是在畫布中連接兩個可拖動元素的線條

Question

我正嘗試在使用動力學JS的HTML5畫布中創建Use Case Creator。到目前爲止，我可以通過右鍵單擊兩個元素（演員和用例）我想連接。

但是這條線在拖動它連接到的元素之一時保持不變。 我想要一條總是連接兩個元素的線，即使其中一個被拖動。

換句話說，我希望線條所連接的元素充當線條的錨點。

我試過了解this，但未能實現。

Answer 1

當actor或useCase被拖動時，您可以通過重新定位連接線來保持actor + useCase連接。

假設你有3個節點的動能或團體：

1. 一個演員節點，
2. 一個用例節點，
3. 動力學線專用於連接它們。

爲actor和useCase設置dragmove事件處理程序。

// 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處理程序中，獲取actor和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(); 
};