feat: 裁剪组裁剪跟随选择组移动

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

@@ -216,9 +216,7 @@ export class EnhancedLiquifyManager {
     // 计算图像大小
     const pixelCount = imageData.width * imageData.height;
 
-    console.log(
-      `液化选择渲染器: 图像大小=${pixelCount}像素, WebGL可用=${this.isWebGLAvailable}`
-    );
+    console.log(`液化选择渲染器: 图像大小=${pixelCount}像素, WebGL可用=${this.isWebGLAvailable}`);
 
     // 默认使用CPU渲染器
     this.activeRenderer = this.cpuRenderer;
@@ -249,11 +247,7 @@ export class EnhancedLiquifyManager {
       this.activeRenderer = this.webglRenderer;
       this.renderMode = "webgl";
     } else {
-      console.log(
-        `液化功能: 使用CPU渲染模式${
-          !this.isWebGLAvailable ? " (WebGL不可用)" : ""
-        }`
-      );
+      console.log(`液化功能: 使用CPU渲染模式${!this.isWebGLAvailable ? " (WebGL不可用)" : ""}`);
     }
   }
 
@@ -318,16 +312,11 @@ export class EnhancedLiquifyManager {
       this.params[param] = value;
 
       // 同步更新当前渲染器 - 关键修复：确保参数正确传递
-      if (
-        this.activeRenderer &&
-        typeof this.activeRenderer.setParam === "function"
-      ) {
+      if (this.activeRenderer && typeof this.activeRenderer.setParam === "function") {
         console.log(`EnhancedLiquifyManager 设置参数: ${param}=${value}`);
         this.activeRenderer.setParam(param, value);
       } else {
-        console.warn(
-          `EnhancedLiquifyManager: 无法设置参数 ${param}，渲染器未就绪`
-        );
+        console.warn(`EnhancedLiquifyManager: 无法设置参数 ${param}，渲染器未就绪`);
       }
 
       return true;
@@ -382,25 +371,17 @@ export class EnhancedLiquifyManager {
    * @param {Number} y 初始Y坐标
    */
   startLiquifyOperation(x, y) {
-    if (
-      this.activeRenderer &&
-      typeof this.activeRenderer.startDeformation === "function"
-    ) {
+    if (this.activeRenderer && typeof this.activeRenderer.startDeformation === "function") {
       this.activeRenderer.startDeformation(x, y);
     }
-    console.log(
-      `开始液化操作，渲染模式=${this.renderMode}, 初始点: (${x}, ${y})`
-    );
+    console.log(`开始液化操作，渲染模式=${this.renderMode}, 初始点: (${x}, ${y})`);
   }
 
   /**
    * 结束液化操作
    */
   endLiquifyOperation() {
-    if (
-      this.activeRenderer &&
-      typeof this.activeRenderer.endDeformation === "function"
-    ) {
+    if (this.activeRenderer && typeof this.activeRenderer.endDeformation === "function") {
       this.activeRenderer.endDeformation();
     }
     console.log(`结束液化操作，渲染模式=${this.renderMode}`);
@@ -443,9 +424,7 @@ export class EnhancedLiquifyManager {
 
     // 坐标边界检查
     if (x < 0 || x >= imageWidth || y < 0 || y >= imageHeight) {
-      console.warn(
-        `液化坐标超出图像范围: (${x}, ${y}), 图像尺寸: ${imageWidth}x${imageHeight}`
-      );
+      console.warn(`液化坐标超出图像范围: (${x}, ${y}), 图像尺寸: ${imageWidth}x${imageHeight}`);
       return null;
     }
 
@@ -510,9 +489,7 @@ export class EnhancedLiquifyManager {
       console.log(
         `液化性能数据: 模式=${this.renderMode}, 平均耗时=${avgTime.toFixed(
           2
-        )}ms, 图像尺寸=${this.originalImageData?.width}x${
-          this.originalImageData?.height
-        }`
+        )}ms, 图像尺寸=${this.originalImageData?.width}x${this.originalImageData?.height}`
       );
     }
 
@@ -604,8 +581,7 @@ export class EnhancedLiquifyManager {
     const singleObject = objectsToCheck.length === 1;
     const isImage =
       singleObject &&
-      (objectsToCheck[0].type === "image" ||
-        objectsToCheck[0].type === "rasterized-layer");
+      (objectsToCheck[0].type === "image" || objectsToCheck[0].type === "rasterized-layer");
 
     // 检查是否为组
     const isGroup =
@@ -655,19 +631,14 @@ export class EnhancedLiquifyManager {
         tempCanvas.height = fabricObject.height;
         const tempCtx = tempCanvas.getContext("2d");
 
-        console.log(
-          `创建临时Canvas，尺寸: ${tempCanvas.width}x${tempCanvas.height}`
-        );
+        console.log(`创建临时Canvas，尺寸: ${tempCanvas.width}x${tempCanvas.height}`);
 
         // 处理不同的图像源
         if (fabricObject._element) {
           console.log("使用 _element 绘制图像");
 
           // 检查_element是否有效
-          if (
-            !fabricObject._element.complete &&
-            fabricObject._element.tagName === "IMG"
-          ) {
+          if (!fabricObject._element.complete && fabricObject._element.tagName === "IMG") {
             console.log("图像未加载完成，等待加载...");
             fabricObject._element.onload = () => {
               try {
@@ -678,12 +649,7 @@ export class EnhancedLiquifyManager {
                   fabricObject.width,
                   fabricObject.height
                 );
-                const imageData = tempCtx.getImageData(
-                  0,
-                  0,
-                  tempCanvas.width,
-                  tempCanvas.height
-                );
+                const imageData = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height);
                 console.log("✅ 图像加载完成后获取数据成功");
                 resolve(imageData);
               } catch (error) {
@@ -698,17 +664,8 @@ export class EnhancedLiquifyManager {
           }
 
           // 直接绘制已加载的图像
-          tempCtx.drawImage(
-            fabricObject._element,
-            0,
-            0,
-            fabricObject.width,
-            fabricObject.height
-          );
-        } else if (
-          fabricObject.getSrc &&
-          typeof fabricObject.getSrc === "function"
-        ) {
+          tempCtx.drawImage(fabricObject._element, 0, 0, fabricObject.width, fabricObject.height);
+        } else if (fabricObject.getSrc && typeof fabricObject.getSrc === "function") {
           console.log("使用 getSrc() 方法获取图像源");
 
           // 通过URL创建图像
@@ -717,24 +674,11 @@ export class EnhancedLiquifyManager {
 
           img.onload = () => {
             try {
-              console.log(
-                `图像加载成功，原始尺寸: ${img.naturalWidth}x${img.naturalHeight}`
-              );
+              console.log(`图像加载成功，原始尺寸: ${img.naturalWidth}x${img.naturalHeight}`);
 
-              tempCtx.drawImage(
-                img,
-                0,
-                0,
-                fabricObject.width,
-                fabricObject.height
-              );
+              tempCtx.drawImage(img, 0, 0, fabricObject.width, fabricObject.height);
 
-              const imageData = tempCtx.getImageData(
-                0,
-                0,
-                tempCanvas.width,
-                tempCanvas.height
-              );
+              const imageData = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height);
 
               console.log("✅ 通过URL获取图像数据成功");
               resolve(imageData);
@@ -762,20 +706,9 @@ export class EnhancedLiquifyManager {
 
           img.onload = () => {
             try {
-              tempCtx.drawImage(
-                img,
-                0,
-                0,
-                fabricObject.width,
-                fabricObject.height
-              );
+              tempCtx.drawImage(img, 0, 0, fabricObject.width, fabricObject.height);
 
-              const imageData = tempCtx.getImageData(
-                0,
-                0,
-                tempCanvas.width,
-                tempCanvas.height
-              );
+              const imageData = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height);
 
               console.log("✅ 通过src属性获取图像数据成功");
               resolve(imageData);
@@ -795,20 +728,13 @@ export class EnhancedLiquifyManager {
           return;
         } else {
           console.error("无法找到有效的图像源");
-          reject(
-            new Error("图像对象缺少有效的图像源（_element, getSrc, 或 src）")
-          );
+          reject(new Error("图像对象缺少有效的图像源（_element, getSrc, 或 src）"));
           return;
         }
 
         // 如果走到这里，说明使用了_element直接绘制
         try {
-          const imageData = tempCtx.getImageData(
-            0,
-            0,
-            tempCanvas.width,
-            tempCanvas.height
-          );
+          const imageData = tempCtx.getImageData(0, 0, tempCanvas.width, tempCanvas.height);
 
           console.log(
             `✅ 获取图像数据成功: 对象尺寸=${fabricObject.width}x${fabricObject.height}, ` +