时间戳

首页 > 解决方案 > KonvaJS 图形编辑器移动节点

zooming - KonvaJS 图形编辑器移动节点

问题描述

我正在开发一个带有节点和分支的图形编辑器。带平移/缩放。我从（1）平移/缩放（完成），（2）添加节点（完成），（3）选择节点（完成），（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 ！！！
备注：其实是我自己选择的节点，我得到的是鼠标点击的位置。我遍历nodes_list，检查点击的位置和圆心的距离是否小于圆半径。

最后，问题变成了，如何获取拖动后的Node位置坐标（x，y）？

标签： zoomingdragshapeskonvajspan

解决方案

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

        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,输出

推荐阅读