Fabric.js | 矩形顶部属性

在 Fabric.js 中，我们可以使用 fabric.Rect 来绘制矩形。矩形除了可以设置宽、高、位置等属性外，还有一些顶部属性，如填充色，描边色、描边宽度等。

填充色

我们可以使用 fill 属性来设置矩形的填充色，例如：

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

这将创建一个红色的矩形。当然，我们还可以使用其他的颜色表示方式，如 RGB 值、十六进制颜色值等。

描边色

矩形的描边色可以使用 stroke 属性来设置，例如：

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

这将创建一个描边为蓝色的矩形。我们还可以使用其他的颜色表示方式。

描边宽度

我们可以使用 strokeWidth 属性来设置矩形的描边宽度，例如：

var rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 200,
  height: 200,
  strokeWidth: 2,
  stroke: 'black'
});

这将创建一个描边宽度为 2，描边为黑色的矩形。我们还可以设置其他宽度的描边。

圆角

Fabric.js 的矩形还支持圆角，我们可以使用 rx 和 ry 属性来设置矩形的圆角半径，例如：

var rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 200,
  height: 200,
  rx: 20,
  ry: 20,
  fill: 'yellow'
});

这将创建一个黄色的矩形，并且四个角都被设置成了半径为 20 的圆角。如果我们只设置 rx 或者 ry，那么另一个属性会默认为相同的值。

总结

通过上面的介绍，我们了解了 Fabric.js 的矩形顶部属性，包括填充色、描边色、描边宽度、圆角等。使用这些属性可以帮助我们创建更加丰富的图形。