Fabric.js 元素被选中时保持原有层级

本文简介

点赞 + 关注 + 收藏 = 学会了

<br>

不知道你在使用 Fabric.js 时有没有发现，如果一个画布存在多个元素，而且它们之前是层叠的，当你选中底层的元素时，那个元素会跳到最顶层；当你释放该元素后，它又跑回原有层级。这是 Fabric.js 的默认状态。

如果你不希望操作时出现这种情况，你希望在元素被选中时还保持它原有的层级，那么我推荐你在初始化画布时，设置 preserveObjectStacking 为 true 。

《preserveObjectStacking 文档》

<br>

接下来我将举例说明该属性的效果和用法。

<br>

<br>

默认情况

默认情况是被选中的元素会跑到最顶层，当它被释放后又跑回原来的层级。

<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) 中，先添加圆形，再添加矩形，所以矩形的层级会比圆形高。

我故意调整了两个图形的位置，让它们有一部分是重叠起来的。

所以最终出来的效果是圆形在矩形下面。

<br>

Fabric.js 默认情况下，被选中的元素会跳到顶层，所以你可以看看上图的操作效果。

<br>

<br>

保持原有层级的情况

如果你不想按照默认的情况来操作，尤其是画布中对象比较多的时候，希望被操作的对象一直保持在原有的层级，这样操作起来某些情况下会更直观。那么你可以在初始化画布时将 preserveObjectStacking 设为 true

// 省略部分代码const canvas = new fabric.Canvas('canvasBox', {  // 元素对象被选中时保持在当前z轴，不会跳到最顶层  preserveObjectStacking: true // 默认false})

<br>

<br>

代码仓库

元素被选中时保持原有层级

<br>

<br>

推荐阅读

《Fabric.js 锁定背景图，不受缩放和拖拽的影响》

《Fabric.js 笔刷到底怎么用？》

《Fabric.js 自由绘制椭圆》

《Fabric.js 橡皮擦的用法（包含恢复功能）》

《Fabric.js 从入门到目中无人》

点赞 + 关注 + 收藏 = 学会了