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

src/component/Canvas/CanvasEditor/components/BrushControlPanel.vue

@@ -362,6 +362,11 @@ watch(
     setBrushSize(newSize);
   }
 );
+watch(()=>isVisible.value, (newVisible) => {
+  if (newVisible) {
+    setBrushSize(brushSize.value);
+  }
+})
 
 // 监听brushOpacity的变化，更新到BrushStore
 watch(

src/component/Canvas/CanvasEditor/components/LiquifyPanel.vue

@@ -258,6 +258,23 @@ const setClosePanel = ()=>{
 	closePanel.value = !closePanel.value
 }
 
+// 工具管理器和画布管理器
+const toolManager = inject("toolManager");
+const canvasManager = inject("canvasManager");
+
+watch(size, (newSize, oldSize) => {
+	setBrushIndicatorSize(newSize)
+
+})
+// 设置笔刷指示器大小
+function setBrushIndicatorSize(size) {
+  // 如果工具管理器存在，立即应用此更改
+	console.log(`=========== ${size}`,toolManager);
+  if (toolManager) {
+    toolManager.updateBrushIndicatorSize(size);
+  }
+}
+
 // 监听当前工具变化 - 参考 SelectionPanel 的实现方式
 watch(
   () => props.activeTool,
@@ -269,10 +286,11 @@ watch(
       // 如果面板未显示且有合适的目标对象，则显示面板
       if (!visible.value) {
         visible.value = true;
-		closePanel.value = true
+				closePanel.value = true
         // 检查是否有可液化的对象
         checkAndShowPanel();
       }
+			setBrushIndicatorSize(size.value)
     } else {
       visible.value = false; // 切换到其他工具时隐藏面板
       // 切换到其他工具，隐藏液化面板
@@ -1634,24 +1652,26 @@ function stopPressTimer() {
   color: #333;
   border: 1px solid rgba(0, 0, 0, 0.05);
   padding-bottom: 12px;
-   &.active{
+  &.active{
-	transform: translateY(100%);
+		transform: translateY(100%);
-	 > .btn{
+		> .btn{
-		> i{
+			> i{
-			transform: rotate(90deg);
+				transform: rotate(90deg);
+			}
 		}
 	}
-}
   > .btn{
-	width: 100%;
+		width: 100%;
-	text-align: center;
+		text-align: center;
-	cursor: pointer;
+		cursor: pointer;
-	
+		display: flex;
-	> i{
+		align-items: center;
-		font-size: 1.4rem;
+		justify-content: center;
-		display: block;
+		
-		transform: rotate(270deg);
+		> i{
-	}
+			font-size: 1.4rem;
+			transform: rotate(270deg);
+		}
   }
 }
 

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";
-
+		const isLiquifyMode = this.canvas.toolId === OperationType.LIQUIFY;// 检查是否在液化模式
-    if (!isBrushMode && !isEraserMode) {
+    if ([isBrushMode,isEraserMode,isLiquifyMode].every(v => !v)) return;
-      return;
-    }
 
     let hasChanges = false;
 
@@ -471,8 +471,12 @@ export class BrushIndicator {
    * @returns {Boolean} 是否显示
    */
   _shouldShowIndicator() {
-    // 检查画布是否在绘图模式
+		const isDrawingMode = this.canvas.isDrawingMode;// 检查画布是否在绘图模式
-    if (!this.canvas.isDrawingMode) return false;
+		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,
+      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,
       meshResolution: options.meshResolution || 64,
       // 根据环境选择合适的渲染模式
       forceCPU: true, // 默认不强制使用CPU