Fabricjs在添加新文本时在react组件中创建多个嵌套的画布

Question

我一直在尝试创建react功能组件，以便能够在画布中添加一些文本。即使画布渲染了文本，您也无法移动它们，因为它们是不同的不需要的嵌套画布。换句话说，每当您单击添加时，就会创建不需要的新画布。我不知道是什么原因导致了这些嵌套画布。非常感谢您的帮助。

这里是实现

https://codesandbox.io/s/thirsty-mountain-kwyw1

主要组件保存状态中的文本列表

import React, { useState } from "react";
import "./styles.css";
import MyCanvas from "./MyCanvas";

const App = () => {
  const fabric = window.fabric;
  const [controls, setControl] = useState([]);

  const add = () => {
    var text = new fabric.IText(
      "Sample Text " +
        new Date()
          .getTime()
          .toString()
          .substr(5),
      {
        fontFamily: "arial black",
        left: 100,
        top: 100,
        myid: new Date()
          .getTime()
          .toString()
          .substr(5),
        objecttype: "text"
      }
    );
    setControl([...controls, text]);
  };

  return (
    <div className="App">
      <button onClick={add}>Add</button>
      <MyCanvas controls={controls} />
    </div>
  );
};

export default App;

这是画布组件

import React, { useEffect } from "react";
import { fabric } from "fabric";

const MyCanvas = ({ controls }) => {
  const canvas = new fabric.Canvas("canvas-element");

  useEffect(() => {
    if (!controls) return;

    // const canvas = new fabric.Canvas(ref.current.id);

    controls.map(item => {
      canvas.add(item).setActiveObject(item);
    });
  });

  return <canvas id="canvas-element" width={600} height={400} />;
};

export default MyCanvas;

Answer 1

我发现了问题。由于new fabric.Canvas("canvas-element")是构造函数，因此在每个渲染上它都会创建一个新元素并将其附加到DOM。为了防止这种不良行为，您应该检查Canvas是否已在DOM树中，或者使用替代方法，如本文中所述：How can I use Fabric.js with React?