Skip to main content

在画布舞台中渲染 DOM 元素

如何将 DOM 元素（如输入框或 div）放入 Konva 舞台中？​

如果您想将某些 DOM 节点作为画布树的一部分，可以使用来自 react-konva-utils 包 的 <Html /> 组件。

请记住，DOM 节点不是 Konva 容器的直接子节点。<Html /> 只是一个封装器，用于处理类似门户的 API。如果您尝试将画布导出为图像，HTML 内容将不可见。

import React from 'react';
import { Stage, Layer, Rect } from 'react-konva';
import { Html } from 'react-konva-utils';

const App = () => {
  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Html>
          <input placeholder="来自 Konva 节点的 DOM 输入" />
        </Html>
        <Rect
          x={20}
          y={20}
          width={50}
          height={50}
          fill="red"
          shadowBlur={5}
        />
      </Layer>
    </Stage>
  );
};

export default App;