使用鼠标拖放选择形状不起作用 - React Konva [英] Selection of shapes using mouse drag and drop not working - React Konva

问题描述

我正在尝试使用 React konva 的 Transformer 创建多个形状选择.它可以很好地用鼠标单击一个形状然后单击另一个形状，创建两个形状的完整选择.我希望通过鼠标拖放来实现这一点.为此，我在 文档中提到了舞台上的鼠标向上、向下和移动和点击功能.没有错误，但鼠标拖动选择不起作用.我希望选择与文档演示中给出的完全相同.

I am trying to create a multiple shape selection using Transformer of React konva. It is working well with the mouse click on one shape and then to other shape, creates a whole selection of both shapes. i want this to be achieved by mouse drag and drop. for which i wrote mouse up,down and move and click functions on stage which are mentioned in the documentation. there is no errors but mouse drag selection is not working. I want the selection to work exactly same as given on documentation demo.

这是我的演示沙箱 链接.

推荐答案

有很多方法可以做到这一点.我的方式:

There are many ways to do that. My way:

  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

这篇关于使用鼠标拖放选择形状不起作用 - React Konva的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！