Fabric.js Polyline borderDashArray 属性

在 Fabric.js 中，Polyline 是一种由多个点连接而成的线段图形。其中，borderDashArray 属性用于设置 Polyline 的虚线样式。

语法

var polyline = new fabric.Polyline(points, {
  strokeDashArray: [dashArray],
  // ... 其他属性
});

其中，points 表示一组点的坐标数组；dashArray 表示边框虚线的间隔，可以设置为一个数组，例如 [5, 2] 表示画 5px 的实线，之后跳过 2px，再画 5px 的实线，如此循环。

示例代码

var canvas = new fabric.Canvas('canvas');

var points = [
  { x: 50, y: 50 },
  { x: 150, y: 50 },
  { x: 150, y: 150 },
  { x: 50, y: 150 },
  { x: 50, y: 50 }
];

var polyline = new fabric.Polyline(points, {
  stroke: 'red',
  strokeWidth: 5,
  strokeDashArray: [8, 4],
  fill: 'transparent'
});

canvas.add(polyline);

上面的代码会创建一个 Polyline，并设置了虚线样式。其中，stroke 表示边框颜色，strokeWidth 表示边框宽度，fill 表示填充色，这里设置为透明。

效果预览

以上就是 Fabric.js Polyline borderDashArray 属性的介绍。通过设置它，您可以实现虚线的效果，从而使您的图形更加生动和丰富。