Fabric.js - 路径cornerSize属性

简介

cornerSize属性是Fabric.js路径对象的一个参数，用于指定路径对象的顶点的角半径大小。该属性接受一个整数值，默认值为0，表示没有角半径。当该值大于0时，路径对象的顶点将呈现为一个具有相应角半径的正圆角。

语法

path.setOptions({cornerSize: 10});

示例

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

var path = new fabric.Path('M 100 100 L 200 200 L 300 100 L 400 200', {
    fill: '',
    stroke: 'black',
    strokeWidth: 2
});

// 通过setOptions方法设置cornerSize
path.setOptions({cornerSize: 10});

canvas.add(path);

在上面的示例中，我们创建了一个包括四个点的路径，并设置了其外部宽度为2个单位并包含一条黑色轮廓。接下来，我们通过setOptions方法将路径的cornerSize属性设置为10，这将使路径中的每个点都呈现为一个外径为10个单位的圆角。

结论

通过指定路径对象的cornerSize属性，我们可以使路径对象的顶点呈现为一个形状良好的圆角。此外，我们还可以使用setOptions方法轻松修改路径的cornerSize属性，以便在运行时不断更改路径的角半径。