React中Fabric.js添加图片/文本后绘制时元素消失问题求助

问题回顾 #

在React项目中基于fabric包开发绘图画板，支持绘图、文本/图片添加功能，但出现以下显示异常：

• 图片/文本添加后短暂显示，后续操作中消失，选中其他元素时又重新出现
• 绘图时仅绘图内容可见，添加元素时仅元素可见，但所有对象实际都存在于画布中
  已尝试移除React Strict Mode、调用renderAll()等方法，问题未解决。

核心原因 #

代码中每次组件渲染都会重新创建Fabric.js的Canvas实例，导致画布状态被频繁重置，旧实例的元素无法在新实例中正常显示，最终出现元素"时隐时现"的问题。

具体修复步骤 #

1. 用useRef持久化Canvas实例 #

修改fabricCanvas.js中的useFabricCanvas钩子，通过useRef存储Canvas实例，确保整个组件生命周期内只初始化一次：

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

export const useFabricCanvas = (canvasId) => {
  const canvasInstanceRef = useRef(null);

  useEffect(() => {
    // 仅在首次渲染时创建Canvas实例
    if (!canvasInstanceRef.current) {
      canvasInstanceRef.current = new fabric.Canvas(canvasId, {
        isDrawingMode: false,
        width: 800,
        height: 600,
        backgroundColor: '#fff'
      });
    }

    // 组件卸载时清理Canvas实例
    return () => {
      if (canvasInstanceRef.current) {
        canvasInstanceRef.current.dispose();
        canvasInstanceRef.current = null;
      }
    };
  }, [canvasId]);

  return canvasInstanceRef.current;
};

2. 确保所有操作基于同一实例 #

在调用添加文本、图片、切换绘图模式等功能时，必须使用useFabricCanvas返回的持久化实例，避免在渲染周期内重新初始化画布。

3. 移除重复初始化逻辑 #

检查代码中是否存在多次创建fabric.Canvas的逻辑，比如在状态变更时重复初始化，这类代码需要全部移除。

额外提示 #

• Fabric.js默认会在元素变更时自动触发渲染，无需手动频繁调用renderAll()；若需强制渲染，确保在同一个Canvas实例上调用该方法。
• 画布的配置（如尺寸、背景色）应放在初始化时设置，避免在渲染函数中重复修改。

内容的提问来源于stack exchange，提问作者B e e p