画布液化功能优化（图片清晰度、添加指示器）

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

@@ -1,4 +1,5 @@
 import { fabric } from "fabric-with-all";
+import {  OperationType } from "../utils/layerHelper";
 
 /**
  * 笔刷指示器
@@ -94,6 +95,7 @@ export class BrushIndicator {
    * @private
    */
   _syncCanvasProperties() {
+		console.log("==========","笔刷同步大小")
     if (!this.staticCanvas || !this.canvas) return;
 
     // 检查是否为笔刷或橡皮擦模式，非相关模式直接返回
@@ -103,10 +105,8 @@ export class BrushIndicator {
       this.canvas.isDrawingMode &&
       this.canvas.freeDrawingBrush &&
       this.canvas.freeDrawingBrush.type === "eraser";
-
-    if (!isBrushMode && !isEraserMode) {
-      return;
-    }
+		const isLiquifyMode = this.canvas.toolId === OperationType.LIQUIFY;// 检查是否在液化模式
+    if ([isBrushMode,isEraserMode,isLiquifyMode].every(v => !v)) return;
 
     let hasChanges = false;
 
@@ -471,8 +471,12 @@ export class BrushIndicator {
    * @returns {Boolean} 是否显示
    */
   _shouldShowIndicator() {
-    // 检查画布是否在绘图模式
-    if (!this.canvas.isDrawingMode) return false;
+		const isDrawingMode = this.canvas.isDrawingMode;// 检查画布是否在绘图模式
+		const isLiquifyMode = this.canvas.toolId === OperationType.LIQUIFY;// 检查是否在液化模式
+
+		// console.log(`笔刷指示器\n绘图模式:${isDrawingMode}\n液化模式:${isLiquifyMode}`)
+    // 检查画布是否在绘图模式OR液化模式
+		if ([isDrawingMode, isLiquifyMode].every(v => !v)) return false;
 
     // 检查是否有笔刷
     if (!this.canvas.freeDrawingBrush) return false;

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

@@ -373,6 +373,8 @@ export class ToolManager {
     // 设置工具特定的状态
     const tool = this.tools[toolId];
     if (tool && typeof tool.setup === "function") {
+			console.log(`画布切换工具:${tool.name}(${toolId})`)
+			this.canvas.toolId = toolId;
       tool.setup();
     }
 
@@ -450,6 +452,7 @@ export class ToolManager {
     if (!this.canvas) return;
     this.canvas.isDrawingMode = false;
     this.canvas.selection = true;
+		
   }
 
   /**
@@ -750,6 +753,7 @@ export class ToolManager {
         detail: panelDetail,
       })
     );
+		this._enableBrushIndicator();
   }
 
   /**
@@ -1465,6 +1469,7 @@ export class ToolManager {
       OperationType.ERASER,
       OperationType.RED_BRUSH,
       OperationType.GREEN_BRUSH,
+			OperationType.LIQUIFY,
     ];
 
     return brushTools.includes(currentTool);

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

@@ -22,13 +22,13 @@ export class EnhancedLiquifyManager {
       // 是否强制使用WebGL模式
       forceWebGL: options.forceWebGL || false,
       // 网格大小
-      gridSize: options.gridSize || 15,
+      gridSize: options.gridSize || 8,
       // 最大变形强度
-      maxStrength: options.maxStrength || 100,
+      maxStrength: options.maxStrength || 200,
       // 平滑迭代次数
-      smoothingIterations: options.smoothingIterations || 2,
+      smoothingIterations: options.smoothingIterations || 1,
       // 网格弹性因子
-      relaxFactor: options.relaxFactor || 0.25,
+      relaxFactor: options.relaxFactor || 0.05,
       // WebGL网格精度
       meshResolution: options.meshResolution || 64,
     };

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

@@ -31,10 +31,10 @@ export class LiquifyManager {
     // 创建增强版液化管理器实例
     this.enhancedManager = new EnhancedLiquifyManager({
       // 配置选项
-      gridSize: options.gridSize || 15,
-      maxStrength: options.maxStrength || 100,
-      smoothingIterations: options.smoothingIterations || 2,
-      relaxFactor: options.relaxFactor || 0.25,
+      gridSize: options.gridSize || 8,
+      maxStrength: options.maxStrength || 200,
+      smoothingIterations: options.smoothingIterations || 1,
+      relaxFactor: options.relaxFactor || 0.05,
       meshResolution: options.meshResolution || 64,
       // 根据环境选择合适的渲染模式
       forceCPU: true, // 默认不强制使用CPU