如何从 react-konva 访问 Konva 节点？

在某些情况下，您可能需要直接使用 Konva API。例如，用于导出画布或动画。

有两种方法可以从 react-konva 访问 Konva 节点/形状。

使用 refs API。

您可以使用 refs API 来访问一个 Konva 节点。

import React from 'react';
import { Stage, Layer, Circle } from 'react-konva';

const App = () => {
  const shapeRef = React.useRef(null);
  React.useEffect(() => {
    // 这将记录 `Konva.Circle` 实例
    console.log(shapeRef.current);
  });
  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Circle
          ref={shapeRef}
          x={window.innerWidth / 2}
          y={window.innerHeight / 2}
          radius={50}
          fill="red"
        />
      </Layer>
    </Stage>
  );
};

export default App;

Open Sandbox

在事件回调中使用事件对象

另一种访问 Konva 节点的常见方法是使用事件对象，该对象作为任何事件的参数传入：

import { Stage, Layer, Circle } from 'react-konva';

const App = () => {
  const handleClick = (e) => {
    // 记录被点击的 Konva.Circle 实例
    console.log(e.target);
  };
  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Circle
          x={window.innerWidth / 2}
          y={window.innerHeight / 2}
          radius={50}
          fill="green"
          onClick={handleClick}
        />
      </Layer>
    </Stage>
  );
};

export default App;

Open Sandbox