合并画布代码

src/component/Canvas/CanvasEditor/managers/liquify/EnhancedLiquifyManager.js

@@ -4,6 +4,7 @@
  */
 import { LiquifyWebGLManager } from "./LiquifyWebGLManager";
 import { LiquifyCPUManager } from "./LiquifyCPUManager";
+import { LayerType } from "../../utils/layerHelper";
 
 export class EnhancedLiquifyManager {
   /**
@@ -313,16 +314,40 @@ export class EnhancedLiquifyManager {
     if (param in this.params) {
       this.params[param] = value;
 
-      // 同步更新当前渲染器
-      if (this.activeRenderer) {
+      // 同步更新当前渲染器 - 关键修复：确保参数正确传递
+      if (
+        this.activeRenderer &&
+        typeof this.activeRenderer.setParam === "function"
+      ) {
+        console.log(`EnhancedLiquifyManager 设置参数: ${param}=${value}`);
         this.activeRenderer.setParam(param, value);
+      } else {
+        console.warn(
+          `EnhancedLiquifyManager: 无法设置参数 ${param}，渲染器未就绪`
+        );
       }
 
       return true;
     }
+
+    console.warn(`EnhancedLiquifyManager: 无效参数 ${param}`);
     return false;
   }
 
+  /**
+   * 批量设置参数
+   * @param {Object} params 参数对象
+   */
+  setParams(params) {
+    console.log("EnhancedLiquifyManager 批量设置参数:", params);
+
+    if (params && typeof params === "object") {
+      Object.entries(params).forEach(([key, value]) => {
+        this.setParam(key, value);
+      });
+    }
+  }
+
   /**
    * 获取当前参数
    * @returns {Object} 当前参数对象
@@ -348,6 +373,36 @@ export class EnhancedLiquifyManager {
     }
   }
 
+  /**
+   * 开始液化操作（记录初始点）
+   * @param {Number} x 初始X坐标
+   * @param {Number} y 初始Y坐标
+   */
+  startLiquifyOperation(x, y) {
+    if (
+      this.activeRenderer &&
+      typeof this.activeRenderer.startDeformation === "function"
+    ) {
+      this.activeRenderer.startDeformation(x, y);
+    }
+    console.log(
+      `开始液化操作，渲染模式=${this.renderMode}, 初始点: (${x}, ${y})`
+    );
+  }
+
+  /**
+   * 结束液化操作
+   */
+  endLiquifyOperation() {
+    if (
+      this.activeRenderer &&
+      typeof this.activeRenderer.endDeformation === "function"
+    ) {
+      this.activeRenderer.endDeformation();
+    }
+    console.log(`结束液化操作，渲染模式=${this.renderMode}`);
+  }
+
   /**
    * 应用液化变形
    * @param {Object} target 目标对象
@@ -468,7 +523,9 @@ export class EnhancedLiquifyManager {
       // 注意：这里不自动切换，因为可能会导致中途渲染结果不一致
     }
   }
-
+  setRealtimeUpdater(realtimeUpdater) {
+    this.realtimeUpdater = realtimeUpdater;
+  }
   /**
    * 重置液化操作
    * @returns {ImageData} 重置后的图像数据
@@ -519,7 +576,7 @@ export class EnhancedLiquifyManager {
 
     // 检查图层是否为空
     let objectsToCheck = [];
-    if (layer.isBackground || layer.type === "background") {
+    if (layer.isBackground || layer.type === "background" || layer.isFixed) {
       // 背景图层使用 fabricObject (单数)
       if (layer.fabricObject) {
         objectsToCheck = [layer.fabricObject];
@@ -548,7 +605,10 @@ export class EnhancedLiquifyManager {
         objectsToCheck[0].type === "rasterized-layer");
 
     // 检查是否为组
-    const isGroup = objectsToCheck.some((obj) => obj.type === "group");
+    const isGroup =
+      objectsToCheck.some((obj) => obj.type === "group") ||
+      layer.type === LayerType.GROUP ||
+      layer.children?.length > 0;
 
     // 如果不是单一图像，需要栅格化
     const needsRasterization = !isImage || isGroup;
@@ -572,26 +632,34 @@ export class EnhancedLiquifyManager {
   async _getImageData(fabricObject) {
     return new Promise((resolve, reject) => {
       try {
-        // 创建临时canvas
+        // 创建临时canvas - 关键修复：使用原始图像尺寸，不考虑fabric对象的缩放
         const tempCanvas = document.createElement("canvas");
-        tempCanvas.width = fabricObject.width * fabricObject.scaleX;
-        tempCanvas.height = fabricObject.height * fabricObject.scaleY;
+        // 使用图像的原始尺寸，而不是缩放后的尺寸
+        tempCanvas.width = fabricObject.width;
+        tempCanvas.height = fabricObject.height;
         const tempCtx = tempCanvas.getContext("2d");
 
         // 如果对象有图像元素
         if (fabricObject._element) {
+          // 绘制原始尺寸的图像
           tempCtx.drawImage(
             fabricObject._element,
             0,
             0,
-            tempCanvas.width,
-            tempCanvas.height
+            fabricObject.width,
+            fabricObject.height
           );
         } else if (fabricObject.getSrc) {
           // 通过URL创建图像
           const img = new Image();
           img.onload = () => {
-            tempCtx.drawImage(img, 0, 0, tempCanvas.width, tempCanvas.height);
+            tempCtx.drawImage(
+              img,
+              0,
+              0,
+              fabricObject.width,
+              fabricObject.height
+            );
             const imageData = tempCtx.getImageData(
               0,
               0,
@@ -615,6 +683,13 @@ export class EnhancedLiquifyManager {
           tempCanvas.width,
           tempCanvas.height
         );
+
+        console.log(
+          `获取图像数据: 对象尺寸=${fabricObject.width}x${fabricObject.height}, ` +
+            `对象缩放=(${fabricObject.scaleX}, ${fabricObject.scaleY}), ` +
+            `图像数据尺寸=${imageData.width}x${imageData.height}`
+        );
+
         resolve(imageData);
       } catch (error) {
         reject(error);