Fabric.js 多边形 strokeWidth 属性

在 Fabric.js 中，多边形是一个非常常用的形状。通过设置多边形的 strokeWidth 属性，可以控制多边形的边框宽度，使其更加美观。

如何设置多边形的 strokeWidth 属性？

在创建多边形对象后，可以设置 strokeWidth 属性的值，来控制多边形边框的宽度。例如：

var rect = new fabric.Polygon([
    {x: 50, y: 50},
    {x: 100, y: 50},
    {x: 100, y: 100},
    {x: 50, y: 100}
], {
    strokeWidth: 5,
    stroke: 'red',
    fill: 'blue'
});

canvas.add(rect);

在上面的代码中，创建了一个四边形，设置了 strokeWidth 属性为 5，stroke 属性为红色，fill 属性为蓝色。最后将多边形对象添加到 canvas 中。

如何动态设置多边形的 strokeWidth 属性？

在创建多边形对象后，可以随时通过修改 strokeWidth 属性的值来动态设置多边形的边框宽度。例如：

rect.set({
    strokeWidth: 10
});
canvas.renderAll();

在上面的代码中，获取到之前创建的多边形对象 rect，将其 strokeWidth 属性的值修改为 10，再重新渲染 canvas。

其他注意事项

• strokeWidth 的值必须为大于等于 0 的数字。
• strokeWidth 的默认值为 1。
• 如果将 strokeWidth 的值设置为 0，则多边形的边框将不会被绘制。

希望这篇文章能帮助你理解 Fabric.js 中多边形的 strokeWidth 属性，更好地使用 Fabric.js 创建动态的网页设计。