组在被拖动时消失react-konva

Question

目前正在使用类型脚本开发一个react-konva项目，尝试拖动一个组（它有一个文本和一个矩形容器..），我为 onDragMove,End 和 start 创建了一些函数，但是每当我开始拖动项目消失了，当我只拖动文本时就起作用了

尝试更改参数，输入任何参数，更改值

dnd 的代码：

const handleDragStart = (draggedItem: KonvaEventObject<DragEvent>) => {
      if (draggedItem.target.isDragging() === true) {
        setStartingX(() => draggedItem.evt.clientX);
        setStartingY(() => draggedItem.evt.clientY);
      }

      draggedItem.target.scaleX(1.5);
      draggedItem.target.scaleY(1.5);
    };

    const handleDragMove = (draggedItem: KonvaEventObject<DragEvent>) => {
      const x = draggedItem.evt.clientX;
      const y = draggedItem.evt.clientY;

      if (x < 0) {
        draggedItem.target.absolutePosition({
          x: startingX,
          y: startingY,
        });
      } else if (y > height - 50) {
        draggedItem.target.absolutePosition({
          x: startingX,
          y: startingY,
        });
      } else if (y < 0) {
        draggedItem.target.absolutePosition({
          x: startingX,
          y: startingY,
        });
      } else if (x > width - 200) {
        draggedItem.target.absolutePosition({
          x: startingX,
          y: startingY,
        });
      } else {
        draggedItem.target.absolutePosition({
          x: Math.round(x / blockSnapWidthSize) * blockSnapWidthSize,
          y: Math.round(y / blockSnapHeightSize) * blockSnapHeightSize,
        });
      }

      draggedItem.target.scaleX(1.5);
      draggedItem.target.scaleY(1.5);
    };

    const handleDragEnd = (draggedItem: KonvaEventObject<DragEvent>) => {
      const x = draggedItem.evt.clientX;
      const y = draggedItem.evt.clientY;

      if (x < 0) {
        draggedItem.target.position({
          x: startingX,
          y: startingY,
        });
      } else if (y > height - 50) {
        draggedItem.target.position({
          x: startingX,
          y: startingY,
        });
      } else if (y < 0) {
        draggedItem.target.position({
          x: startingX,
          y: startingY,
        });
      } else if (x > width - 200) {
        draggedItem.target.position({
          x: startingX,
          y: startingY,
        });
      } else {
        draggedItem.target.position({
          x: Math.round(x / blockSnapWidthSize) * blockSnapWidthSize,
          y: Math.round(y / blockSnapHeightSize) * blockSnapHeightSize,
        });
      }

      draggedItem.target.scaleX(1);
      draggedItem.target.scaleY(1);
    };

Answer 1

我认为你不应该使用

draggedItem.evt.clientX

。

evt.clientX

引用鼠标相对于页面的位置的本机事件。相对于 konva 阶段，该位置可能距离节点坐标很远。

使用konva方法获取位置可能会更好，比如：

const handleDragMove = (event: KonvaEventObject<DragEvent>) => {
  const node = event.target;
  const pos = node.position();
  const absPos = node.absolutePosition();
  // reset of your code
};