react-konva 中舞台组件的鼠标进入和鼠标离开事件侦听器不起作用答案

【问题标题】：Mouse enter and mouse leave event listeners for stage component in react-konva does not workreact-konva 中舞台组件的鼠标进入和鼠标离开事件侦听器不起作用
【发布时间】：2020-06-11 02:12:01
【问题描述】：

react-konva 中的舞台组件是否有鼠标进入和鼠标离开事件监听器？当用户鼠标进入、移动和离开画布时，我需要实现类似于 Figma 的协作指针。尝试在 Stage 组件上使用 onMouseEnter 和 onMouseLeave，不知何故它会在光标触摸 Rect、Circle 和 Arrow 组件时进行监听。

【问题讨论】：

标签： konvajs react-konva konvajs-reactjs

【解决方案1】：

您可以在舞台本身或其 DOM 包装器上使用 onMouseEnter 和 onMouseLeave 事件。

const App = () => {
  const [entered, setIntered] = React.useState(false);
  return (
    <Stage
      width={window.innerWidth / 2}
      height={window.innerHeight / 2}
      onMouseEnter={() => {
        setIntered(true);
      }}
      onMouseLeave={() => {
        setIntered(false);
      }}
      style={{
        border: "1px solid red",
        margin: "5px",
        display: "inline-block"
      }}
    >
      <Layer>
        <Text
          text={`Mouse is ${entered ? "inside" : "outside"} of canvas.`}
          fontSize={15}
        />
      </Layer>
    </Stage>
  );
};

演示：https://codesandbox.io/s/react-konva-mouseevent-event-us0w8?file=/src/index.js

【讨论】：

@lvrton - 仅供参考 Konva 教程文档说舞台没有自己的事件。我同意现在确实如此。 konvajs.org/docs/events/Stage_Events.html 的文档已过期。
@VanquiishedWombat 可能我需要为它找到更好的词。
@lavrton 我之前使用过 react-konva 16.8，但它不起作用。刚才我更新到 16.13 和 konva 到 6.0.0 并且它工作正常，谢谢！