Fabric.js 图片 strokeDashOffset 属性

简介

在通过 Fabric.js 库渲染图片时，可以使用 strokeDashOffset 属性来控制图片轮廓线的虚线效果。

语法

image.set({
  strokeDashOffset: value
});

其中，value 表示虚线的偏移量，可以为正数或负数。

示例

下面的代码演示了如何使用 strokeDashOffset 属性来设置图片轮廓线的虚线效果：

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

const imageUrl = 'https://picsum.photos/200';

fabric.Image.fromURL(imageUrl, function(image) {
  image.set({
    left: 50,
    top: 50,
    stroke: 'blue',
    strokeWidth: 5,
    strokeDashArray: [5, 5],
    strokeDashOffset: -10
  });
  canvas.add(image);
  canvas.renderAll();
});

其中，strokeDashArray 属性用来指定虚线的样式，本例中为 [5, 5] 表示虚线与实线的长度比为 1:1，strokeDashOffset 属性为 -10 表示起始位置向左偏移 10 个像素。

注意事项

• strokeDashOffset 属性只在设置了 strokeDashArray 属性时才生效。
• 虚线样式的长度比可以根据需要随时调整，只需要修改 strokeDashArray 属性的值即可。

结语

使用 strokeDashOffset 属性可以为图片轮廓线的虚线效果带来更高的自定义性。如果你正在使用 Fabric.js 渲染图片，强烈建议你尝试一下这个属性。