Fabric.js 控制元素层级

本文简介

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


元素是 Fabric.js 的重要组成部分,如果画布上没有元素,那其实没啥意义。

元素数量多了,难免会产生重叠。又或者某些效果需要几个元素重叠起来。这些情况大概率需要控制元素的层级。

本文将讲解 Fabric.js 中的5种控制元素层级的方法。



准备阶段

我在画布上创建3个元素,之后的所有演示都基于下面这段代码

file




可以看到画面中出现了 矩形、圆形 和 三角形 。由 canvas.add(rect, circle, triangle) 方法按顺序将它们添加到画布里。可以清晰看到三个图形的层级关系。

移至顶层

此时橙色的矩形位于最底层,如果需要将其移动到最顶层,可以使用 bringToFront() 方法。

file





如果你是通过 canvas 来操作的话,需要传入一个备操作的对象。本例传入的是矩形对象。

你也可以使用 rect.bringToFront() 让元素操作自身。



移至底层

使用 sendToBack 方法可以将元素移至最底层。

bringToFront 方法一样,sendToBack 方法同样可以通过 canvas 或者元素自身进行操作。

file







往上一层

让元素往上移动一层,可以使用 bringForward 方法。

比如我希望每次点击按钮,矩形都往上移动1层。

file







往下一层

同样,能往上移一层,也可以往下移一层。使用的方法是 sendBackwards

file







自定义层级

如果你需要直接设置图层层级,可以使用 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 控制元素层级)