在konva中使用各种shape（矩形、圆形、弧形、星形、箭头、椭圆）

konva 的 shape 类中，已封装好矩形类 Rect、圆形类 Circle

Rect

Shape 的基础使用比图形和文字类型更加简单，比如 Rect，只需定义好他的宽高和颜色就可以在画布上显示了

<Rect fill={fill} width={width} height={height} {...commonProps} />

添加圆角

设置cornerRadius为其添加圆角，可分别为 4 个角设置圆角

<Rect
    fill={fill}
    width={width}
    height={height}
    cornerRadius={[10, 30, 50, 70]}
    {...commonProps}
/>

更多字段查询： Class: Rect

Circle

Circle 只需定义好fill 和 半径 radius，可设置正圆

<Circle fill={fill} radius={radius} {...commonProps} />

更多字段查询： Class: Circle

Arc

弧形，定义内径和外径长度与弧形角度，可以加上描边

<Arc
    fill={fill}
    innerRadius={innerRadius}
    outerRadius={outerRadius}
    angle={angle}
    {...commonProps}
/>

Star

星形，定义好内径和外径，角的数量

<Star
    fill={fill}
    numPoints={5}
    innerRadius={50}
    outerRadius={100}
    stroke="black"
    strokeWidth={5}
    {...commonProps}
/>

更多字段查询： Class: Star

Arrow

在 konva 中 arrow 并不是继承自 Shape，而是 Line 类。最基本的需定义好两点（或多点）的坐标 points（[x1,y1,x2,y2]）即可。

<Arrow
    stroke={fill}
    fill={fill}
    tension={1}
    points={[0, 0, 100, 100]}
    pointerLength={10}
    pointerWidth={20}
    {...commonProps}
/>

更多字段查询： Class: Arrow

Ellipse

ellipse 是椭圆，定义好 x、y 轴的半径即可

return <Ellipse {...ellipseRadius} fill={fill} {...commonProps} />

更多字段查询： Class: Ellipse

整体感觉 konva 团队封装的很好，直接拿来用就行了。