Fabric.js 多边形CornerStyle 属性

CornerStyle 属性是 Fabric.js 中用于定义多边形对象每个顶点样式的属性之一。它定义了多边形的所有高级特性，例如形状的角度和圆度等，以及多边形边缘的形状和颜色等属性。

使用方法

CornerStyle 属性可以通过以下方式之一来设置多边形的样式:

1. 直接在多边形对象中定义:

var polygon = new fabric.Polygon(points, {
  fill: 'blue',
  stroke: 'red',
  strokeWidth: 2,
  strokeLineJoin: 'bevil',
  cornerStyle: 'round' // or 'bevil' or 'sharp'
});

2. 手动设置多边形样式:

polygon.set({
  cornerStyle: 'bevil'
});

属性值

CornerStyle 属性有三个选项: round,bevil 和 sharp 。

• round : 每个角都有一个圆形弧度
• bevil : 角被削平
• sharp : 角是尖锐的

使用示例

var canvas = new fabric.Canvas('canvas');

var triangle = new fabric.Polygon([
  {x: 50, y: 0},
  {x: 100, y: 50},
  {x: 0, y: 50}
], {
  fill: 'blue',
  stroke: 'red',
  strokeWidth: 2,
  cornerStyle: 'round'
});

canvas.add(triangle);

在上面的示例中，我们创建了一个带有圆形弧度的三角形，并将其添加到画布中。重要的是要注意，当我们设置 cornerStyle 属性时，它应用于多边形的每个角，因此在此示例中，每个角都具有圆形弧度。