如何在 react-konva 中使用门户？

react-konva 如何控制 zIndex？

react-konva 严格遵循您在渲染中定义元素的顺序。有关更多信息，请查看 zIndex 演示。

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

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

但是我们可以使用来自 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;