如何在 React 中使用 Fabric.js 中的 EraserBrush 并修复“fabric.EraserBrush 不是构造函数”错误？

Question

在 Fabric.js 中使用 EraserBrush 和 React，出现“fabric.EraserBrush 不是构造函数”错误

我正在尝试在我的 React 应用程序中使用 Fabric.js 中的 EraserBrush。由于 Fabric.js 的默认版本中不包含 EraserBrush，因此我下载了一个自定义版本并将其包含在我的应用程序的 node_modules/fabric/dist 目录中。但是，我遇到以下错误：

fabric__WEBPACK_IMPORTED_MODULE_1__.fabric.EraserBrush is not a constructor TypeError: fabric__WEBPACK_IMPORTED_MODULE_1__.fabric.EraserBrush is not a constructor

这是我的代码的简化版本：

import React, {useEffect, useState, useRef} from 'react';
import { fabric } from 'fabric';

const Whiteboard = () => {

  const canvasRef = useRef(null)

  let canvas;
  useEffect(() => {
    canvas = new fabric.Canvas(canvasRef.current);
    canvas.setHeight(window.innerHeight);
    canvas.setWidth(window.innerWidth);
    canvas.isDrawingMode = true;
    canvas.freeDrawingBrush.width = 5;
    canvas.freeDrawingBrush.color = '#000000';

    return () => canvas.dispose();
  },[])

  const handleColorChange = (newColor) => {
    canvas.freeDrawingBrush.color = newColor;
    canvas.renderAll();
  }

  const handleErase = () => {
    canvas.freeDrawingBrush = new fabric.EraserBrush(canvasRef.current);
    canvas.isDrawingMode = true;
  }

  const handleClear = () => {
    canvas.clear();
    canvas.renderAll();
  }

  return(
    <div>
      <div>
        <button onClick={() => handleColorChange('#FF0000')}>Red</button>
        <button onClick={() => handleColorChange('#00FF00')}>Green</button>
        <button onClick={() => handleColorChange('#0000FF')}>Blue</button>
        <button onClick={handleErase}>Erase</button>
        <button onClick={handleClear}>Clear</button>
      </div>
      <canvas id='canvas' ref={canvasRef}/>
    </div>
  );
}


export default Whiteboard;

我已经按照 Fabric.js 文档中提到的步骤进行操作，但我仍然面临这个问题。如何解决此错误并在我的 React 应用程序中成功使用 EraserBrush？

Answer 1

我不知道这对你来说还有多大意义。您需要自定义构建fabric.js，因为官方版本不支持EraserBrush。前往官方网站。 http://fabricjs.com/build/ 选中“擦除”复选框并下载自定义版本。

Answer 2

今天我也想使用Fabric.js中的EraserBrush，但是我没有像你那样使用它。 我就是这样做的。

1. 首先，我通过运行

   npm install [email protected]

   安装了 Fabric.js 5.3.0 版本。如果不指定版本，它将安装6.0-beta10版本，该版本在一些脚本文件的位置上有一些变化。

2. 我将

   "postinstall": "node post_install.js"

   添加到我的

   package.json

   文件中。

3. 我在项目的根目录中创建了一个

   post_install.js

   文件。”

这里是

post_install.js

内容：

const fs = require("fs");
const path = require("path");
const { spawn } = require("child_process");
const fabricJSPath = path.join(__dirname, 'node_modules', 'fabric');

const npmBuild = spawn('node', ['run', 'build', 'modules=ALL', 'exclude=accessors,gestures', 'requirejs'], {
  cwd: fabricJSPath
});

npmBuild.stdout.on('data', (data) => {
  console.log(`stdout: ${data}`);
});

npmBuild.stderr.on('data', (data) => {
  console.error(`stderr: ${data}`);
});

npmBuild.on('close', (code) => {
  console.log(`child process exited with code ${code}`);
});

这样，每次安装完fabric后，都会自动处理。

希望这有帮助。