Fabric.js 多边形 strokeDashArray 属性

在 Fabric.js 中，我们可以使用多边形（fabric.Polygon）对象来绘制一个由多个线段组成的封闭形状。其中，strokeDashArray 属性可以让我们设置多边形边框的虚线样式。

语法

polygon.set('strokeDashArray', [dashArray]);

dashArray 参数是一个数组，用于指定虚线间隔的长度（单位为像素）。数组中的偶数项表示实线长度，奇数项表示虚线长度。例如，[5, 2] 表示先绘制 5 个像素的实线，再间隔 2 个像素绘制虚线，如此往复。

同时，strokeDashArray 也支持使用字符串来表示虚线样式，例如 '5 2'。

示例

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

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

var polygon = new fabric.Polygon(points, {
  fill: 'transparent',
  stroke: 'black',
  strokeWidth: 5,
  strokeDashArray: [10, 5] // 虚线样式
});

canvas.add(polygon);

以上代码将绘制一条虚线边框的矩形，其中虚线的实现方法为先画 10 个像素的实线，再间隔 5 个像素绘制虚线。运行效果如下：

注意事项

如果同时设置了 stroke 和 fill，虚线仅会绘制在 stroke 属性上。如果想要填充虚线区域，可以将 fill 属性设置为虚线的颜色，然后将多边形对象的 opacity 属性设置为小于 1 的值。

var polygon = new fabric.Polygon(points, {
  fill: 'red',
  opacity: 0.5,
  stroke: 'black',
  strokeWidth: 5,
  strokeDashArray: [10, 5]
});

以上代码绘制了一个填充了红色虚线区域的多边形对象，效果如下：

参考文献

• Fabric.js Polygon Class Documentation
• CSS 样式中的 stroke-dasharray 属性