Fabric.js|Fabric.js 控制元素层级

本文简介 点赞 + 关注 + 收藏 = 学会了


元素是 Fabric.js 的重要组成部分,如果画布上没有元素,那其实没啥意义。
元素数量多了,难免会产生重叠。又或者某些效果需要几个元素重叠起来。这些情况大概率需要控制元素的层级。
本文将讲解 Fabric.js 中的5种控制元素层级的方法。




准备阶段 我在画布上创建3个元素,之后的所有演示都基于下面这段代码
Fabric.js|Fabric.js 控制元素层级
文章图片


可以看到画面中出现了 矩形、圆形 和 三角形 。由 canvas.add(rect, circle, triangle) 方法按顺序将它们添加到画布里。可以清晰看到三个图形的层级关系。
移至顶层 此时橙色的矩形位于最底层,如果需要将其移动到最顶层,可以使用 bringToFront() 方法。
Fabric.js|Fabric.js 控制元素层级
文章图片


如果你是通过 canvas 来操作的话,需要传入一个备操作的对象。本例传入的是矩形对象。
你也可以使用 rect.bringToFront() 让元素操作自身。




移至底层 使用 sendToBack 方法可以将元素移至最底层。
bringToFront 方法一样,sendToBack 方法同样可以通过 canvas 或者元素自身进行操作。
Fabric.js|Fabric.js 控制元素层级
文章图片






往上一层 让元素往上移动一层,可以使用 bringForward 方法。
比如我希望每次点击按钮,矩形都往上移动1层。
Fabric.js|Fabric.js 控制元素层级
文章图片






往下一层 同样,能往上移一层,也可以往下移一层。使用的方法是 sendBackwards
Fabric.js|Fabric.js 控制元素层级
文章图片






自定义层级 如果你需要直接设置图层层级,可以使用 moveTo 方法。
如果在 canvas 中使用 moveTo 方法,需要传入2个参数,第一个参数是要操作的对象,第二个参数是层级。
也可以直接在元素上使用 moveTo 方法,这样就只需传入1个层级参数就行。
canvas.moveTo(triangle, 10)// 或者 triangle.moveTo(10)

triangle 是“准备阶段”里创建的三角形。




代码仓库 ? 设置元素层级
在线预览




推荐阅读 《Fabric.js 上划线、中划线(删除线)、下划线》
《Fabric.js 激活输入框》
《Fabric.js 输出精简的JSON》
《Fabric.js 动态设置字号大小》
【Fabric.js|Fabric.js 控制元素层级】点赞 + 关注 + 收藏 = 学会了

    推荐阅读