KonvaJS 图形编辑器移动节点

Question

我正在开发一个带有节点和分支的图形编辑器。与 Pan/Zoom。我从 (1) Pan/Zoom（完成）、(2) 添加节点（完成）、(3) Select 节点（完成）、(4) 移动节点（禁用平移）开始。我被困在这里。我为 Pan 制作了可拖动的舞台。当我想移动（拖动）节点时，我将舞台的可拖动设置为 false。但我看不到如何拖动节点。使用 Graph Editor 是 (+) Nodes 来创建节点。感谢您的帮助。

这是一个jsbin https://jsbin.com/suqisak/4/edit?html,js,output

    function evtFct_OnMouseDragStart(event) {
    var realMousePos = getRelativePointerPosition(group);

    console.log('DragStart');
    if (Nodes_list.length > 0) {
        var SelectedNode = getSelected_Node(realMousePos);
        if (SelectedNode !== null) {
            SelectedNode.circle.draggable(true);
        }
    }

}

我不知道如何使节点（圆圈）可拖动。 DragStart 事件没有触发！！！

然后我用圆圈+标签创建了一个组，并使该组可拖动。

    draw() {
    this.View = new Konva.Group({draggable: true});

    this.circle = new Konva.Circle({
        x: this.x,
        y: this.y,
        radius: nodeSize,
        fill: nodeColor,
        draggable: true,
        id: this.node_id
    });

  this.label = new Konva.Text({
        x: this.x - 20,
        y: this.y - 10,
        text: this.node_id,
        width: 40,
        height: 20,
        fontSize: 8,
        fontFamily: 'sans-serif',
        fill: 'blue',
        verticalAlign: 'middle',
        align: 'center'
  });

    this.View.add(this.circle);
    this.View.add(this.label);

    group.add(this.View);
}

我可以拖动节点，但是 !!!我丢失了节点 x 和 y。
当我点击节点（节点中心附近）时，我知道我点击了哪个节点附近。但现在！！！我丢失了新位置的 x 和 y !!!
备注：其实我select节点是我自己的，鼠标点击的位置是我自己获取的。我循环nodes_list，检查点击的位置和圆心的距离是否小于圆半径。

最后，问题就变成了，如何获取拖动后的Node位置坐标(x,y)？

Answer 1

当您要使组可拖动时，您只需为其设置位置。然后对于一个圆圈和一个文本，你需要设置相对于组的位置：

        this.View = new Konva.Group({draggable: true, x: this.x, y: this.y });//added

        this.circle = new Konva.Circle({
            radius: nodeSize,
            fill: nodeColor,
            draggable: true,
            id: this.node_id
        });

      this.label = new Konva.Text({
            x: - 20,
            y: - 10,
            text: this.node_id,
            width: 40,
            height: 20,
            fontSize: 8,
            fontFamily: 'sans-serif',
            fill: 'blue',
            verticalAlign: 'middle',
            align: 'center'
      });

那你就看群里的位置了。

https://jsbin.com/yevozeyeza/1/edit?html,js,output

KonvaJS 图形编辑器移动节点

KonvaJS Graph Editor Move Nodes

shapes

zooming

pan

drag

konvajs