Fabric.js 文本框 strokeDashArray 属性

1. 简介

Fabric.js 是一款基于 HTML5 Canvas 的开源图形库，用于创建交互式、高度可定制的图形界面。其中，文本框是常用的元素之一，可以通过 strokeDashArray 属性来实现虚线边框的效果。

2. strokeDashArray 属性

strokeDashArray 属性指定文本框边框线的虚线效果。它是一个由非负整数构成的数组，表示按照一定的模式交替绘制虚线和实线的长度，数组中第一个数字表示第一次绘制的实线长度，第二个数字表示第一次绘制的虚线长度，以此类推。

默认情况下，文本框的 strokeDashArray 值为 null，表示使用实线边框。要实现虚线边框效果，可以将其设置为 [实线长度, 虚线长度] 的数组。

// 设置文本框边框为 1 像素宽，实线长度为 5，虚线长度为 3
var textbox = new fabric.Textbox('Hello, world!', {
  strokeWidth: 1,
  strokeDashArray: [5, 3]
});

如果需要绘制更复杂的虚线效果，可以使用更长的 strokeDashArray 数组。

3. 注意事项

• strokeDashArray 的值必须是非负整数数组，否则会被忽略；
• 数组中第一个数字表示第一次绘制的实线长度，如果数组长度为奇数，则最后一个数字也表示实线长度；
• 如果实线长度为 0，将会被忽略；
• 虚线段数等于数组长度除以 2，如果数组长度为奇数，则最后一次绘制的线段为实线；
• 当文本框的填充颜色不为透明时，虚线效果将被填充覆盖，因此建议使用实线边框。

4. 总结

strokeDashArray 是 Fabric.js 文本框元素的一个重要属性，它可以实现虚线边框的效果。程序员需要注意该属性的取值范围和意义，以及虚线效果可能被填充覆盖的情况。