一条线总是使用KineticJS连接画布中的两个可拖动元素

Question

我正在尝试使用Kinetic JS在HTML5 Canvas中创建一个Use Case Creator。所以我可以通过右键单击我要连接的两个元素（一个actor和一个Use Case）来创建一个行。

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

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

我尝试了解this，但未能实施。

Answer 1

当拖动actor或useCase时，可以通过重新定位连接线来保持actor + useCase的连接。

假设您有3个动力学节点或组：

1. 演员节点，
2. useCase节点，
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();
};