FabricJS – 如何将 Line 对象移动到绘制对象堆栈的底部？

1. FabricJS简介

FabricJS 是一个开源的基于 HTML5 Canvas 的图形库，是一个可以用于进行高级交互性的绘图和图像编辑的 JavaScript 库，它是一个非常流行的绘图库。使用 FabricJS 开发时，代码更加清晰简洁易读，可以轻松地制作高级交互式应用程序。

2. Line对象

FabricJS 中的 Line 对象是用于画直线的，它可以接收包含以下属性的选项对象：

{
  type: 'line',
  x1:, //起始点的 x 坐标
  y1:, //起始点的 y 坐标
  x2:, //结束点的 x 坐标
  y2:, //结束点的 y 坐标
  strokeWidth: , //线宽度
  stroke: , //线颜色
  fill: , //填充颜色
  opacity: //透明度
}

3. 将Line对象移动到绘制对象堆栈的底部

在 FabricJS 中，可以通过使用 canvas.sendToBack() 函数将绘制对象移动到绘制对象堆栈的底部。

以下是移动 Line 对象到绘图堆栈底部的示例代码：

var canvas = new fabric.Canvas('canvas');
// 创建 Line 对象
var line = new fabric.Line([0, 0, 200, 200], {
  stroke: 'red',
  strokeWidth: 2
});
// 将 Line 对象添加到 canvas 画布中
canvas.add(line);
// 将 Line 对象移动到绘制对象堆栈的底部
canvas.sendToBack(line);
canvas.renderAll();

需要注意的是，在使用 canvas.sendToBack() 函数之前，需要先将 Line 对象添加到 canvas 画布中。否则，就会出现错误。

另外，如果想将 Line 对象移动到绘制对象堆栈的顶部，可以使用canvas.bringToFront()函数。