Fabric.js Polyline strokeWidth 属性

在 Fabric.js 中，Polyline 对象代表了由多个直线段连接而成的不闭合路径。Polyline 对象有许多可用于配置线条的属性，其中 strokeWidth 就是其中之一。

strokeWidth 属性

strokeWidth 属性指定了 Polyline 对象的线条宽度，单位为像素。具体来说，它表示了线条的粗细程度。

以下是 strokeWidth 属性的相关方法：

获取属性值

可以使用 get('strokeWidth') 方法获取 Polyline 对象的 strokeWidth 属性值。

var polyline = new fabric.Polyline(points, {
  strokeWidth: 3,
  // ...
});
console.log(polyline.get('strokeWidth')); // 输出 3

修改属性值

可以使用 set('strokeWidth', value) 方法修改 Polyline 对象的 strokeWidth 属性值。如果修改成功，Polyline 对象会被重新渲染。

var polyline = new fabric.Polyline(points, {
  strokeWidth: 3,
  // ...
});
polyline.set('strokeWidth', 5);
canvas.renderAll();

初始化属性值

可以在创建 Polyline 对象时指定 strokeWidth 属性的初始值。

var polyline = new fabric.Polyline(points, {
  strokeWidth: 3,
  // ...
});

示例

以下示例演示了如何设置 Polyline 对象的 strokeWidth 属性：

// 创建一个 Polyline 对象
var polyline = new fabric.Polyline([
  { x: 10, y: 10 },
  { x: 50, y: 50 },
  { x: 100, y: 50 }
], {
  strokeWidth: 3, // 设置线条粗细为 3px
  stroke: 'blue'   // 设置线条颜色为蓝色
});

// 添加到 canvas 中并渲染
canvas.add(polyline);
canvas.renderAll();

效果如下：

参考链接

• Polyline API
• strokeWidth API