Fabric.js 图像 strokeDashArray 属性

简介

在 Fabric.js 中，strokeDashArray 属性可以用来设置给定对象的轮廓线段的虚线样式。该属性允许程序员自定义对象的轮廓线段的样式，以创建虚线或其他特殊效果。

语法

object.set('strokeDashArray', [segmentLength, segmentGap, ...]);

参数解释

• object: 需要设置 strokeDashArray 属性的图像对象。
• segmentLength: 每个实线段的长度。
• segmentGap: 每个虚线段之间的间隔长度。

示例

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

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

rect.set('strokeDashArray', [10, 5]); // 设置为 10px 实线和 5px 虚线交替

canvas.add(rect);

注意事项

• strokeDashArray 属性仅对具有边框的对象生效，例如 Rect、Circle 等。
• 数组中的值用于定义实线和虚线的交替长度。例如，[10, 5, 3, 5] 表示每 10px 实线，5px 虚线，3px 实线，5px 虚线的样式循环。
• strokeDashArray 属性还可以应用于线条对象。