组在被拖动时消失 react-konva

group disappears while being dragged react-konva

提问人:ohad lazar 提问时间:10/24/2023 更新时间:10/25/2023 访问量:23

问:

目前正在使用脚本类型处理 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);
    };

Events Canvas 拖放 式 React-Konva Konva

评论


答:

0赞 lavrton 10/25/2023 #1

我认为你不应该使用 . 引用鼠标相对于页面位置的本机事件。相对于 konva 阶段,该位置可能与节点的坐标相距很远。draggedItem.evt.clientXevt.clientX

最好使用 konva 方法来获取仓位,例如:

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

评论

0赞 ohad lazar 10/26/2023
我已经按照你说的改变了,谢谢你让我看到了更好的开发方式(:,但遗憾的是它没有解决我的问题,它仍然令人失望......
0赞 lavrton 10/27/2023
然后,@ohadlazar制作一个清晰的在线演示来显示问题