Fabric.js|Fabric.js 控制元素层级
本文简介
点赞 + 关注 + 收藏 = 学会了
元素是 Fabric.js
的重要组成部分,如果画布上没有元素,那其实没啥意义。
元素数量多了,难免会产生重叠。又或者某些效果需要几个元素重叠起来。这些情况大概率需要控制元素的层级。
本文将讲解 Fabric.js
中的5种控制元素层级的方法。
准备阶段
我在画布上创建3个元素,之后的所有演示都基于下面这段代码
文章图片
可以看到画面中出现了 矩形、圆形 和 三角形 。由
canvas.add(rect, circle, triangle)
方法按顺序将它们添加到画布里。可以清晰看到三个图形的层级关系。移至顶层 此时橙色的矩形位于最底层,如果需要将其移动到最顶层,可以使用
bringToFront()
方法。文章图片
如果你是通过
canvas
来操作的话,需要传入一个备操作的对象。本例传入的是矩形对象。你也可以使用
rect.bringToFront()
让元素操作自身。移至底层 使用
sendToBack
方法可以将元素移至最底层。和
bringToFront
方法一样,sendToBack
方法同样可以通过 canvas
或者元素自身进行操作。文章图片
往上一层 让元素往上移动一层,可以使用
bringForward
方法。比如我希望每次点击按钮,矩形都往上移动1层。
文章图片
往下一层 同样,能往上移一层,也可以往下移一层。使用的方法是
sendBackwards
。文章图片
自定义层级 如果你需要直接设置图层层级,可以使用
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 控制元素层级】点赞 + 关注 + 收藏 = 学会了
推荐阅读
- Fabric.js|Fabric.js 上划线、中划线(删除线)、下划线
- Fabric.js|Fabric.js IText 手动设置斜体
- Fabric.js|Fabric.js 动态设置字号大小
- Java|权限系统控制到按钮级别开源推荐 Spring Boot-Shiro-Vue
- 帆软|帆软权限细粒度控制
- Spring框架系列(3)|Spring框架系列(3) - 深入浅出Spring核心之控制反转(IOC)
- 元素的显示与隐藏
- 如何让定位的盒子居中
- Fabric.js|Fabric.js 将本地图像上传到画布背景
- Fabric.js|Fabric.js 自由绘制矩形