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

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;
+}