关于前端:Fabricjs-橡皮擦的用法包含恢复功能

本文简介

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

本文介绍 Fabric.js 的橡皮擦性能。

Fabric.js 的根底包并没有蕴含橡皮擦模块，如果你的我的项目须要应用橡皮擦，要应用定制版的 Fabric.js。

本文须要有 Fabric.js 基础知识。

如果你还不分明什么是 Fabric.js，我墙裂倡议你点赞《Fabric.js 从入门到旁若无人》。

同时最好理解根底画笔的用法《Fabric.js 根底画笔的用法 BaseBrush》。

本文应用的是 Fabric 5.2 版本。

敲敲代码

本文应用 原生三件套 的形式进行开发。同时也会提供蕴含橡皮擦的 npm 下载方式。

定制 Fabric.js

根底版的 Fabric.js 不蕴含橡皮擦性能，如果你的我的项目须要应用橡皮擦性能，须要到 FabricJS builder 里进行定制。

CDN

选中 Erasing，而后滑动到页面底部，依据你我的项目所需下载开发版或者压缩版

以上是 CDN 的做法，在 <script> 标签里，应用 src 援用即可。

npm

npm 上也有人打包了一份带橡皮擦性能的 Fabric.js 包。

fabric-with-erasing

能够应用命令下载到你我的项目中

npm i fabric-with-erasing

须要留神的是，fabric-with-erasing 是在根底版的 fabric 中增加了橡皮擦性能，应用 fabric-with-erasing 时无需再下载 Fabric。

在写本文时，fabric-with-erasing 中所应用的 Fabric 版本是 5.2。

console.log(fabric.version)

编码

本例要实现的性能：

1. 可更改画布模式（框选、擦拭）
2. 宝蓝色的正方形不可擦拭
3. 被擦拭的中央能够复原

<!-- 批改画布模式的按钮 -->
<div style="margin-bottom: 10px;">
  <button id="select" type="button" onclick="changeAction('select')">select</button>
  <button id="erase" type="button" onclick="changeAction('erase')">erase</button>
  <button id="erase" type="button" onclick="changeAction('undoErasing')">undo erasing</button>
</div>

<!-- 画布 -->
<canvas id="c" width="400" height="400" style="border: 1px solid #ccc;"></canvas>

<!-- 引入定制好的 fabric -->
<script src="./fabric.js"></script>

<script>
  // 初始化画布
  const canvas = this.__canvas = new fabric.Canvas('c')

  // 在画布中增加图形（本例增加 2 个正方形）canvas.add(
    // 第一个正方形（宝蓝色）new fabric.Rect({
      top: 50,
      left: 50,
      width: 50,
      height: 50,
      fill: "#4b5cc4",
      opacity: 0.8,
      erasable: false // 不容许擦拭
    }),
    // 第二个正方形（桃红色）new fabric.Rect({
      top: 50,
      left: 150,
      width: 50,
      height: 50,
      fill: "#f47983",
      opacity: 0.8
    })
  )

  // 批改画板行为模式
  function changeAction(mode) {switch (mode) {
      case "select":
        canvas.isDrawingMode = false // 不容许绘画（返回一般框选模式）break
      case "erase":
        canvas.isDrawingMode = true // 进入绘画模式
        canvas.freeDrawingBrush = new fabric.EraserBrush(canvas) // 应用橡皮擦画笔
        canvas.freeDrawingBrush.width = 10 // 设置画笔粗细为 10
        break
      case 'undoErasing':
          canvas.isDrawingMode = true
         canvas.freeDrawingBrush = new fabric.EraserBrush(canvas)
          canvas.freeDrawingBrush.width = 10
          canvas.freeDrawingBrush.inverted = true // 复原被擦拭的中央
      default:
        break
    }
  }
</script>

• 要应用橡皮擦，首先须要将 isDrawingMode 设为 true。
• new fabric.EraserBrush 里须要传入画布自身，在初始化画布时的那个对象 const canvas = this.__canvas = new fabric.Canvas('c')。
• 将 canvas.freeDrawingBrush.inverted 设为 true 就能复原被擦拭的中央。

代码仓库

• ⭐Fabric.js 橡皮擦的用法

举荐浏览

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