Fabric.js 组borderDashArray 属性

Fabric.js 是一个开源的基于JavaScript的HTML5 Canvas库，可以实现高效的创建和操纵图形、动画和交互性能。其中组（Group）是Fabric.js中一个很有用的概念，通过将多个对象组合在一起，可以方便地对它们进行操作。而borderDashArray属性则可以设置组或对象周围的边框线段为虚线。

语法

object.set({
  borderDashArray: [5, 2]
});

或者

object.borderDashArray = [5, 2];

其中，[5, 2]表示线段的长度和间隔的长度，可以自定义设置。

示例

var rect1 = new fabric.Rect({
  left: 50,
  top: 50,
  fill: 'red',
  width: 100,
  height: 100,
  strokeWidth: 5
});

var rect2 = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'blue',
  width: 100,
  height: 100,
  strokeWidth: 5
});

var group = new fabric.Group([rect1, rect2], {
  left: 50,
  top: 50,
  borderColor: 'green',
  borderDashArray: [5, 2]
});

canvas.add(group);

在上述代码中，我们创建了两个矩形对象，并将它们组合在一起。接着设置组的边框颜色为绿色，并将线段的长度和间隔的长度分别设为5和2。最后添加到画布中，结果如下图所示。

总结

borderDashArray属性对于定义边框为虚线的组或对象非常有用。它可以通过自定义线段的长度和间隔的长度，方便地实现不同样式的虚线边框。