共计 2307 个字符,预计需要花费 6 分钟才能阅读完成。
本文简介
点赞 + 关注 + 珍藏 = 学会了
元素是 Fabric.js
的重要组成部分,如果画布上没有元素,那其实没啥意义。
元素数量多了,难免会产生重叠。又或者某些成果须要几个元素重叠起来。这些状况大概率须要管制元素的层级。
本文将解说 Fabric.js
中的 5 种管制元素层级的办法。
筹备阶段
我在画布上创立 3 个元素,之后的所有演示都基于上面这段代码
<canvas id="c" width="300" height="300" style="border: 1px solid #ccc"></canvas>
<script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/521/fabric.js"></script>
<script>
const canvas = new fabric.Canvas('c')
// 橙色矩形
rect = new fabric.Rect({
top: 30,
left: 30,
fill: 'orange',
width: 200,
height: 100
})
// 粉红色圆形
circle = new fabric.Circle({
top: 50,
left: 60,
fill: 'hotpink',
radius: 50
})
// 蓝色三角形
triangle = new fabric.Triangle({
top: 80,
left: 30,
width: 80,
height: 100,
fill: 'blue'
})
canvas.add(rect, circle, triangle)
</script>
能够看到画面中呈现了 矩形、圆形 和 三角形 。由 canvas.add(rect, circle, triangle)
办法按程序将它们增加到画布里。能够清晰看到三个图形的层级关系。
移至顶层
此时橙色的矩形位于最底层,如果须要将其挪动到最顶层,能够应用 bringToFront()
办法。
<button onclick="bringToFront()"> 移至顶层 </button>
<canvas id="c" width="300" height="300" style="border: 1px solid #ccc"></canvas>
<!-- 省略引入 fabric.js 代码 -->
<script>
// 省略局部代码
function bringToFront() {canvas.bringToFront(rect)
// 或者
// rect.bringToFront()}
</script>
如果你是通过 canvas
来操作的话,须要传入一个备操作的对象。本例传入的是矩形对象。
你也能够应用 rect.bringToFront()
让元素操作本身。
移至底层
应用 sendToBack
办法能够将元素移至最底层。
和 bringToFront
办法一样,sendToBack
办法同样能够通过 canvas
或者元素本身进行操作。
<button onclick="sendToBack()"> 三角形移至底层 </button>
<canvas id="c" width="300" height="300" style="border: 1px solid #ccc"></canvas>
<!-- 省略引入 fabric.js 代码 -->
<script>
// 省略局部代码
function sendToBack() {canvas.sendToBack(triangle)
// 或者
// triangle.sendToBack()}
</script>
往上一层
让元素往上挪动一层,能够应用 bringForward
办法。
比方我心愿每次点击按钮,矩形都往上挪动 1 层。
<button onclick="bringForward()"> 矩形往上移一层 </button>
<canvas id="c" width="300" height="300" style="border: 1px solid #ccc"></canvas>
<!-- 省略引入 fabric.js 代码 -->
<script>
// 省略局部代码
function sendToBack() {canvas.bringForward(rect)
// 或者
// rect.bringForward()}
</script>
往下一层
同样,能往上移一层,也能够往下移一层。应用的办法是 sendBackwards
。
<button onclick="sendBackwards()"> 三角形往下移一层 </button>
<canvas id="c" width="300" height="300" style="border: 1px solid #ccc"></canvas>
<!-- 省略引入 fabric.js 代码 -->
<script>
// 省略局部代码
function sendToBack() {canvas.sendBackwards(triangle)
// 或者
// triangle.sendBackwards()}
</script>
自定义层级
如果你须要间接设置图层层级,能够应用 moveTo
办法。
如果在 canvas
中应用 moveTo
办法,须要传入 2 个参数,第一个参数是要操作的对象,第二个参数是层级。
也能够间接在元素上应用 moveTo
办法,这样就只需传入 1 个层级参数就行。
canvas.moveTo(triangle, 10)
// 或者
triangle.moveTo(10)
triangle
是“筹备阶段”里创立的三角形。
代码仓库
⭐ 设置元素层级
📺在线预览
举荐浏览
👍《Fabric.js 上划线、中划线(删除线)、下划线》
👍《Fabric.js 激活输入框》
👍《Fabric.js 输入精简的 JSON》
👍《Fabric.js 动静设置字号大小》
点赞 + 关注 + 珍藏 = 学会了