FabricJS 中如何为矩形添加虚线描边

在使用 FabricJS 进行图形绘制与操作时，为矩形添加虚线描边能够为设计增添独特的视觉效果。下面我们就详细探讨一下如何在 FabricJS 中实现这一功能。

要明确在 FabricJS 里创建矩形是基础步骤。通过简单的代码实例，我们可以轻松创建一个基本矩形：

var canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 200,
  height: 150,
  fill: 'lightblue'
});
canvas.add(rect);

上述代码创建了一个浅蓝色的矩形，并将其添加到名为“canvas”的画布上。

接下来就是关键的为矩形添加虚线描边的部分。在 FabricJS 中，我们通过设置矩形的 strokeDashArray 属性来实现虚线效果。strokeDashArray 接收一个数组参数，这个数组定义了虚线的样式。例如：

rect.strokeDashArray = [5, 3];
rect.stroke = 'black';
rect.strokeWidth = 2;

这里，[5, 3] 表示每 5 个像素的线段后跟随 3 个像素的间隙，从而形成虚线样式。stroke 属性设置了描边的颜色为黑色，strokeWidth 则设定了描边的宽度为 2 像素。通过这些设置，原本普通的矩形就拥有了黑色的虚线描边。

如果想要创建更复杂多样的虚线效果，只需要调整 strokeDashArray 数组的值即可。比如 [10, 5, 2, 5] 会创建一种更复杂的虚线模式，即 10 像素的线段、5 像素的间隙、2 像素的线段和 5 像素的间隙依次循环。

在实际应用中，我们还可以结合用户交互来动态改变矩形的虚线描边。例如，通过监听鼠标事件，当用户点击矩形时切换不同的虚线样式：

rect.on('mouse:down', function() {
  if (this.strokeDashArray === [5, 3]) {
    this.strokeDashArray = [10, 5, 2, 5];
  } else {
    this.strokeDashArray = [5, 3];
  }
  canvas.renderAll();
});

这段代码监听了矩形的鼠标按下事件，当点击矩形时，会根据当前的虚线样式切换为另一种样式，并通过 canvas.renderAll() 方法重新渲染画布以显示新的样式。

通过以上步骤，在 FabricJS 中为矩形添加虚线描边变得轻而易举，无论是静态的设计还是动态交互场景，都能灵活应对，为我们的图形绘制项目带来更多创意与可能。