合并画布

2025-06-22 13:52:28 +08:00
parent fd6d61a44a
commit 584f6a7db0
47 changed files with 4540 additions and 1952 deletions
--- a/src/component/Canvas/CanvasEditor/utils/layerUtils.js
+++ b/src/component/Canvas/CanvasEditor/utils/layerUtils.js
@@ -21,8 +21,10 @@ export function buildLayerAssociations(layer, canvasObjects) {

  if (layer.clippingMask) {
    // clippingMask 可能是一个fabricObject或组
-    layer.clippingMask =
-      canvasObjects.find((obj) => obj.id === layer.clippingMask.id) || null;
+    const clippingMaskObj = canvasObjects.find(
+      (obj) => obj.id === layer.clippingMask.id
+    );
+    layer.clippingMask = clippingMaskObj?.toObject?.(["id"]) || null;
  }

  // 处理多个fabricObjects关联
@@ -49,6 +51,7 @@ export function buildLayerAssociations(layer, canvasObjects) {
 */
 export function restoreObjectLayerAssociations(layers, canvasObjects) {
  if (!layers || !canvasObjects || !isArray(canvasObjects)) return;
+
  layers.forEach((layer) => {
    buildLayerAssociations(layer, canvasObjects);
    // 处理子图层
@@ -150,55 +153,181 @@ export function validateLayerAssociations(layers, canvasObjects) {

 /**
 * 简化layers对象属性，只保留必要的属性
- * @param {Array} layers 图层数组          simplifyLayers(JSON.parse(JSON.stringify(this.layers.value)))
-
+ * @param {Array} layers 图层数组
+ * @returns {Array} 简化后的图层数组
 */
-
 export function simplifyLayers(layers) {
  if (!layers || !isArray(layers)) {
    console.warn("simplifyLayers 请传入有效的图层数组:", layers);
    return [];
  }

-  layers.forEach((layer) => {
-    // 处理图层遮罩
-    // 如果clippingMask是一个fabricObject或组，确保它的id正确 // 因为是fabric对象，所以没办法直接获取id，只能通过序列化获取
-    if (layer.clippingMask) {
-      layer.clippingMask = layer.clippingMask?.id || null;
-    }
-
-    // 处理单个fabricObject
-    if (layer.fabricObject) {
-      layer.fabricObject = layer.fabricObject?.id;
-    }
-    // 处理多个fabricObjects
-    if (layer.fabricObjects && isArray(layer.fabricObjects)) {
-      layer.fabricObjects = layer.fabricObjects
-        .map((fabricObject) => {
-          return fabricObject?.id || null; // 确保每个fabricObject都能转换为对象
-        })
-        .filter((obj) => obj !== null);
-    }
-    // 处理子图层
-    if (layer.children && isArray(layer.children)) {
-      layer.children = simplifyLayers(layer.children);
-    }
-
-    // 只保留必要的属性
-    layer = {
+  return layers.map((layer) => {
+    const simplifiedLayer = {
      id: layer.id,
      name: layer.name,
      visible: layer.visible,
      locked: layer.locked,
      opacity: layer.opacity,
-      clippingMask: layer.clippingMask || null,
-      fabricObject: layer.fabricObject || null,
-      fabricObjects: layer.fabricObjects || [],
-      children: layer.children || [],
      isBackground: layer.isBackground || false,
-      ifFixed: layer.ifFixed || false,
+      isFixed: layer.isFixed || false,
+      clippingMask: layer.clippingMask
+        ? {
+            id: layer.clippingMask.id,
+            type: layer.clippingMask.type,
+          }
+        : null,
+      fabricObject: layer.fabricObject
+        ? {
+            id: layer.fabricObject.id,
+            type: layer.fabricObject.type,
+          }
+        : null,
+      fabricObjects:
+        layer.fabricObjects && isArray(layer.fabricObjects)
+          ? layer.fabricObjects
+              .map((fabricObject) =>
+                fabricObject?.id
+                  ? {
+                      id: fabricObject.id,
+                      type: fabricObject.type,
+                    }
+                  : null
+              )
+              .filter((obj) => obj !== null)
+          : [],
+      children:
+        layer.children && isArray(layer.children)
+          ? simplifyLayers(layer.children)
+          : [],
    };
-  });

-  return layers;
+    return simplifiedLayer;
+  });
+}
+
+/**
+ * 恢复图层的完整关联关系
+ * @param {Array} simplifiedLayers 简化的图层数组
+ * @param {Array} canvasObjects 画布对象数组
+ * @returns {Array} 恢复关联后的图层数组
+ */
+export function restoreLayers(simplifiedLayers, canvasObjects) {
+  if (!simplifiedLayers || !isArray(simplifiedLayers)) {
+    console.warn("restoreLayers 请传入有效的简化图层数组:", simplifiedLayers);
+    return [];
+  }
+
+  if (!canvasObjects || !isArray(canvasObjects)) {
+    console.warn("restoreLayers 请传入有效的画布对象数组:", canvasObjects);
+    return simplifiedLayers;
+  }
+
+  return simplifiedLayers.map((layer) => {
+    const restoredLayer = { ...layer };
+
+    // 恢复clippingMask关联
+    if (layer.clippingMask?.id) {
+      const clippingMaskObj = canvasObjects.find(
+        (obj) => obj.id === layer.clippingMask.id
+      );
+      restoredLayer.clippingMask = clippingMaskObj || null;
+    }
+
+    // 恢复单个fabricObject关联
+    if (layer.fabricObject?.id) {
+      const fabricObj = canvasObjects.find(
+        (obj) => obj.id === layer.fabricObject.id
+      );
+      if (fabricObj) {
+        fabricObj.layerId = layer.id;
+        fabricObj.layerName = layer.name;
+        restoredLayer.fabricObject = fabricObj;
+      } else {
+        restoredLayer.fabricObject = null;
+      }
+    }
+
+    // 恢复多个fabricObjects关联
+    if (layer.fabricObjects && isArray(layer.fabricObjects)) {
+      restoredLayer.fabricObjects = layer.fabricObjects
+        .map((fabricRef) => {
+          const fabricObj = canvasObjects.find(
+            (obj) => obj.id === fabricRef.id
+          );
+          if (fabricObj) {
+            fabricObj.layerId = layer.id;
+            fabricObj.layerName = layer.name;
+            return fabricObj;
+          }
+          return null;
+        })
+        .filter((obj) => obj !== null);
+    }
+
+    // 递归处理子图层
+    if (layer.children && isArray(layer.children)) {
+      restoredLayer.children = restoreLayers(layer.children, canvasObjects);
+    }
+
+    return restoredLayer;
+  });
+}
+
+/**
+ * 序列化图层数据用于保存
+ * @param {Array} layers 图层数组
+ * @returns {string} 序列化后的JSON字符串
+ */
+export function serializeLayers(layers) {
+  try {
+    const simplified = simplifyLayers(layers);
+    return JSON.stringify(simplified, null, 2);
+  } catch (error) {
+    console.error("序列化图层数据失败:", error);
+    return null;
+  }
+}
+
+/**
+ * 反序列化图层数据并恢复关联
+ * @param {string} serializedLayers 序列化的图层JSON字符串
+ * @param {Array} canvasObjects 画布对象数组
+ * @returns {Array} 恢复关联后的图层数组
+ */
+export function deserializeLayers(serializedLayers, canvasObjects) {
+  try {
+    const simplified = JSON.parse(serializedLayers);
+    return restoreLayers(simplified, canvasObjects);
+  } catch (error) {
+    console.error("反序列化图层数据失败:", error);
+    return [];
+  }
+}
+
+/**
+ * 获取图层的存储快照（用于撤销/重做）
+ * @param {Array} layers 图层数组
+ * @returns {Object} 图层快照对象
+ */
+export function createLayerSnapshot(layers) {
+  return {
+    timestamp: Date.now(),
+    data: simplifyLayers(layers),
+  };
+}
+
+/**
+ * 从快照恢复图层状态
+ * @param {Object} snapshot 图层快照对象
+ * @param {Array} canvasObjects 画布对象数组
+ * @returns {Array} 恢复的图层数组
+ */
+export function restoreFromSnapshot(snapshot, canvasObjects) {
+  if (!snapshot?.data) {
+    console.warn("无效的图层快照:", snapshot);
+    return [];
+  }
+
+  return restoreLayers(snapshot.data, canvasObjects);
 }