合并画布

src/component/Canvas/CanvasEditor/index.vue

@@ -7,6 +7,7 @@ import {
   shallowRef,
   provide,
   defineExpose,
+  nextTick,
 } from "vue";
 import { CanvasManager } from "./managers/CanvasManager";
 import { LayerManager } from "./managers/LayerManager";
@@ -28,7 +29,7 @@ import TextEditorPanel from "./components/TextEditorPanel.vue"; // 引入文本
 import LiquifyPanel from "./components/LiquifyPanel.vue"; // 引入液化编辑面板
 import SelectionPanel from "./components/SelectionPanel.vue"; // 引入选区面板
 import { OperationType } from "./utils/layerHelper.js";
-import { ToolManager } from "./managers/ToolManager.js";
+import { ToolManager } from "./managers/toolManager.js";
 import { fabric } from "fabric-with-all";
 import { uploadImageAndCreateLayer } from "./utils/imageHelper.js";
 // import MinimapPanel from "./components/MinimapPanel.vue";
@@ -59,6 +60,15 @@ const props = defineProps({
     type: String,
     default: "", // 红绿图URL
   },
+  clothingImageOpts: {
+    type: Object,
+    default: () => {
+      return {
+        scaleX: 1,
+        scaleY: 1,
+      };
+    },
+  },
 });
 
 // 引用和状态
@@ -243,11 +253,10 @@ onMounted(async () => {
   // 初始化小地图
   // minimapManager.value = new MinimapManager(canvasManager.canvas);
 
-  // setTimeout(() => {
-  //   // historyManager.saveCanvasState();
-  //   // 初始状态下生成所有预览图
-  //   canvasManager.updateAllThumbnails();
-  // }, 500);
+  setTimeout(() => {
+    // 初始状态下生成所有预览图
+    canvasManager.updateAllThumbnails();
+  }, 300);
 
   // 使用window的resize事件代替ResizeObserver
   // 只有当窗口大小变化时才更新画布尺寸
@@ -306,12 +315,38 @@ onMounted(async () => {
       }
     }
 
+    // 如果初始化有默认底图，设置底图 - 红绿图模式不通过初始化重置底图了
+    if (!isRedGreenMode.value && props.clothingImageUrl) {
+      nextTick(() => {
+        setTimeout(() => {
+          try {
+            canvasManager?.changeFixedImage?.(props.clothingImageUrl, {
+              undoable: false, // 不可撤销操作
+              ...(props?.clothingImageOpts || {}),
+            });
+          } catch (error) {
+            console.error("更换底图失败:", error);
+          }
+        }, 92); // 延迟 确保更新底图完成
+      });
+
+      this.canvasManager?.centerBackgroundLayer?.(
+        this.canvas.width,
+        this.canvas.height
+      );
+    }
+
     // 初始设置
     handleWindowResize(); // 设置画布大小
   }
 });
 
 onBeforeUnmount(() => {
+  if (import.meta.hot) {
+    // 热更新 ？
+    console.log("onBeforeUnmount 开发环境热更新不卸载组件...");
+    return; // 开发环境下不卸载组件
+  }
   console.log("onBeforeUnmount  组件卸载，清理资源...");
   canvasManager?.dispose?.();
   commandManager?.dispose?.();
@@ -397,8 +432,8 @@ function updateCanvasColor() {
   canvasManager.setCanvasColor(canvasColor.value);
 }
 
-function addLayer() {
-  layerManager.createLayer();
+async function addLayer() {
+  await layerManager.createLayer();
 }
 
 function setActiveLayer(layerId) {
@@ -815,12 +850,9 @@ defineExpose({
       <!-- v-if="canvasManagerLoaded && !enabledRedGreenMode" -->
 
       <transition name="fade">
-        <div
-          class="layers-panel"
-          v-if="isShowLayerPanel && !enabledRedGreenMode"
-        >
+        <div class="layers-panel" v-if="isShowLayerPanel">
           <LayersPanel
-            v-if="canvasManagerLoaded && canvasManager?.canvas"
+            v-if="canvasManagerLoaded"
             :activeLayerId="activeLayerId"
             :activeElementId="activeElementId"
             :thumbnailManager="canvasManager.thumbnailManager"