fix

src/component/Canvas/CanvasEditor/index.vue

@@ -499,26 +499,17 @@ onMounted(async () => {
   });
 
   let trailingTimeout = null;
-  let throttleDelay = 100;
   observer = new ResizeObserver((entries) => {
     clearTimeout(trailingTimeout);
     trailingTimeout = setTimeout(() => {
 	  optimizeCanvasRendering(canvasManager.canvas, ()=> handleWindowResize());
-    }, throttleDelay);
+    }, 200);
   });
   observer.observe(canvasContainerRef.value);
   // 使用window的resize事件代替ResizeObserver
   // 只有当窗口大小变化时才更新画布尺寸
   //   window.addEventListener("resize", handleWindowResize);
-  if (props.config.initZoom) {
+  setInitZoom();
-    const width = canvasManager.width;
-    const height = canvasManager.height;
-    const cwidth = props.config.width;
-    const cheight = props.config.height;
-    let zoom = Math.min(1, width / cwidth, height / cheight);
-    if (zoom < 1) zoom -= 0.05;
-    setZoom(zoom); // 设置画布缩放
-  }
 });
 
 watchEffect(() => {
@@ -573,13 +564,26 @@ async function handleWindowResize() {
   // 使用requestAnimationFrame来防止频繁更新
   await new Promise(requestAnimationFrame);
   if(!canvasManager) return;
-  updateCanvasSize();
+  await updateCanvasSize();
   // 确保显示的缩放信息是最新的
   currentZoom.value = Math.round(canvasManager.canvas.getZoom() * 100);
+  setInitZoom();
   await new Promise(requestAnimationFrame);
   await layerManager?.updateLayersObjectsInteractivity?.();
 }
 
+function setInitZoom(){
+  if (props.config.initZoom) {
+    const width = canvasManager.width;
+    const height = canvasManager.height;
+    const cwidth = props.config.width;
+    const cheight = props.config.height;
+    let zoom = Math.min(1, width / cwidth, height / cheight);
+    if (zoom < 1) zoom -= 0.05;
+    setZoom(zoom); // 设置画布缩放
+  }
+}
+
 function resetZoom() {
   canvasManager.resetZoom();
 }
@@ -625,13 +629,13 @@ function zoomOut() {
   canvasManager.animateZoom(centerPoint, newZoom);
 }
 
-function updateCanvasSize() {
+async function updateCanvasSize() {
   if (canvasManager && canvasContainerRef.value) {
     const containerWidth = canvasContainerRef.value.clientWidth;
     const containerHeight = canvasContainerRef.value.clientHeight;
 
     // 普通模式下，更新画布大小，这会同时重置视图和居中所有元素
-    canvasManager.setCanvasSize(containerWidth, containerHeight);
+    await canvasManager.setCanvasSize(containerWidth, containerHeight);
 
     // // 如果启用了红绿图模式，使用 layerManager 的缩放方法
     // if (props.enabledRedGreenMode && layerManager) {

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

@@ -444,7 +444,7 @@ export class CanvasManager {
     }
 
     // 居中所有画布元素，包括背景层和其他元素
-    this.centerAllObjects();
+    await this.centerAllObjects();
 
     // // 重新渲染画布使变更生效
     // this.canvas.renderAll();
@@ -469,7 +469,6 @@ export class CanvasManager {
    */
   async centerAllObjects() {
     if (!this.canvas) return;
-
     // 获取所有可见对象（不是背景元素的对象）
     const allObjects = this.canvas.getObjects();
     if (allObjects.length === 0) return;
@@ -484,9 +483,6 @@ export class CanvasManager {
     // 获取背景对象
     const backgroundObject = visibleObjects.find((obj) => obj.isBackground);
 
-    // !this.canvas?.clipPath &&
-    //   this.centerBackgroundLayer(this.canvas.width, this.canvas.height);
-
     this.canvas?.clipPath?.set?.({
       left: this.width / 2,
       top: this.height / 2,
@@ -578,6 +574,9 @@ export class CanvasManager {
         });
       });
     }
+	
+    !this.canvas?.clipPath &&
+      this.centerBackgroundLayer(this.canvas.width, this.canvas.height);
 
     // 如果有背景层，更新蒙层位置
     if (backgroundObject && CanvasConfig.isCropBackground) {

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

@@ -697,6 +697,7 @@ export class LayerManager {
    * 初始化图层，确保有背景层、固定图层和一个空白图层
    */
   async initializeLayers() {
+	console.log("初始化图层",this.layers.value.length)
     // 如果没有任何图层，创建背景层、固定图层和一个空白图层
     if (this.layers.value.length === 0) {
       // 创建背景图层

src/component/Canvas/canvasExample.vue

@@ -417,7 +417,6 @@
 				}"
 				@change-canvas="changeCanvas"
 				@canvas-init="canvasInit"
-				@canvas-load-json-success="canvasLoadJsonSuccess"
 				isFixedErasable
 				showFixedLayer
 			>