为了账号安全,请及时绑定邮箱和手机立即绑定

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

本文简介

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


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

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


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



默认情况

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

file

<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

file

// 省略部分代码

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


代码仓库



点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消