Fabric.js Itext cornerDashArray 属性

cornerDashArray 是 Itext 对象的属性之一，它可以让你创建虚线边框的 Itext。该属性是一个包含两个或四个数字的数组。它指定了依次绘制或跳过的数字之间的交替线段的长度。

使用示例

let itext = new fabric.IText('Hello World!', {
  top: 10,
  left: 10,
  cornerColor: 'blue',
  cornerStrokeColor: 'red',
  cornerDashArray: [5, 5],
  cornerSize: 10,
  cornerStyle: 'circle',
  cornerStrokeWidth: 2
});

canvas.add(itext);

以上代码将创建一个虚线边框的 Itext，其中 cornerDashArray 属性指定了交替线段的长度为 [5, 5]。

属性解释

• cornerDashArray 数组的第一个元素指定要绘制的线段的长度，第二个元素指定要跳过的线段的长度。
• 如果 cornerDashArray 只包含两个元素，则属性创建的是斜线的虚线边框，如上所示。如果 cornerDashArray 包含四个元素，则属性创建的是矩形的虚线边框。

注意事项

• 如果设置的值为空数组，则会删除虚线的边框款式。
• 该属性只在点击 Itext 时显示边框时进行绘制。
• 该属性不可在初始化后再次修改，必须初始化时就指定。

结论

cornerDashArray 是 Itext 对象中创建虚线边框的好方法。通过指定交替线段的长度，可以创建出不同类型和样式的虚线边框。但需要注意的是，该属性必须在初始化时指定，并且只在点击 Itext 时显示边框时进行绘制。