Fabric.js|Fabric.js 元素被选中时保持原有层级
本文简介
点赞 + 关注 + 收藏 = 学会了
不知道你在使用 Fabric.js
时有没有发现,如果一个画布存在多个元素,而且它们之前是层叠的,当你选中底层的元素时,那个元素会跳到最顶层;当你释放该元素后,它又跑回原有层级。这是 Fabric.js
的默认状态。
如果你不希望操作时出现这种情况,你希望在元素被选中时还保持它原有的层级,那么我推荐你在初始化画布时,设置 preserveObjectStacking
为 true
。
《preserveObjectStacking 文档》
接下来我将举例说明该属性的效果和用法。
默认情况
默认情况是被选中的元素会跑到最顶层,当它被释放后又跑回原来的层级。
文章图片
上面的代码,我创建了一个绿色圆形和一个橙色矩形。
在
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 从入门到目中无人》
【Fabric.js|Fabric.js 元素被选中时保持原有层级】点赞 + 关注 + 收藏 = 学会了
推荐阅读
- Fabric.js|Fabric.js 橡皮擦的用法(包含恢复功能)
- Fabric.js|Fabric.js 手动加粗文本iText
- Fabric.js|Fabric.js 上划线、中划线(删除线)、下划线
- Fabric.js|Fabric.js 控制元素层级
- Fabric.js|Fabric.js IText 手动设置斜体
- Fabric.js|Fabric.js 动态设置字号大小
- 元素的显示与隐藏
- 如何让定位的盒子居中
- Fabric.js|Fabric.js 将本地图像上传到画布背景
- Fabric.js|Fabric.js 自由绘制矩形