React中监听Fabric.js画布选中对象变化的Hook方案咨询

别用setInterval轮询，直接用Fabric.js内置的选中事件实时更新React状态，这是最优雅且性能最优的方案。

核心思路 #

Fabric.js画布自带三个和选中相关的原生事件：

• selection:created：首次选中对象时触发
• selection:updated：切换选中对象时触发
• selection:cleared：点击空白取消选中时触发

我们只需在画布实例就绪后，给这些事件绑定回调，直接更新selectedObject状态即可。

修正后的完整代码 #

import { fabric } from "fabric";
import { useContext, useEffect, useState } from "react";
import { FabricContext } from "../../App";

export const PropertyWindow = () => {
  const canvas = useContext(FabricContext);
  const [selectedObject, setSelectedObject] = useState(null);

  useEffect(() => {
    // 确保画布实例存在再执行后续逻辑
    if (!canvas?.current) return;

    const currentCanvas = canvas.current;

    // 处理选中/切换选中的回调
    const handleSelection = (e) => {
      setSelectedObject(e.selected[0] || null);
    };

    // 处理取消选中的回调
    const handleSelectionClear = () => {
      setSelectedObject(null);
    };

    // 绑定Fabric事件
    currentCanvas.on("selection:created", handleSelection);
    currentCanvas.on("selection:updated", handleSelection);
    currentCanvas.on("selection:cleared", handleSelectionClear);

    // 组件卸载或画布更新时，清理事件监听避免内存泄漏
    return () => {
      currentCanvas.off("selection:created", handleSelection);
      currentCanvas.off("selection:updated", handleSelection);
      currentCanvas.off("selection:cleared", handleSelectionClear);
    };
  }, [canvas]); // 依赖数组加入canvas，画布实例变化时重新绑定事件

  return (
    <div>
      {selectedObject ? (
        <div>
          <h3>选中对象属性</h3>
          <p>类型: {selectedObject.type}</p>
          <p>宽度: {selectedObject.width}</p>
          <p>高度: {selectedObject.height}</p>
          {/* 这里可添加更多属性编辑控件 */}
        </div>
      ) : (
        <p>请选中画布中的对象</p>
      )}
    </div>
  );
};

为什么之前的useEffect没生效？ #

初始时canvas为null，所以必须在useEffect内部先判断canvas.current是否存在，再执行事件绑定。同时把canvas加入依赖数组，当用户导入图片创建完画布后，canvas状态更新，useEffect会自动重新执行，此时就能拿到有效的画布实例。

为什么比setInterval更优？ #

• 实时响应：选中状态变化瞬间触发更新，无轮询延迟
• 性能更好：避免定时重复检查的额外开销
• 逻辑更清晰：直接利用Fabric原生事件，符合框架设计思想

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