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

Question

我正在尝试使用Kinetic JS.So far在HTML5 Canvas中创建一个用例创建器，我可以通过右键单击我想要连接的两个元素(一个参与者和一个用例)来创建一条线。

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

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

我试着理解this，但没能实现。

Answer 1

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

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

1. A actor node，
2. A useCase node，
3. 专用于连接它们的动态线。

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