111

src/component/Canvas/CanvasEditor/managers/CanvasManager.js

@@ -1312,6 +1312,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
         canvasColor: this.canvasColor.value,
         activeLayerId: this.layerManager?.activeLayerId?.value,
       };
+	  this.FixJsonIdLoss(data);
       console.log("获取画布JSON数据...", data);
 	  return JSON.stringify(data);
     } catch (error) {
@@ -1319,7 +1320,6 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
       throw new Error("获取画布JSON失败");
     }
   }
-
   loadJSON(json, calllBack) {
 
     // 确保传入的json是字符串格式
@@ -1332,10 +1332,11 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
     try {
       const parsedJson = JSON.parse(json);
       console.log("加载画布JSON数据:", parsedJson);
+	  this.FixJsonIdLoss(parsedJson);
       this.canvasWidth.value = parsedJson.canvasWidth || this.width;
       this.canvasHeight.value = parsedJson.canvasHeight || this.height;
       this.canvasColor.value = parsedJson.canvasColor || this.backgroundColor;
-
+      
       // eslint-disable-next-line no-async-promise-executor
       return new Promise(async (resolve, reject) => {
         const tempLayers = parsedJson?.layers || [];
@@ -1398,7 +1399,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
               // 重置画布数据
               await this.setCanvasSize(this.canvas.width, this.canvas.height);
               await this.centerBackgroundLayer(this.canvas.width, this.canvas.height);
-			  // await this.resetCanvasSizeByFixedLayer();
+			  await this.resetCanvasSizeByFixedLayer();
               // 重新构建对象关系
               // restoreObjectLayerAssociations(this.layers.value, this.canvas.getObjects());
               // 验证图层关联关系  -  稳定后可以注释
@@ -1449,6 +1450,22 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer')
       throw new Error("解析JSON失败，请检查输入格式: " + error.message);
     }
   }
+  /** 修复JSON数据中的ID丢失问题 */
+  FixJsonIdLoss(json){
+	const layers = json?.layers || [];
+	const objects = json?.canvas?.objects || [];
+	layers.forEach((layer) => {
+		if(!layer.fabricObjects?.length && !layer.fabricObject){
+			const obj = objects?.find((o) => o.layerId === layer.id);
+			if(!obj) return;
+			layer.fabricObjects = [{
+				id: obj.id,
+				type: obj.type,
+			}]
+		}
+	})
+  }
+
 
   /**
    * 创建其他图层：印花、颜色、元素...