合并画布

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

@@ -39,6 +39,7 @@ export class BatchInitializeRedGreenModeCommand extends Command {
     // 存储加载的图片对象
     this.clothingImage = null;
     this.redGreenImage = null;
+    this.redGreenImageMask = null;
 
     // 存储新创建的图层ID
     this.newEmptyLayerId = null;
@@ -68,7 +69,11 @@ export class BatchInitializeRedGreenModeCommand extends Command {
         // 3. 保存原始状态
         this.originalBackgroundObject = backgroundLayer.fabricObject
           ? {
-              ...backgroundLayer.fabricObject.toObject(),
+              ...backgroundLayer.fabricObject.toObject([
+                "id",
+                "type",
+                "layerId",
+              ]),
               ref: backgroundLayer.fabricObject,
             }
           : null;
@@ -136,12 +141,31 @@ export class BatchInitializeRedGreenModeCommand extends Command {
           // clipPathImg.set({
           //   absolutePositioned: true,
           // });
-          this.redGreenImage.set({
-            absolutePositioned: true,
+
+          // 克隆衣服底图作为裁剪对象
+          this.redGreenImageMask = await new Promise((resolve, reject) => {
+            this.redGreenImage.clone((clonedImg) => {
+              if (!clonedImg) {
+                reject(new Error("无法克隆红绿图"));
+                return;
+              }
+              resolve(clonedImg);
+            });
           });
 
+          this.redGreenImageMask.set({
+            absolutePositioned: true,
+            opacity: 0.01, // 设置为几乎透明
+            type: "redGreenImageMask",
+            id: generateId("redGreenImageMask_"),
+          });
+          // this.canvas.add(this.redGreenImageMask);
+          this.canvas.clipPath = this.redGreenImageMask;
+          this.redGreenImageMask.sendToBack();
+          this.redGreenImageMask.setCoords();
+
           const activeLayer = this.layerManager.getActiveLayer();
-          activeLayer.clippingMask = this.redGreenImage.toObject(["id"]);
+          // activeLayer.clippingMask = this.redGreenImageMask.toObject(["id"]);
           activeLayer.opacity = this.normalLayerOpacity;
           // activeLayer?.fabricObjects.forEach((obj) => {
           //   obj.set({
@@ -181,9 +205,9 @@ export class BatchInitializeRedGreenModeCommand extends Command {
   async _createAndActivateEmptyLayer() {
     // 创建新的空白图层
     const newLayerName = "绘制图层";
-    const newLayerId = this.layerManager.createLayer(
+    const newLayerId = await this.layerManager.createLayer(
       newLayerName,
-      LayerType.GROUP,
+      LayerType.BITMAP,
       {
         undoable: false,
       }
@@ -306,7 +330,7 @@ export class BatchInitializeRedGreenModeCommand extends Command {
    */
   async _setupBackgroundLayer(backgroundLayer, clothingImage) {
     let backgroundObject = backgroundLayer.fabricObject;
-    let { object } = findObjectById(this.canvas, backgroundObject.id);
+    const { object } = findObjectById(this.canvas, backgroundObject.id);
 
     if (!object) {
       // 创建白色背景矩形
@@ -389,12 +413,16 @@ export class BatchInitializeRedGreenModeCommand extends Command {
 
     // 清除固定图层原有内容
     if (fixedLayer.fabricObject) {
-      this.canvas.remove(fixedLayer.fabricObject);
+      const { object } = findObjectById(
+        this.canvas,
+        fixedLayer.fabricObject.id
+      );
+      if (object) this.canvas.remove(object);
     }
 
     // 添加到画布和固定图层
     this.canvas.add(img);
-    fixedLayer.fabricObject = img;
+    fixedLayer.fabricObject = img.toObject(["id", "type", "layerId"]);
     this.clothingImage = img;
   }
 
@@ -424,15 +452,15 @@ export class BatchInitializeRedGreenModeCommand extends Command {
     // 清除普通图层原有内容
     if (normalLayer.fabricObjects) {
       normalLayer.fabricObjects.forEach((obj) => {
-        this.canvas.remove(obj);
+        const { object } = findObjectById(this.canvas, obj.id);
+        if (object) {
+          this.canvas.remove(object);
+        }
       });
     }
-
-    // 给img设置裁剪，裁剪图为衣服底图
-
     // 添加到画布和普通图层
     this.canvas.add(img);
-    normalLayer.fabricObjects = [img];
+    normalLayer.fabricObjects = [img.toObject(["id", "type", "layerId"])];
     this.redGreenImage = img;
   }