使用fabric.js / React.js生成的对象在画布中不具有交互性

Question

我正在尝试学习 React.js，所以我决定使用 Fabric.js 构建一个应用程序，希望 YouTube 上缺乏的教程会迫使我自己解决问题。下面的代码创建一个带有按钮的画布，该按钮运行一个函数以在画布内添加对象（矩形），该对象已成功添加，但矩形不可交互/不可移动。在之前的尝试中，我对画布内的矩形进行了硬编码（不是使用 onClick 执行的函数），该矩形可以工作并且是交互式的，因此它不是库或包的问题。

这是代码：

import './App.css';
import React, { useState, useEffect } from "react";
import { fabric } from 'fabric';

function App() {
  const [canvas, setCanvas] = useState(null);

  const initCanvas = () => (
    new fabric.Canvas("canvas", {
      width: 400,
      height: 400,
      backgroundColor: "#45F19C"
    })
  )

  const addRect = () => {
    if (canvas) {
      const rect = new fabric.Rect({
        left: 100,
        top: 50,
        width: 100,
        height: 100,
        fill: "red",
        selectable: true,
        hasControls: true,
      });
      canvas.add(rect);
      canvas.renderAll();
    }
  }

  useEffect(() => {
    const newCanvas = initCanvas();
    setCanvas(newCanvas);

    newCanvas.lowerCanvasEl.style.userSelect = "none";
    
    newCanvas.on("object:moving", (options) => {
      const obj = options.target;

      if (obj.left < 0) {
        obj.left = 0;
      }
      if (obj.top < 0) {
        obj.top = 0;
      }
      if (obj.left + obj.width * obj.scaleX > newCanvas.width) {
        obj.left = newCanvas.width - obj.width * obj.scaleX;
      }
      if (obj.top + obj.height * obj.scaleY > newCanvas.height) {
        obj.top = newCanvas.height - obj.height * obj.scaleY;
      }
    });
  }, []);

  return (
    <div className="App">
      <button onClick={addRect}>Add</button>
      <canvas id="canvas"></canvas>
    </div>
  );
}

export default App;

注意：硬编码时 const rect = new Fabric.Rect() 被移动到 useEffect 中。

我是编程初学者，所以如果答案很简单，我深表歉意。 谢谢。

Answer 1

显然，index.js 文件中的

<StrictMode>

标签在删除后会干扰库，效果很好。