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

Question

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

Answer 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