使用 React 绘制画布形状

所有 react-konva 组件对应于同名的 Konva 组件。 除非另有说明，所有可用于 Konva 对象的参数都是对应 react-konva 组件的有效属性。

核心形状包括：Rect、Circle、Ellipse、Line、Image、Text、TextPath、Star、 Label、SVG Path、RegularPolygon。您还可以创建 自定义形状。

下面是一个演示，展示了一些基本形状及其各种样式选项：

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

const App = () => {
  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Text text="画布上的一些文本" fontSize={15} />
        <Rect
          x={20}
          y={50}
          width={100}
          height={100}
          fill="red"
          shadowBlur={10}
        />
        <Circle x={200} y={100} radius={50} fill="green" />
        <Line
          x={20}
          y={200}
          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']}
        />
      </Layer>
    </Stage>
  );
};

export default App;

Open Sandbox