Fabric.js 文本 borderDashArray 属性

borderDashArray 是 Fabric.js 中 Text 对象的一个属性，用于定义文本边框线段的样式。

语法

text.set({
  borderDashArray: [number: dashLength, number: gapLength]
});

参数

• dashLength: 指定边框线段的长度。
• gapLength: 指定相邻线段之间的间隔长度。

用法

borderDashArray 属性可以在 Text 对象的 set() 方法中使用，也可以在 new fabric.Text() 构造函数中传入。

以下是一个示例代码：

const text = new fabric.Text('Hello World', {
  left: 100,
  top: 100,
  borderColor: '#f00', // 设置边框颜色
  borderDashArray: [5, 5] // 设置边框线段的样式
});

canvas.add(text);

效果如下图所示：

注意事项

• 如果 borderDashArray 的值为空数组，则表示不显示边框线段。
• 如果 borderDashArray 的值只有一个元素，则表示使用实线边框。
• 如果 borderDashArray 的值不是数组或者数组元素不是数字类型，则会被忽略。
• 为了在绘制时节省性能，Fabric.js 会在首次生成 Text 对象时预先计算好边框线段的路径，因此在设置 borderDashArray 属性后，需要先调用 canvas.renderAll() 方法，才能生效。