fabric.js 在 react 中使用时，图像和文本对象常因 canvas 未正确初始化或未同步尺寸更新而闪烁或消失；根本原因在于 canvas 实例未绑定到容器生命周期，且缺少响应式重置与资源清理机制。

fabric.js 在 react 中使用时，图像和文本对象常因 canvas 未正确初始化或未同步尺寸更新而闪烁或消失；根本原因在于 canvas 实例未绑定到容器生命周期，且缺少响应式重置与资源清理机制。

在 React 应用中集成 Fabric.js 时，直接操作 DOM 创建 Canvas 并手动管理其生命周期是避免对象“消失”的关键。你遇到的问题——图像/文本短暂显示后不可见、仅在选中时重现、绘图与元素无法共存——本质上不是 Fabric.js 的 Bug，而是 React 渲染机制与 Fabric Canvas 状态不同步导致的典型问题：Canvas 实例被重复创建、renderAll() 调用时机不当、容器尺寸变更未触发 Canvas 重适配，以及组件卸载时未释放资源。

JS X Monitor

X.com (Twitter) 账号监控自动化：定时抓取指定账号最新推文，发现新内容即时推送通知。

下载

✅ 正确初始化流程（核心四步）

1. 容器 Ref 优先于 ID 查询
   避免 document.getElementById()，改用 useRef 绑定容器 DOM 节点，确保获取的是当前渲染的实例：

   const containerRef = useRef<HTMLDivElement>(null);
   const canvasID = "fabric-canvas";
   
   return (
     <div ref={containerRef} style={{ width: "100%", height: "600px", position: "relative" }}>
       <canvas id={canvasID} />
     </div>
   );

2. useEffect 中单次初始化 + 尺寸感知
   在 useEffect 中检查容器存在性，并基于 clientWidth/clientHeight 初始化 Canvas —— 禁止硬编码宽高：

   useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
   
     const { clientWidth, clientHeight } = container;
     const canvas = new fabric.Canvas(canvasID, {
       backgroundColor: "#ffffff",
       preserveObjectStacking: true, // ✅ 关键：保持图层顺序，避免 z-index 错乱
       selection: true,
     });
   
     // 同步初始尺寸
     canvas.setDimensions({ width: clientWidth, height: clientHeight });
     canvas.renderAll();
   
     // ✅ 保存 canvas 实例至全局状态（如 Context / Zustand / useRef）
     fabricStore.setCanvas(canvas);
   
     return () => {
       canvas.dispose(); // 必须调用，防止内存泄漏
     };
   }, []);

3. 监听容器尺寸变化（非 window.resize）
   使用 ResizeObserver 监听父容器而非整个窗口，精准响应布局变化（如侧边栏展开、响应式折叠）：

   useEffect(() => {
     const container = containerRef.current;
     if (!container || !fabricStore.canvas) return;
   
     const resizeObserver = new ResizeObserver((entries) => {
       const { width, height } = entries[0].contentRect;
       fabricStore.canvas.setDimensions({ width, height });
       fabricStore.canvas.renderAll();
     });
   
     resizeObserver.observe(container);
     return () => resizeObserver.disconnect();
   }, []);

4. 所有对象操作必须在 Canvas 实例就绪后进行
   添加图片/文本前，务必确认 fabricStore.canvas 已初始化（例如通过 useEffect 依赖它）：

   useEffect(() => {
     if (!fabricStore.canvas) return;
   
     // ✅ 安全添加图像
     fabric.Image.fromURL("/logo.png", (img) => {
       img.scaleToWidth(100).set({ left: 50, top: 50 });
       fabricStore.canvas.add(img);
       fabricStore.canvas.renderAll();
     });
   
     // ✅ 安全添加文本
     const text = new fabric.Text("Hello Fabric!", {
       left: 200,
       top: 100,
       fontSize: 24,
       fill: "#333"
     });
     fabricStore.canvas.add(text);
     fabricStore.canvas.renderAll();
   }, [fabricStore.canvas]);

⚠️ 常见错误与规避清单

• ❌ 错误：在 useState 初始化中创建 Canvas → 导致多次实例化，旧实例残留
• ❌ 错误：用 window.addEventListener('resize') → 无法捕获 Flex/Grid 布局下的尺寸变化
• ❌ 错误：未设置 preserveObjectStacking: true → 对象层级错乱，看似“消失”实为被遮挡
• ❌ 错误：添加对象后未调用 canvas.renderAll() 或 canvas.requestRenderAll()（后者更推荐用于高频更新）
• ✅ 最佳实践：将 fabric.Canvas 实例托管于 useRef 或状态管理器（如 Zustand），避免跨渲染周期丢失引用

? 总结

Fabric.js 在 React 中“对象消失”的本质是 Canvas 生命周期脱离 React 组件生命周期。解决路径唯一：
① 用 useRef 锁定容器；
② 在 useEffect 中按需创建、尺寸同步、事件绑定；
③ 用 ResizeObserver 替代 window.resize；
④ 所有 Fabric 操作前校验 Canvas 实例有效性；
⑤ 组件卸载时务必 .dispose()。

遵循该模式，绘图、文本、图像将稳定共存于同一画布，不再出现“只显示一种类型”的诡异行为。