aida_front/src/component/Canvas/CanvasEditor/utils/objectHelper.js

import { fabric } from "fabric-with-all";

/**
 * 将序列化对象恢复为 fabric 对象
 * @param {Object} serializedObject - toObject() 生成的对象
 * @param {fabric.Canvas} canvas - 目标画布
 * @returns {Promise<fabric.Object>} 恢复的 fabric 对象
 */
export async function restoreFabricObject(serializedObject, canvas) {
  return new Promise((resolve, reject) => {
    const objectType = serializedObject.type;
    // 定义恢复后的处理函数
    const handleRestoredObject = (fabricObject) => {
      if (!fabricObject) {
        reject(new Error(`无法恢复 ${objectType} 类型的对象`));
        return;
      }

      // 恢复自定义属性
      if (serializedObject.id) fabricObject.id = serializedObject.id;
      if (serializedObject.layerId) fabricObject.layerId = serializedObject.layerId;
      if (serializedObject.layerName) fabricObject.layerName = serializedObject.layerName;

      // 更新坐标
      fabricObject.setCoords();

      // 添加到画布
      //   canvas.add(fabricObject);

      resolve(fabricObject);
    };

    // 根据类型选择恢复方法
    switch (objectType) {
      case "rect":
        fabric.Rect.fromObject(serializedObject, handleRestoredObject);
        break;
      case "circle":
        fabric.Circle.fromObject(serializedObject, handleRestoredObject);
        break;
      case "path":
        fabric.Path.fromObject(serializedObject, handleRestoredObject);
        break;
      case "image":
        fabric.Image.fromObject(serializedObject, handleRestoredObject);
        break;
      case "group":
        fabric.Group.fromObject(serializedObject, handleRestoredObject);
        break;
      default:
        // 使用通用方法
        fabric.util.enlivenObjects([serializedObject], (objects) => {
          if (objects && objects[0]) {
            handleRestoredObject(objects[0]);
          } else {
            reject(new Error("对象恢复失败"));
          }
        });
    }
  });
}