层级状态
在使用 Fabric.js 时有没有发现,如果一个画布存在多个元素,而且它们之前是层叠的,当你选中底层的元素时,那个元素会跳到最顶层;当你释放该元素后,它又跑回原有层级。这是 Fabric.js 的默认状态。
如果你不希望操作时出现这种情况,你希望在元素被选中时还保持它原有的层级,那么我推荐你在初始化画布时,设置 preserveObjectStacking 为 true 。
默认情况
默认情况是被选中的元素会跑到最顶层,当它被释放后又跑回原来的层级。
保持原有层级的情况
如果你不想按照默认的情况来操作,尤其是画布中对象比较多的时候,希望被操作的对象一直保持在原有的层级,这样操作起来某些情况下会更直观。那么你可以在初始化画布时将 preserveObjectStacking 设为 true
var canvas = new fabric.Canvas('imageCanvas', {
// 元素对象被选中时保持在当前z轴,不会跳到最顶层
preserveObjectStacking: true // 默认false
});
效果图