关于前端:Fabricjs-控制元素层级

48次阅读

共计 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 动静设置字号大小》

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

正文完
 0