本文简介
点赞 + 关注 + 珍藏 = 学会了
不晓得你在应用 Fabric.js 时有没有发现，如果一个画布存在多个元素，而且它们之前是层叠的，当你选中底层的元素时，那个元素会跳到最顶层；当你开释该元素后，它又跑回原有层级。这是 Fabric.js 的默认状态。
如果你不心愿操作时呈现这种状况，你心愿在元素被选中时还放弃它原有的层级，那么我举荐你在初始化画布时，设置 preserveObjectStacking 为 true 。
《preserveObjectStacking 文档》
接下来我将举例说明该属性的成果和用法。
默认状况
默认状况是被选中的元素会跑到最顶层，当它被开释后又跑回原来的层级。
<canvas id="canvasBox" width="600" height="600" style="border: 1px solid #ccc;"></canvas><!-- 引入 Fabric.js --><script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/521/fabric.js"></script><script> const canvas = new fabric.Canvas('canvasBox') // 圆形 circle = new fabric.Circle({ name: 'circle', top: 60, left: 60, radius: 30, // 圆的半径 30 fill: 'yellowgreen' }) // 矩形 rect = new fabric.Rect({ name: 'rect', top: 30, // 间隔容器顶部 60px left: 100, // 间隔容器左侧 200px fill: 'orange', // 填充a 橙色 width: 60, // 宽度 60px height: 60 // 高度 60px }) // 将矩形增加到画布中 canvas.add(circle, rect)</script>下面的代码，我创立了一个绿色圆形和一个橙色矩形。
在 canvas.add(circle, rect) 中，先增加圆形，再增加矩形，所以矩形的层级会比圆形高。
我成心调整了两个图形的地位，让它们有一部分是重叠起来的。
所以最终进去的成果是圆形在矩形上面。
Fabric.js 默认状况下，被选中的元素会跳到顶层，所以你能够看看上图的操作成果。
放弃原有层级的状况
如果你不想依照默认的状况来操作，尤其是画布中对象比拟多的时候，心愿被操作的对象始终放弃在原有的层级，这样操作起来某些状况下会更直观。那么你能够在初始化画布时将 preserveObjectStacking 设为 true
// 省略局部代码const canvas = new fabric.Canvas('canvasBox', { // 元素对象被选中时放弃在以后z轴，不会跳到最顶层 preserveObjectStacking: true // 默认false})代码仓库
⭐元素被选中时放弃原有层级
举荐浏览
《Fabric.js 锁定背景图，不受缩放和拖拽的影响》
《Fabric.js 笔刷到底怎么用？》
《Fabric.js 自在绘制椭圆》
《Fabric.js 橡皮擦的用法（蕴含复原性能）》
《Fabric.js 从入门到旁若无人》
点赞 + 关注 + 珍藏 = 学会了