本文简介
点赞 + 关注 + 珍藏 = 学会了
元素是 Fabric.js 的重要组成部分，如果画布上没有元素，那其实没啥意义。
元素数量多了，难免会产生重叠。又或者某些成果须要几个元素重叠起来。这些状况大概率须要管制元素的层级。
本文将解说 Fabric.js 中的5种管制元素层级的办法。
筹备阶段
我在画布上创立3个元素，之后的所有演示都基于上面这段代码
<canvas id="c" width="300" height="300" style="border: 1px solid #ccc"></canvas><script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/521/fabric.js"></script><script> const canvas = new fabric.Canvas('c') // 橙色矩形 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)</script>能够看到画面中呈现了 矩形、圆形 和 三角形 。由 canvas.add(rect, circle, triangle) 办法按程序将它们增加到画布里。能够清晰看到三个图形的层级关系。
移至顶层
此时橙色的矩形位于最底层，如果须要将其挪动到最顶层，能够应用 bringToFront() 办法。
<button onclick="bringToFront()">移至顶层</button><canvas id="c" width="300" height="300" style="border: 1px solid #ccc"></canvas><!-- 省略引入 fabric.js 代码 --><script> // 省略局部代码 function bringToFront() { canvas.bringToFront(rect) // 或者 // rect.bringToFront() }</script>如果你是通过 canvas 来操作的话，须要传入一个备操作的对象。本例传入的是矩形对象。
你也能够应用 rect.bringToFront() 让元素操作本身。
移至底层
应用 sendToBack 办法能够将元素移至最底层。
和 bringToFront 办法一样，sendToBack 办法同样能够通过 canvas 或者元素本身进行操作。
<button onclick="sendToBack()">三角形移至底层</button><canvas id="c" width="300" height="300" style="border: 1px solid #ccc"></canvas><!-- 省略引入 fabric.js 代码 --><script> // 省略局部代码 function sendToBack() { canvas.sendToBack(triangle) // 或者 // triangle.sendToBack() }</script>往上一层
让元素往上挪动一层，能够应用 bringForward 办法。
比方我心愿每次点击按钮，矩形都往上挪动1层。
<button onclick="bringForward()">矩形往上移一层</button><canvas id="c" width="300" height="300" style="border: 1px solid #ccc"></canvas><!-- 省略引入 fabric.js 代码 --><script> // 省略局部代码 function sendToBack() { canvas.bringForward(rect) // 或者 // rect.bringForward() }</script>往下一层
同样，能往上移一层，也能够往下移一层。应用的办法是 sendBackwards 。
<button onclick="sendBackwards()">三角形往下移一层</button><canvas id="c" width="300" height="300" style="border: 1px solid #ccc"></canvas><!-- 省略引入 fabric.js 代码 --><script> // 省略局部代码 function sendToBack() { canvas.sendBackwards(triangle) // 或者 // triangle.sendBackwards() }</script>自定义层级
如果你须要间接设置图层层级，能够应用 moveTo 办法。
如果在 canvas 中应用 moveTo 办法，须要传入2个参数，第一个参数是要操作的对象，第二个参数是层级。
也能够间接在元素上应用 moveTo 办法，这样就只需传入1个层级参数就行。
canvas.moveTo(triangle, 10)// 或者triangle.moveTo(10)triangle 是“筹备阶段”里创立的三角形。
代码仓库
⭐ 设置元素层级
在线预览
举荐浏览
《Fabric.js 上划线、中划线（删除线）、下划线》
《Fabric.js 激活输入框》
《Fabric.js 输入精简的JSON》
《Fabric.js 动静设置字号大小》
点赞 + 关注 + 珍藏 = 学会了