Fabric.js | Ellipse borderDashArray 属性

在Fabric.js中，Ellipse对象是一个椭圆形对象。它与其他对象一样具有许多属性，其中之一是borderDashArray。

borderDashArray属性

borderDashArray是一个数组，用于在边框上创建虚线。它的值应该是包含数字的数组。边框将在可见线段和不可见的空间之间不断变化。

以下是设置borderDashArray属性的代码示例：

var ellipse = new fabric.Ellipse({
  ...
  strokeDashArray: [5, 5],
  ...
});

在上述示例中，strokeDashArray已被设置为[5, 5]，这意味着边框将在5个像素的可见线段和5个像素的不可见空间之间变化。

使用不同的值可以创建不同的虚线样式。例如，以下代码将创建10个像素的可见线段，后跟5个像素的不可见空间，然后再次重复：

var ellipse = new fabric.Ellipse({
  ...
  strokeDashArray: [10, 5],
  ...
});

注意事项

• borderDashArray属性仅适用于边框。它不会从内部的填充区域开始。
• 边框的宽度越小，虚线的间隔就会越短，使虚线更密集。
• borderDashArray属性的值可以是任何数量的数字。数组中的前两个数字将被解析为可见线段和不可见空间之间的长度，继续此模式直到数组结束。
• 如果borderDashArray属性的值不是偶数，则最后一个数字将被复制一次以使其成为偶数。