如何在 react-konva 中使用 Portal？

react-konva 如何控制 zIndex？

react-konva 严格遵循你在渲染时定义的元素顺序。有关更多信息，请参阅 zIndex 示例。

能否使用 react-konva 将节点移动到另一个容器？

目前，react-konva 不支持 React.createPortal API。

但可以使用 <Portal /> 组件，它来自 react-konva-utils 包。

如果要将节点临时移动到另一个容器，这种 Portal 很有用。常见用例如下：

1. 将正在拖动的图形移动到另一个图层，以提高性能
2. 将元素显示在其他元素上方，同时仍将它保留在组件树的深层

操作说明：尝试拖动矩形。你会看到它显示在最上层，但在渲染结果中仍是第一个元素。

import React from 'react';
import { Stage, Layer, Rect, Text, Circle, Line } from 'react-konva';
import { Portal } from 'react-konva-utils';

const App = () => {
  const [isDragging, setDragging] = React.useState(false);
  const [rectanglePosition, setRectanglePosition] = React.useState({
    x: 20,
    y: 50,
  });
  const [linePosition, setLinePosition] = React.useState({ x: 20, y: 200 });

  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Text
          text="The rectangle moves to the top layer while you drag it."
          fontSize={15}
        />
        <Portal selector=".top-layer" enabled={isDragging}>
          <Rect
            x={rectanglePosition.x}
            y={rectanglePosition.y}
            width={150}
            height={150}
            fill="red"
            draggable={true}
            onDragStart={() => {
              setDragging(true);
            }}
            onDragEnd={(event) => {
              setRectanglePosition(event.target.position());
              setDragging(false);
            }}
          />
        </Portal>
        <Circle x={200} y={100} radius={50} fill="green" />
        <Line
          x={linePosition.x}
          y={linePosition.y}
          points={[0, 0, 100, 0, 100, 100]}
          tension={0.5}
          closed
          stroke="black"
          fillLinearGradientStartPoint={{ x: -50, y: -50 }}
          fillLinearGradientEndPoint={{ x: 50, y: 50 }}
          fillLinearGradientColorStops={[0, 'red', 1, 'yellow']}
          draggable
          onDragEnd={(event) => {
            setLinePosition(event.target.position());
          }}
        />
      </Layer>
      <Layer name="top-layer" />
    </Stage>
  );
};

export default App;