Fabric js路径cornerStyle属性

cornerStyle属性是Fabric js中绘制路径时用到的属性，用于设置路径的拐角样式。

属性值

cornerStyle属性可以设置以下值：

• rect：使用矩形拐角。
• round：使用圆形拐角。
• bevel：使用斜角拐角。

默认值是rect。

使用方法

使用以下代码来设置路径的cornerStyle属性：

pathObj.set({
  cornerStyle: 'round'
});

使用以下代码获取路径的cornerStyle属性值：

var cornerStyle = pathObj.get('cornerStyle');

示例

下面是一个绘制路径时使用cornerStyle属性的示例：

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

var rect = new fabric.Path('M 100 100 L 300 100 L 300 300 L 100 300 z', {
  fill: 'red',
  stroke: 'black',
  strokeWidth: 2,
  cornerStyle: 'rect'
});

var roundPath = new fabric.Path('M 100 350 L 200 350 L 200 400 L 350 400 L 350 500 L 100 500 z', {
  fill: 'green',
  stroke: 'black',
  strokeWidth: 2,
  cornerStyle: 'round'
});

var bevelPath = new fabric.Path('M 400 200 L 500 300 L 400 400 L 300, 300 z', {
  fill: 'blue',
  stroke: 'black',
  strokeWidth: 2,
  cornerStyle: 'bevel'
});

canvas.add(rect, roundPath, bevelPath);

以上代码会在画布上绘制三个路径，使用不同的cornerStyle属性值，效果如下：

在示例中，第一个路径使用了矩形拐角，第二个路径使用了圆形拐角，第三个路径使用了斜角拐角。

总结

cornerStyle属性可以用来设置路径的拐角样式，可以选择使用矩形、圆形、斜角等拐角。在Fabric js中，可以使用set方法来设置属性值，也可以使用get方法获取属性值。