问题引出

fabric.js用于canvas画布上的图形元素绘制，纯前端项目中的图形绘制可以通过控制图形元素在canvas画布上的添加顺序来控制图形元素的层级，实际应用中，图形元素的绘制数据常常需要根据需求从后端接口异步获取，在绘制相对复杂的图形时，同一个画布上绘制的各个图形元素的数据需要通过各自的接口从后端异步获取，异步返回数据的顺序不同导致加载的图层元素的层级无法按照预想的结果加载，因此需要通过设置来控制元素的层级。

层级控制实现

直接上代码了。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>Fabric.js 控制元素层级</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/521/fabric.js"></script>

    <style>
        #container {
            margin-bottom: 10px;
            border: 1px solid #ccc;
        }

        #lnkDownload {
            display: block;

            padding: 0;
            margin-top: 10px;
            text-decoration: none;
        }
    </style>

</head>
<body>


<div id="container">
  
   <canvas id="canvas" width="600" height="600" style="border: 1px solid #ccc"></canvas>
   
</div>
<div>
 <button onclick="bringToFront()">矩形移至顶层</button>
 <button onclick="sendToBack()">矩形移至底层</button>
 <button onclick="sendToBack2()">三角形移至底层</button>
 <button onclick="bringForward()">圆形向上走一层</button>
 <button onclick="sendBackwards()">圆形向下走一层</button>
 <button onclick="moveTo0()">三角形移动到第0层</button>
 <button onclick="moveTo1()">三角形移动到第1层</button>
 <button onclick="moveTo2()">三角形移动到第2层</button>
 <button onclick="moveTo3()">三角形移动到第3层</button>
</div>
</body>
</html>

<script>
  const canvas = new fabric.Canvas('canvas')

  // 橙色矩形
  rect = new fabric.Rect({
    top: 30,
    left: 30,
    fill: 'orange',
    width: 200,
    height: 100
  })

  // 粉红色圆形
  circle = new fabric.Circle({
    top: 50,
    left: 60,
    fill: 'hotpink',
    radius: 50
  })

  // 蓝色三角形
  triangle = new fabric.Triangle({
    top: 80,
    left: 30,
    width: 80,
    height: 100,
    fill: 'blue'
  })

  // 默认的层级从下到上的顺序：矩形、圆形、三角形
  canvas.add(rect, circle, triangle)
  
  // 矩形移到顶层
function bringToFront() {
    // 方法1
    canvas.bringToFront(rect);

    // 方法2
    // rect.bringToFront()
}

// 矩形移到底层层
function sendToBack() {
    // 方法1
    canvas.sendToBack(rect);

    // 方法2
    // rect.sendToBack()
}

// 三角形移到底层层
function sendToBack2() {
    // 方法1
    canvas.sendToBack(triangle);

    // 方法2
    // triangle.sendToBack()
}

// 圆形往上走一层
function bringForward() {
    // 方法1
    canvas.bringForward(circle);

    // 方法2
    // circle.bringForward()
}

// 圆形往下走一层
function sendBackwards() {
    // 方法1
    canvas.sendBackwards(circle);

    // 方法2
    // circle.sendBackwards()
}

// 自定义层级 moveTo

// 三角形移到0层
function moveTo0() {
    // 方法1
    // canvas.moveTo(triangle, 0)

    // 方法2
    triangle.moveTo(0);
}
// 三角形移到1层
function moveTo1() {
    // 方法1
    canvas.moveTo(triangle, 1)

    // 方法2
    // triangle.moveTo(1);
}
// 三角形移到2层
function moveTo2() {
    // 方法1
    // canvas.moveTo(triangle, 2)

    // 方法2
    triangle.moveTo(2);
}
// 三角形移到3层 图层一共只有三层0，1，2 当设置的层数大于最大层数的时候，默认移到最大层。当设置的层数为负数是，点击后，移动层数为初始设置的默认层数加设置的负数
function moveTo3() {
    // 方法1
    // canvas.moveTo(triangle, 3)

    // 方法2
    triangle.moveTo(3);
}

// moveTo 方法触发到达指定层级后，再次点击不去作用，bringToFront、sendToBack、bringForward、sendBackwards 每次点击的时候，只要还未到达边界的0层和最大层，触发均起作用
</script>