如何移动nextjs useState中创建的fabricjs对象？

Question

当我在 useEffect() 中创建织物画布时，它不允许我移动添加的图像，但如果我在其他地方创建它（受 useState 异步问题的影响），它确实允许我正常移动。代码不起作用，但正是我需要的：

export default function Home(){
 const [canvas, setCanvas] = useState();

 useEffect(() => {
  setCanvas(new fabric.Canvas('canvas', selectable: true, renderOnAddRemove: false}));
 }, []);

 const addImage = () => {
  canvas.add(new fabric.Image("/myImage.png").renderAll();
 }

 return(
  <>
   <canvas id="canvas" />
   <button onClick(addImage)>Add Image </button>
  </>
 )
}

Answer 1

我遇到了这个问题，并一直试图解决它，但没有运气。不是直接修复，但我建议使用 https://www.npmjs.com/package/fabricjs-react，所以安装它后（ npm install --save Fabricjs-react Fabric ），你的代码将如下所示：

'use client'
import React from 'react';
import { FabricJSCanvas, useFabricJSEditor } from 'fabricjs-react';

const SimpleCanvas = () => {
  const { editor, onReady } = useFabricJSEditor();

  const addImage = () => {
    if (editor) {
      const imageUrl = '/myImage.jpg'; // Path to your image
      fabric.Image.fromURL(imageUrl, (img) => {
        // Add customization to the image here if necessary
        img.set({
          left: 100,
          top: 100,
          angle: 0,
          selectable: true
        });

        // Add the image to the Fabric.js canvas
        editor.canvas.add(img);
      });
    }
  };

  return (
    <div>
      <FabricJSCanvas onReady={onReady} />
      <button onClick={addImage}>Add Image</button>
    </div>
  );
};

export default SimpleCanvas;

希望有帮助。