feat: 修复画布部分bug

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

@@ -659,12 +659,15 @@ export class CanvasManager {
       console.error("图层管理器未设置，无法更改固定图层图片");
       return;
     }
+
     const command = new ChangeFixedImageCommand({
       canvas: this.canvas,
       layerManager: this.layerManager,
       imageUrl: imageUrl,
       targetLayerType: options.targetLayerType || "fixed", // background/fixed
-      options: options,
+      canvasWidth: this.canvasWidth,
+      canvasHeight: this.canvasHeight,
+      ...options,
     });
 
     command.undoable =

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

@@ -1,5 +1,6 @@
 import { fabric } from "fabric-with-all";
 import { findObjectById } from "../utils/helper";
+import { createRasterizedImage } from "../utils/SelectionToImage";
 
 /**
  * 图片导出管理器
@@ -36,7 +37,6 @@ export class ExportManager {
     try {
       // 检查是否为红绿图模式
       const isRedGreenMode = this.layerManager?.isInRedGreenMode?.() || false;
-
       // 如果指定了具体图层ID，导出指定图层
       if (layerId) {
         return this._exportSpecificLayer(
@@ -220,7 +220,8 @@ export class ExportManager {
     return this._exportWithCanvasSize(
       objectsToExport,
       expPicType,
-      restoreOpacityInRedGreen
+      restoreOpacityInRedGreen,
+      this.canvas.clipPath
     );
   }
 
@@ -250,6 +251,14 @@ export class ExportManager {
       }
     }
 
+    if (layer.fabricObject) {
+      // 通过ID在画布中查找真实对象
+      const realObj = this._findRealObjectById(layer.fabricObject.id);
+      if (realObj && realObj.visible !== false) {
+        realObjects.push(realObj);
+      }
+    }
+
     // 递归收集子图层的对象
     if (layer.children && layer.children.length > 0) {
       for (const childLayer of layer.children) {
@@ -569,13 +578,30 @@ export class ExportManager {
   async _exportWithCanvasSize(
     objectsToExport,
     expPicType,
-    restoreOpacityInRedGreen
+    restoreOpacityInRedGreen,
+    maskObject
   ) {
     // 使用当前画布尺寸
-    const canvasWidth = this.canvas.width;
-    const canvasHeight = this.canvas.height;
+    // const canvasWidth =
+    //   this.canvasManager?.canvasWidth?.value || this.canvas.width;
+    // const canvasHeight =
+    //   this.canvasManager?.canvasHeight?.value || this.canvas.height;
 
-    console.log(`普通模式导出，画布尺寸: ${canvasWidth}x${canvasHeight}`);
+    // console.log(`普通模式导出，画布尺寸: ${canvasWidth}x${canvasHeight}`);
+
+    //  使用图层栅格化的方法导出图片
+    const dataURL = await createRasterizedImage({
+      canvas: this.canvas,
+      fabricObjects: objectsToExport,
+      format: expPicType, // 导出格式
+      isReturenDataURL: true, // 返回数据URL
+      maskObject: maskObject ?? null, // 使用裁剪对象
+      trimWhitespace: true, // 裁剪空白
+      trimPadding: 0, // 裁剪边距
+    });
+
+    console.log("导出图片数据URL:", dataURL);
+    return dataURL;
 
     // 创建与画布相同尺寸的临时画布
     const scaleFactor = 2; // 高清导出
@@ -593,7 +619,7 @@ export class ExportManager {
 
     tempFabricCanvas.enableRetinaScaling = true;
     tempFabricCanvas.imageSmoothingEnabled = true;
-    tempFabricCanvas.setZoom(scaleFactor);
+    tempFabricCanvas.setZoom(1);
 
     try {
       // 克隆并添加所有对象到临时画布

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

@@ -1,6 +1,7 @@
 import { fabric } from "fabric-with-all";
 import { createLayer, LayerType, OperationType } from "../utils/layerHelper.js";
 import { BatchInitializeRedGreenModeCommand } from "../commands/RedGreenCommands.js";
+import { nextTick } from "vue";
 
 /**
  * 红绿图模式管理器
@@ -129,15 +130,17 @@ export class RedGreenModeManager {
   registerRedGreenMouseUpEvent() {
     this.canvas.on("mouse:up", (event) => {
       // 可以在这里添加更多逻辑，比如生成图片或更新状态
-      requestAnimationFrame(async () => {
-        if (!this.isInitialized) {
-          console.warn("红绿图模式未初始化，无法处理鼠标事件");
-          return;
-        }
-        if (this.onImageGenerated) {
-          const imageData = await this.canvasManager.exportImage();
-          this.onImageGenerated(imageData);
-        }
+      nextTick(() => {
+        requestAnimationFrame(async () => {
+          if (!this.isInitialized) {
+            console.warn("红绿图模式未初始化，无法处理鼠标事件");
+            return;
+          }
+          if (this.onImageGenerated) {
+            const imageData = await this.canvasManager.exportImage();
+            this.onImageGenerated(imageData);
+          }
+        });
       });
     });
   }