feat: 优化选区功能，修复部分bug

src/component/Canvas/CanvasEditor/utils/layerHelper.js

@@ -1,3 +1,5 @@
+import { generateId } from "./helper";
+
 /**
  * 图层类型枚举
  */

src/component/Canvas/CanvasEditor/utils/layerUtils.js

@@ -20,11 +20,13 @@ export function buildLayerAssociations(layer, canvasObjects) {
   }
 
   if (layer.clippingMask) {
-    // clippingMask 可能是一个fabricObject或组
+    // clippingMask 可能是一个fabricObject或组 也可能是一个简单对象
     const clippingMaskObj = canvasObjects.find(
       (obj) => obj.id === layer.clippingMask.id
     );
-    layer.clippingMask = clippingMaskObj?.toObject?.(["id"]) || null;
+    layer.clippingMask = clippingMaskObj
+      ? clippingMaskObj?.toObject?.(["id"])
+      : layer.clippingMask;
   }
 
   // 处理多个fabricObjects关联
@@ -170,12 +172,15 @@ export function simplifyLayers(layers) {
       opacity: layer.opacity,
       isBackground: layer.isBackground || false,
       isFixed: layer.isFixed || false,
-      clippingMask: layer.clippingMask
-        ? {
-            id: layer.clippingMask.id,
-            type: layer.clippingMask.type,
-          }
-        : null,
+      clippingMask:
+        layer.clippingMask?.toObject?.(["id", "layerId"]) ||
+        layer.clippingMask ||
+        null, // 可能是一个fabricObject或组 也可能是一个简单对象
+      // ? {
+      //     id: layer.clippingMask.id,
+      //     type: layer.clippingMask.type,
+      //   }
+      // : null,
       fabricObject: layer.fabricObject
         ? {
             id: layer.fabricObject.id,
@@ -226,11 +231,21 @@ export function restoreLayers(simplifiedLayers, canvasObjects) {
     const restoredLayer = { ...layer };
 
     // 恢复clippingMask关联
-    if (layer.clippingMask?.id) {
+    // if (layer.clippingMask?.id) {
+    //   const clippingMaskObj = canvasObjects.find(
+    //     (obj) => obj.id === layer.clippingMask.id
+    //   );
+    //   restoredLayer.clippingMask = clippingMaskObj || null;
+    // }
+
+    if (layer.clippingMask) {
+      // clippingMask 可能是一个fabricObject或组 也可能是一个简单对象
       const clippingMaskObj = canvasObjects.find(
         (obj) => obj.id === layer.clippingMask.id
       );
-      restoredLayer.clippingMask = clippingMaskObj || null;
+      restoredLayer.clippingMask = clippingMaskObj
+        ? clippingMaskObj?.toObject?.(["id"])
+        : layer.clippingMask;
     }
 
     // 恢复单个fabricObject关联
@@ -334,3 +349,30 @@ export function restoreFromSnapshot(snapshot, canvasObjects) {
 
   return restoreLayers(snapshot.data, canvasObjects);
 }
+
+/**
+ * 获取对象的定位信息
+ * @param {Object} object 对象
+ * @returns {Object} 对象的定位信息
+ */
+export function getOriginObjectInfo(object) {
+  if (!object) {
+    console.warn("getOriginObjectInfo 请传入有效的fabric对象:", object);
+    return {};
+  }
+
+  // 获取对象的原始信息
+  const originInfo = {
+    left: object.left || 0,
+    top: object.top || 0,
+    scaleX: object.scaleX || 1,
+    scaleY: object.scaleY || 1,
+    angle: object.angle || 0,
+    flipX: object.flipX || false,
+    flipY: object.flipY || false,
+    skewX: object.skewX || 0,
+    skewY: object.skewY || 0,
+  };
+
+  return originInfo;
+}

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

@@ -0,0 +1,63 @@
+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("对象恢复失败"));
+          }
+        });
+    }
+  });
+}