Saya telah mencoba membuat komponen fungsional reaksi untuk dapat menambahkan beberapa teks di dalam kanvas. Meskipun kanvas merender teks, Anda tidak dapat memindahkannya karena mereka adalah kanvas bersarang yang berbeda yang tidak diinginkan. Dengan kata lain, setiap kali Anda menekan add, kanvas baru dibuat yang tidak diinginkan. Saya tidak tahu apa yang menyebabkan kanvas bersarang ini. Bantuan apa pun sangat dihargai.

Berikut implementasinya

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

Komponen utama menyimpan daftar teks di negara bagian

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;

Dan ini adalah komponen kanvas

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;
0
mexam 6 Maret 2020, 17:29

1 menjawab

Jawaban Terbaik

Saya menemukan masalahnya. Karena new fabric.Canvas("canvas-element") adalah konstruktor, pada setiap render ia membuat elemen baru dan menambahkannya ke DOM. Untuk mencegah perilaku yang tidak diinginkan ini, Anda harus memeriksa apakah Kanvas sudah ada di pohon DOM atau menggunakan pendekatan alternatif seperti yang dijelaskan dalam posting ini: Bagaimana saya bisa menggunakan Fabric.js dengan React?

1
mexam 10 Maret 2020, 10:10