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

Question

我一直在尝试创建 React 功能组件，以便能够在 canvas 中添加一些文本。即使 canvas 呈现文本，您也不能移动它们，因为它们是不同的不需要的嵌套 canvases。换句话说，任何时候你点击添加都会创建一个不需要的新 canvas 。我不知道是什么导致了这个嵌套的 canvases。非常感谢任何帮助。

这里是实现

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;

这是 canvas 组件

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 树中，或者使用替代方法，例如 post 中描述的方法： How can I use Fabric.js with React?

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

Fabricjs creates multiple nested canvases in a react component when adding new Text

canvas

fabricjs

reactjs