Fabric Js 橡皮擦功能

第一步

直接安装的fabric工具，默认配置中没有EraserBrush功能，需要安装带有橡皮擦功能的fabric。

俩种实现方式 1、fabricJs主页定制，勾选上下载带橡皮擦功能的fabric。

2、前人栽树后人乘凉，删除已有的fabric，npm安装带橡皮擦功能的fabric。

npm install fabric-with-erasing

第二步

vue项目在main.js文件引入使用，当然直接在使用fabric的文件中引入js也一样。

import fabric from "fabric-with-erasing"
Vue.use(fabric)

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

第三步

创建开启橡皮擦方法，直接使用EraserBrush属性，就完成了。

canvas.isDrawingMode = true // 进入绘画模式
canvas.freeDrawingBrush = new fabric.EraserBrush(canvas) // 使用橡皮擦画笔
canvas.freeDrawingBrush.width = size // 设置画笔粗细
// canvas.freeDrawingBrush.inverted = true // 恢复被擦拭的地方

遇到的问题

1. 橡皮擦颜色是无法设置的。
2. 橡皮擦的颜色是受画布背景影响的，如果不设置画布背景色，默认都是透明。
3. fabric.Pencilbrush铅笔，和橡皮擦一样需要开启画布的isDrawingMode自游绘画属性。
4. 不想擦除画布的背景（指定图片或某个颜色区域），参数options下设置erasable为false。