使用鼠标拖放选择形状不起作用-React Konva

问题描述

我正在尝试使用HTTP/1.1 200 OK Content-Type: application/json Digest: sha-256=X48E9qOokqqrvdts8nOJRJN3OWDUoyWxBf7kbu9DBPE= {"hello": "world"} 中的Transformer创建多个形状选择。鼠标单击一个形状，然后单击另一个形状，效果很好，创建了这两个形状的整体选择。我希望通过鼠标拖放来实现。为此，我在舞台上写了documentation中提到的鼠标的上，下，移动和单击功能。没有错误，但鼠标拖动选择不起作用。我希望所做的选择与文档演示中给出的完全相同。

这是我的演示沙箱link。

解决方法

有很多方法可以做到这一点。我的方式：

  const selectionRectRef = React.useRef();
  const selection = React.useRef({
    visible: false,x1: 0,y1: 0,x2: 0,y2: 0
  });

  const updateSelectionRect = () => {
    const node = selectionRectRef.current;
    node.setAttrs({
      visible: selection.current.visible,x: Math.min(selection.current.x1,selection.current.x2),y: Math.min(selection.current.y1,selection.current.y2),width: Math.abs(selection.current.x1 - selection.current.x2),height: Math.abs(selection.current.y1 - selection.current.y2),fill: "rgba(0,161,255,0.3)"
    });
    node.getLayer().batchDraw();
  };

  const oldPos = React.useRef(null);
  const onMouseDown = (e) => {
    const isElement = e.target.findAncestor(".elements-container");
    const isTransformer = e.target.findAncestor("Transformer");
    if (isElement || isTransformer) {
      return;
    }

    const pos = e.target.getStage().getPointerPosition();
    selection.current.visible = true;
    selection.current.x1 = pos.x;
    selection.current.y1 = pos.y;
    selection.current.x2 = pos.x;
    selection.current.y2 = pos.y;
    updateSelectionRect();
  };

  const onMouseMove = (e) => {
    if (!selection.current.visible) {
      return;
    }
    const pos = e.target.getStage().getPointerPosition();
    selection.current.x2 = pos.x;
    selection.current.y2 = pos.y;
    updateSelectionRect();
  };

  const onMouseUp = () => {
    oldPos.current = null;
    if (!selection.current.visible) {
      return;
    }
    const selBox = selectionRectRef.current.getClientRect();

    const elements = [];
    layerRef.current.find(".rectangle").forEach((elementNode) => {
      const elBox = elementNode.getClientRect();
      if (Konva.Util.haveIntersection(selBox,elBox)) {
        elements.push(elementNode);
      }
    });
    trRef.current.nodes(elements);
    selection.current.visible = false;
    // disable click event
    Konva.listenClickTap = false;
    updateSelectionRect();
  };

演示：https://codesandbox.io/s/multiple-selection-react-hooks-and-konva-forked-tgggi?file=/src/index.js