如何解决Next.js中useEffect创建Fabric.js画布后对象无法移动的问题？

你的代码存在几个关键问题，导致添加的图片无法移动：

1. Canvas初始化语法错误 #

useEffect里创建Canvas时，配置对象缺少开头的{，正确写法应该是：

new fabric.Canvas('canvas', { selectable: true, renderOnAddRemove: false })

另外注意：selectable并非Canvas实例的配置项，它是Fabric对象（比如Image）的属性，Canvas配置里没有这个参数，可直接移除——默认情况下Fabric对象就是可选择移动的。

2. fabric.Image创建方式错误 #

不能直接将URL传给fabric.Image构造函数，必须先通过img元素加载图片资源，等加载完成后再创建Fabric图片实例。

3. useState存储Canvas的异步问题 #

useState的更新是异步的，即便useEffect是空依赖，组件渲染初期canvas状态可能还未完成更新，调用addImage时会存在潜在问题。更合适的方式是用useRef存储Canvas实例，ref的.current属性是同步更新的，能直接获取最新的Canvas引用。

修正后的完整代码 #

import { useEffect, useRef } from 'react';
import fabric from 'fabric';

export default function Home() {
  const canvasRef = useRef(null);

  useEffect(() => {
    // 初始化Canvas实例
    canvasRef.current = new fabric.Canvas('canvas', {
      renderOnAddRemove: false
    });
    return () => {
      // 组件卸载时销毁Canvas，避免内存泄漏
      canvasRef.current?.dispose();
    };
  }, []);

  const addImage = () => {
    if (!canvasRef.current) return;

    const imgElement = new Image();
    imgElement.src = "/myImage.png";
    imgElement.crossOrigin = "anonymous"; // 图片跨域时需要设置
    imgElement.onload = () => {
      const fabricImage = new fabric.Image(imgElement, {
        left: 100,
        top: 100,
        selectable: true // 显式设置图片可选择移动（默认值为true，可省略）
      });
      canvasRef.current.add(fabricImage);
      canvasRef.current.renderAll(); // 更新画布渲染
    };
  };

  return (
    <>
      <canvas id="canvas" style={{ border: '1px solid #ccc' }} />
      <button onClick={addImage}>添加图片</button>
    </>
  );
}

关键说明 #

• 用useRef替代useState存储Canvas实例，彻底避免异步更新带来的引用问题。
• 通过Image元素的onload事件确保图片加载完成后再创建Fabric实例，否则图片无法正常渲染和交互。
• 组件卸载时调用dispose()销毁Canvas，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Janio Junior