Fabric.js 文本框borderDashArray 属性

fabric.js 是一个用于绘制交互式 Web 应用程序的基于 canvas 的 Javascript 库。其中的 borderDashArray 属性可用于设置文本框的边框虚线样式。

属性值

borderDashArray 属性接受一个包含长度为两个以上的数字的数组，用于表示虚线的长度和间隔的像素值。默认值为 null，表示不使用虚线。

例如，以下值将创建一个边框宽度为1像素、虚线长度为5像素，间隔为10像素的虚线样式：

var text = new fabric.Textbox('Hello, world!', {
  left: 50,
  top: 50,
  width: 100,
  height: 100,
  strokeWidth: 1,
  strokeDashArray: [5, 10]
});

注意事项

• 如果数组的长度为奇数，则最后一个数字将被忽略。
• 虚线样式只在设置了边框宽度时才会生效，即 strokeWidth 属性不为0。
• 如果 strokeWidth 属性的值小于等于0，则虚线样式将被忽略。
• 边框虚线样式只适用于 Textbox 类型，不适用于 IText 类型。

参考链接

• Fabric.js - Textbox borderDashArray
• MDN - CanvasRenderingContext2D.setLineDash()