将fabric.js矩形整合到反应中

Question

import { fabric } from 'fabric';
const Canvas = () => {
  const [canvas, setCanvas] = useState('');  
  useEffect(() => {
    setCanvas(initCanvas());
  }, []);  
  
  const initCanvas = () => (
    new fabric.Canvas('canvas', {
      height: 800,
      width: 800,
    })
  ); 
  const addRect = canvi => {
    const rect = new fabric.Rect({
      height: 280,
      width: 200,
      fill: 'yellow'
    });
    canvi.add(rect);
    canvi.renderAll();
  }
  
  return(
    <div>
      <button onClick={() => addRect(canvas)}></button>
     <br/><br/>
     <canvas id="canvas" />
    </div>
  );
}
export default Canvas;

我想在不使用按钮的情况下显示矩形，并在浏览器上显示其状态 onload 事件在反应中也不起作用我还尝试使用 onload 的另一种替代方法，但它没有帮助

Answer 1

如果你想在不点击按钮的情况下添加矩形，我也在研究这个，你可以将它添加到 useEffect 中。

const fuctionName = ()=>{

useEffect(() => {



  return () => {

 const canvas = new fabric.Canvas('canvas-main');


 const rect = new fabric.Rect({

     height: 280,

      width: 200,

      fill: 'yellow',

    });

 canvas.add(rect);

  }
}, [])

 return (
    <>
      <canvas


        style={{ border: 'solid 1px #555' }}


        id="canvas-main"


        width="600px"


        height="600px"
      />
    </>
  );
};