Fabric.js|Fabric.js 橡皮擦的用法（包含恢复功能） Fabric.js橡皮擦的用法（包含恢

本文简介点赞 + 关注 + 收藏 = 学会了

本文介绍 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 的做法，在
【Fabric.js|Fabric.js 橡皮擦的用法（包含恢复功能）】

要使用橡皮擦，首先需要将 isDrawingMode 设为 true 。
new fabric.EraserBrush 里需要传入画布本身，在初始化画布时的那个对象 const canvas = this.__canvas = new fabric.Canvas('c') 。
将 canvas.freeDrawingBrush.inverted 设为 true 就能恢复被擦拭的地方。

代码仓库

?Fabric.js 橡皮擦的用法

推荐阅读

文章	简介
《Fabric.js 基础画笔的用法 BaseBrush》	在阅读本文前我强烈建议你先了解一下基础画笔的用法，因为橡皮擦其实也是个画笔
《Fabric.js 自由绘制圆形》	将“框选”动作改造成自由绘制圆形
《Fabric.js 3个api设置画布宽高》	宽高设置并不是在初始化是才能进行的，本文介绍3种方法设置画布宽高，让你的画布更容易适配不同的使用场景
《Fabric.js 更换图片的3种方法（包括更换分组内的图片，以及存在缓存的情况）》	如果你的项目需要动态更换画布上的图片，那我也给你总结了3中方法
《Fabric.js 摆正元素的4种方法（带过渡动画）》	一键摆正被你旋转过的元素
《Fabric.js 将本地图像上传到画布背景》	除了在初始化时设置画布背景外，我还做了本地上传背景的功能，让画布在运行时也能修改背景图
《在 Vue3中使用Fabric.js实现渐变(Gradient)效果，包括径向渐变radial》	官方入门教程也只有线性渐变，以至于某些文章说 `Fabric.js` 只支持线性渐变。但其实径向渐变也完全支持
《Fabric.js 从入门到目中无人》	`Fabric.js` 入门指南，学完能应付简单业务
《Fabric.js 右键菜单》	`Fabric.js` 暂时还没右键事件，如果你想实现右键菜单的功能，可直接复制该文章的代码~