feat: 优化跨层级移动和套索抠图命令，支持异步执行，改进画布刷新逻辑，新增背景裁剪选项

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

@@ -28,6 +28,7 @@ export class ExportManager {
     const {
       isContainBg = false,
       isContainFixed = false,
+      isCropByBg = false, // 是否使用背景大小裁剪
       layerId = "",
       layerIdArray = [],
       expPicType = "png",
@@ -43,7 +44,8 @@ export class ExportManager {
           layerId,
           expPicType,
           isRedGreenMode,
-          restoreOpacityInRedGreen
+          restoreOpacityInRedGreen,
+          isCropByBg
         );
       }
 
@@ -52,10 +54,11 @@ export class ExportManager {
         return this._exportMultipleLayers(
           layerIdArray,
           expPicType,
-          isContainBg,
           isContainFixed,
           isRedGreenMode,
-          restoreOpacityInRedGreen
+          restoreOpacityInRedGreen,
+          isContainBg,
+          isCropByBg
         );
       }
 
@@ -65,7 +68,8 @@ export class ExportManager {
         isContainBg,
         isContainFixed,
         isRedGreenMode,
-        restoreOpacityInRedGreen
+        restoreOpacityInRedGreen,
+        isCropByBg
       );
     } catch (error) {
       console.error("导出图片失败:", error);
@@ -143,7 +147,8 @@ export class ExportManager {
     isContainBg,
     isContainFixed,
     isRedGreenMode,
-    restoreOpacityInRedGreen
+    restoreOpacityInRedGreen,
+    isCropByBg
   ) {
     if (!this.layerManager) {
       throw new Error("图层管理器未初始化");
@@ -193,7 +198,8 @@ export class ExportManager {
     isContainBg,
     isContainFixed,
     isRedGreenMode,
-    restoreOpacityInRedGreen
+    restoreOpacityInRedGreen,
+    isCropByBg
   ) {
     // 按图层顺序收集对象（从底到顶）
     const objectsToExport = this._collectObjectsByLayerOrder(
@@ -215,13 +221,38 @@ export class ExportManager {
         restoreOpacityInRedGreen
       );
     }
-
+    let canvasClipPath = this.canvas.clipPath;
+    if (isCropByBg) {
+      const cropWidth =
+        this.canvasManager?.canvasWidth?.value ||
+        this.canvas?.canvasWidth ||
+        this.canvas.width;
+      const cropHeight =
+        this.canvasManager?.canvasHeight?.value ||
+        this.canvas?.canvasHeight ||
+        this.canvas.height;
+      canvasClipPath = new fabric.Rect({
+        left: this.canvas.width / 2,
+        top: this.canvas.height / 2,
+        width: cropWidth,
+        height: cropHeight,
+        originX: "center",
+        originY: "center",
+        fill: "#fff",
+        stroke: "transparent",
+        strokeWidth: 0,
+      });
+      canvasClipPath.set({
+        absolutePositioned: true,
+      });
+      canvasClipPath.setCoords();
+    }
     // 普通模式使用画布尺寸
     return this._exportWithCanvasSize(
       objectsToExport,
       expPicType,
       restoreOpacityInRedGreen,
-      this.canvas.clipPath
+      canvasClipPath
     );
   }