关于前端:Fabricjs-清空画布

本文简介

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

咱们能够在 Canvas 上绘制图形，同样也能够将画布上的所有内容都清空掉。

本文次要聊聊：

• 在 fabric.js 中如何清空画布；
• 和原生 canvas 比照，fabric.js 到底有多不便；
• 销毁 fabrci.js 创立的画布；
• 把 canvas 元素也销毁掉；

原生 Canvas 清空画布

某些我的项目中（比方绘图工具）清空画布是一个根底性能。

在原生 Canvas 中要清空画布，须要应用获取画布的宽高。

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc;"></canvas>

<script>
  const cnv = document.getElementById('c')
  const ctx = cnv.getContext('2d')

  ctx.fillStyle = 'pink' // 设置填充色彩
  ctx.fillRect(50, 50, 200, 200) // 填充矩形

  ctx.clearRect(0, 0, cnv.width, cnv.height) // 清空矩形
</script>

下面的代码能够把清空画布，但如果没有理解过 canvas，或者不相熟的工友，看到下面的代码可能会有点懵。

但没关系，本文不是讲原生 canvas 的，如果想入门 canvas 能够移步到《Canvas 从入门到劝敌人放弃（图解版）》

fabric.js 清空画布：clear

fabric.js 提供了 clear 办法，能够间接清空画布。

为了演示这个办法，我在画布上创立了一个三角形。

<button onclick="handleClear()"> 清空画布 </button>
  <canvas id="canvasBox" width="400" height="400" style="border: 1px solid #ccc;"></canvas>

  <script>
    // 初始化画布
    let canvas = new fabric.Canvas('canvasBox')
  
    // 三角形
    const triangle = new fabric.Triangle({
      top: 100,
      left: 50,
      width: 80, // 底边宽度
      height: 100, // 底边到定点的间隔
      fill: 'blue',
    })
  
    // 将三角形增加到画布中
    canvas.add(triangle)

    // 清空画布
    function handleClear() {canvas.clear()
    }
  </script>

fabric.js 的代码就十分语义化了。就算你没理解过 fabric.js 也应该能猜出个大略。

下面的例子中，当点击按钮时就调用 canvas.clear() 间接清空了画布。在这个过程中你基本不须要理解画布的宽高。

应用 clear 办法只会清空画布上的内容，并不会销毁画布。

能够看到清空画布后，fabric.js 的默认操作还是在的（能够框选），这证实画布只是被清空了，并没有被销毁。

销毁 fabric 实例：dispose

除了应用 clear 办法清空画布外，fabric.js 还提供了另一个更强的办法：dispose

dispose 办法能够把 fabric.js 创立进去的实例销毁掉。

通常在页面销毁前会用到 dispose 办法。

尤其是在单页面利用中，来到页背后要调用该办法，不然从新进入这个页面，有可能会从新实例化画布。

如果来到页背后没销毁画布，在某些非凡状况下可能会出现意外成果。

<button onclick="handleDispose()">dispose</button>
<canvas id="canvasBox" width="400" height="400" style="border: 1px solid #ccc;"></canvas>

<script>
  // 初始化画布
  let canvas = new fabric.Canvas('canvasBox')

  // 三角形
  const triangle = new fabric.Triangle({
    top: 100,
    left: 50,
    width: 80, // 底边宽度
    height: 100, // 底边到定点的间隔
    fill: 'blue',
  })

  // 将三角形增加到画布中
  canvas.add(triangle)

  // 清空画布
  function handleDispose() {canvas.dispose() // 革除一个画布元素并删除所有事件侦听器
  }
</script>

从下面的例子中能够看到，在销毁画布的时候，canvas 元素也取得了自在（没被 fabric.js 劫持了）。

能够比照一下

上图是 dispose 前。

上图是应用 dispose 销毁画布之后。

将 Canvas 元素也干掉：借助 getElement

如果想在销毁画布后，将 canvas 元素也移除掉，能够借助 getElement 获取以后画布元素，而后应用 dispose 销毁 fabric 创立进去的实例，再用 remove 办法把画布干掉就行。

<button onclick="getElement()"> 删除画布 </button>
<canvas id="canvasBox" width="400" height="400" style="border: 1px solid #ccc;"></canvas>

<script>
  // 初始化画布
  let canvas = new fabric.Canvas('canvasBox')

  // 三角形
  const triangle = new fabric.Triangle({
    top: 100,
    left: 50,
    width: 80, // 底边宽度
    height: 100, // 底边到定点的间隔
    fill: 'blue',
  })

  // 将三角形增加到画布中
  canvas.add(triangle)

  // 返回与此实例对应的画布元素
  function getElement() {let el = canvas.getElement()

    // getElement 能够配合 dispose 一起应用
    canvas.dispose() // 销毁画布实例
    el.remove() // 删除 canvas 元素}
</script>

删除完，页面上也不会呈现方才的 canvas 元素了

代码仓库

⭐Fabric.js 清空画布

⭐Fabric.js 销毁画布实例

⭐Fabric.js 彻底清除画布

举荐浏览

👍《Fabric.js 从入门到_ _ _ _》

👍《Fabric.js 管制元素层级》

👍《Fabric.js 上划线、中划线（删除线）、下划线》

👍《Fabric.js 激活输入框》

👍《Fabric.js 输入精简的 JSON》

👍《Fabric.js 橡皮擦的用法（蕴含复原性能）》

点赞 + 关注 + 珍藏 = 学会了
代码仓库