react-konva - 声明式画布组件用于 React

npm install react-konva konva

适用于图形应用的所有常见形状

支持桌面和移动设备

节点嵌套、分组和事件冒泡

高质量导出为数据 URL、图像数据或图像对象

它看起来如何？

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

export const App = () => {
  return (
    // Stage - 是一个 div 包裹层
    // Layer - 是实际的 2D 画布元素，因此可以在舞台内有多个图层
    // Rect 和 Circle 不是 DOM 元素。它们是画布上的 2D 形状
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Rect width={50} height={50} fill="red" />
        <Circle x={200} y={200} stroke="black" radius={50} />
      </Layer>
    </Stage>
  );
}

演示