瞎改

src/component/Canvas/CanvasEditor/commands/RedGreenCommands.js

@@ -159,6 +159,8 @@ export class BatchInitializeRedGreenModeCommand extends Command {
             absolutePositioned: true,
             opacity: 0.01, // 设置为几乎透明
             id: generateId("redGreenImageMask_"),
+			rx: 15,
+			ry: 15,
           });
           // this.canvas.add(this.redGreenImageMask);
           this.canvas.clipPath = this.redGreenImageMask;

src/component/Canvas/CanvasEditor/index.vue

@@ -503,7 +503,7 @@ onMounted(async () => {
     clearTimeout(trailingTimeout);
     trailingTimeout = setTimeout(() => {
 	  optimizeCanvasRendering(canvasManager.canvas, ()=> handleWindowResize());
-    }, 200);
+    }, 1000);
   });
   observer.observe(canvasContainerRef.value);
   // 使用window的resize事件代替ResizeObserver
@@ -566,38 +566,38 @@ async function handleWindowResize() {
   if(!canvasManager) return;
   await updateCanvasSize();
   // 确保显示的缩放信息是最新的
-  currentZoom.value = Math.round(canvasManager.canvas.getZoom() * 100);
+  await setInitZoom();
-  setInitZoom();
   await new Promise(requestAnimationFrame);
   await layerManager?.updateLayersObjectsInteractivity?.();
 }
 
-function setInitZoom(){
+async function setInitZoom(){
-  if (props.config.initZoom) {
+  if (props.config.initZoom && !props.enabledRedGreenMode) {
     const width = canvasManager.width;
     const height = canvasManager.height;
-    const cwidth = props.config.width;
+    const cwidth = canvasWidth.value;
-    const cheight = props.config.height;
+    const cheight = canvasHeight.value;
     let zoom = Math.min(1, width / cwidth, height / cheight);
     if (zoom < 1) zoom -= 0.05;
-    setZoom(zoom); // 设置画布缩放
+    await setZoom(zoom); // 设置画布缩放
+  }else{
+    currentZoom.value = Math.round(canvasManager.canvas.getZoom() * 100);
   }
 }
 
 function resetZoom() {
   canvasManager.resetZoom();
 }
-function setZoom(zoom) {
+async function setZoom(zoom) {
-  setTimeout(() => {
+  await new Promise(requestAnimationFrame);
-    if (!canvasManager) return;
+  if (!canvasManager) return;
-    const newZoom = Math.max(zoom, 0.1);
+  const newZoom = Math.max(zoom, 0.1);
-    // 使用画布中心作为缩放点
+  // 使用画布中心作为缩放点
-    const centerPoint = {
+  const centerPoint = {
-      x: canvasManager.canvas.width / 2,
+    x: canvasManager.canvas.width / 2,
-      y: canvasManager.canvas.height / 2,
+    y: canvasManager.canvas.height / 2,
-    };
+  };
-    canvasManager.animateZoom(centerPoint, newZoom);
+  canvasManager.animateZoom(centerPoint, newZoom);
-  });
 }
 
 function zoomIn() {
@@ -1467,7 +1467,7 @@ defineExpose({
 	position: absolute;
 }
 
-.background-grid {
+.canvas-container {
   --offsetX: 50%;
   --offsetY: 50%;
   --size: 10px;

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

@@ -1390,7 +1390,7 @@ export class CanvasManager {
               // 重置画布数据
               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());
               // 验证图层关联关系  -  稳定后可以注释

src/component/Canvas/CanvasEditor/utils/imageHelper.js

@@ -2208,8 +2208,13 @@ export const resizeImage = async (base64, width, height) => {
       const canvas = document.createElement("canvas");
       canvas.width = width;
       canvas.height = height;
+	  const scale = height / img.height;
+	  const w = img.width * scale;
+	  const h = img.height * scale;
+	  const x = (width - w) / 2;
+	  const y = 0;
       const ctx = canvas.getContext("2d");
-      ctx.drawImage(img, 0, 0, width, height);
+      ctx.drawImage(img, x, y, w, h);
       resolve(canvas.toDataURL());
     };
     img.onerror = reject;