111

src/component/Canvas/CanvasEditor/components/HeaderMenu.vue

@@ -22,6 +22,7 @@ const props = defineProps({
     default: true, // 是否显示图层面板
   },
   isBackgroundChangeable: Boolean,
+  isChangeCanvasSize: Boolean,
 });
 
 const emit = defineEmits([
@@ -284,6 +285,7 @@ onMounted(() => {
         <div class="setting-group">
           <span class="setting-label">{{ $t("Canvas.width") }}</span>
           <a-input-number
+		    :disabled="!isChangeCanvasSize"
             :value="canvasWidth?.toFixed(2)"
             class="setting-input"
             :min="1"
@@ -300,6 +302,7 @@ onMounted(() => {
         <div class="setting-group">
           <span class="setting-label">{{ $t("Canvas.height") }}</span>
           <a-input-number
+		    :disabled="!isChangeCanvasSize"
             :value="canvasHeight?.toFixed(2)"
             class="setting-input"
             :min="1"

src/component/Canvas/CanvasEditor/index.vue

@@ -75,6 +75,10 @@ const props = defineProps({
     type: Object,
     default: () => CanvasConfig, // 默认配置
   },
+  isChangeCanvasSize: {
+    type: Boolean,
+    default: true, // 是否允许修改画布大小
+  },
   showLayersPanel: {
     type: Boolean,
     default: true, // 是否显示图层面板
@@ -1190,7 +1194,7 @@ defineExpose({
         :brushSize="brushSize"
         :enabledRedGreenMode="enabledRedGreenMode"
         :showLayersPanel="showLayersPanel"
-        :isBackgroundChangeable="isBackgroundChangeable"
+        :isChangeCanvasSize="props.isChangeCanvasSize"
         @update:canvasWidth="canvasWidth = $event"
         @update:canvasHeight="canvasHeight = $event"
         @update:canvasColor="canvasColor = $event"

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,
+			}]
+		}
+	})
+  }
+
 
   /**
    * 创建其他图层：印花、颜色、元素...

src/component/Detail/canvas/index.vue

@@ -18,6 +18,7 @@
 							:clothing-image-opts="{
 								imageMode:'contains',
 							}"
+							:isChangeCanvasSize="false"
 							:hideCanvas="hideCanvas || !isEditPattern"
 							ref="editCanvas">
 						</editCanvas>