React + fabric.js

Question

我试图把反应和捏造结合起来，但我被困住了。

这是我的密码

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

function App() {

  const [canvas, setCanvas] = useState('');

  useEffect(() => {
    setCanvas(initCanvas());
    
  }, []);

  const initCanvas = () => (
    new fabric.Canvas('canvas', {
      height: 800,
      width: 800,
      backgroundColor: 'pink' ,
      selection: false,
      renderOnAddRemove: true,
     
    })

  )

    canvas.on("mouse:over", ()=>{
      console.log('hello')
    })


  return (

    <div >
      <canvas id="canvas" />
    </div>

  );
}

export default App;

问题是canvas.on，因为它会导致错误“Uncaught: canvas.on不是一个函数”，请告诉我这里我做错了什么

Answer 1

在初始呈现过程中，canvas变量被设置为初始状态，即useState('')中的''。直到这之后，您的useEffect才会运行，更新状态值。

建议:将事件处理程序移动到useEffect中，并为画布值使用一个ref而不是状态。ref的属性是直接可变的，并且不需要为它们的新值提供一个重命名器。

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

function App() {

  const canvas = useRef(null);

  useEffect(() => {
    canvas.current = initCanvas();

    canvas.current.on("mouse:over", () => {
      console.log('hello')
    });
    
    // destroy fabric on unmount
    return () => {
      canvas.current.dispose();
      canvas.current = null;
    };
  }, []);

  const initCanvas = () => (
    new fabric.Canvas('canvas', {
      height: 800,
      width: 800,
      backgroundColor: 'pink' ,
      selection: false,
      renderOnAddRemove: true,
    })
  );

  return (

    <div >
      <canvas ref={canvas} />
    </div>

  );
}

export default App;

值得注意的是，如果不需要在组件的其他地方引用画布，则不需要使用state或ref，并且可以在useEffect中使用局部变量。

useEffect(() => {
  const canvas = initCanvas();
  canvas.on("mouse:over", () => {
    console.log('hello')
  });

  // destroy fabric on unmount
  return () => {
    canvas.dispose();
  };
})

Answer 2

实际上，问题是当canvas.on是canvas (初始状态)中的空字符串时，您试图调用它。

因为我们只需要创建一次fabric.Canvas，所以我建议用React.useRef存储实例

我在这里为你们创造了一个例子：

-> https://codesandbox.io/s/late-cloud-ed5r6q?file=/src/FabricExample.js

还将在这里显示示例组件的来源：

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

const FabricExample = () => {
  const fabricRef = React.useRef(null);
  const canvasRef = React.useRef(null);

  React.useEffect(() => {
    const initFabric = () => {
      fabricRef.current = new fabric.Canvas(canvasRef.current);
    };

    const addRectangle = () => {
      const rect = new fabric.Rect({
        top: 50,
        left: 50,
        width: 50,
        height: 50,
        fill: "red"
      });

      fabricRef.current.add(rect);
    };

    const disposeFabric = () => {
      fabricRef.current.dispose();
    };

    initFabric();
    addRectangle();

    return () => {
      disposeFabric();
    };
  }, []);

  return <canvas ref={canvasRef} />;
};

export default FabricExample;