canvas - 使用 KineticJS 始终连接画布中两个可拖动元素的线

Question

我正在尝试使用 Kinetic JS 在 HTML5 Canvas 中创建用例创建器。到目前为止，我可以通过右键单击要连接的两个元素（演员和用例）来制作一条线。

但是这条线仍然固定在拖动它所连接的元素之一。我想要一条始终连接两个元素的线，即使其中一个元素被拖动。

换句话说，我希望线所连接的元素充当线的锚点。

我试图理解这一点，但未能实施。

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