在React中使用Fabric.js的EraserBrush及解决构造函数错误

一、确保自定义构建的Fabric.js正确加载 #

直接替换node_modules/fabric/dist下的文件大概率不生效——webpack会优先读取package.json指定的模块入口，且node_modules文件会被缓存或在npm install时覆盖。建议改用以下方式：

• 将自定义构建好的Fabric.js文件（如fabric.js或fabric.min.js）放到项目public目录
• 在public/index.html中通过script标签引入：

<script src="%PUBLIC_URL%/fabric.js"></script>

• 移除React组件中的import { fabric } from 'fabric';，直接使用全局的fabric对象

二、修正EraserBrush的初始化代码 #

你的handleErase函数传错了参数：EraserBrush需要接收Fabric的Canvas实例，而非DOM元素。修改后代码如下：

const handleErase = () => {
  // 传入canvas实例而非DOM元素
  canvas.freeDrawingBrush = new fabric.EraserBrush(canvas);
  // 可按需设置橡皮擦宽度
  canvas.freeDrawingBrush.width = 10;
  canvas.isDrawingMode = true;
}

三、额外优化建议 #

• 切换回画笔模式时，需重新初始化画笔配置，可新增函数：

const handleDraw = () => {
  canvas.freeDrawingBrush = new fabric.PencilBrush(canvas);
  canvas.freeDrawingBrush.width = 5;
  canvas.freeDrawingBrush.color = '#000000';
  canvas.isDrawingMode = true;
}

可给颜色按钮添加切换回画笔的逻辑，或新增独立的画笔切换按钮。

• 若坚持使用ES模块导入，可将自定义构建的Fabric.js打包为本地npm包，通过npm install ./path/to/custom-fabric-package安装，确保webpack能正确解析模块。

内容的提问来源于stack exchange，提问作者Roshith Krishna P