接入画布

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

@@ -0,0 +1,191 @@
+/**
+ * 液化管理器
+ * 负责管理液化操作的核心算法和变形处理
+ *
+ * 此版本使用增强的液化算法，支持GPU加速和优化的CPU处理
+ */
+import { EnhancedLiquifyManager } from "./EnhancedLiquifyManager";
+
+export class LiquifyManager {
+  /**
+   * 创建液化管理器
+   * @param {Object} options 配置选项
+   */
+  constructor(options = {}) {
+    // 将核心属性暴露给外部，保持API兼容性
+    this.canvas = options.canvas || null;
+    this.layerManager = options.layerManager || null;
+
+    // 配置参数
+    this.config = {
+      gridSize: options.gridSize || 20,
+      maxStrength: options.maxStrength || 100,
+      defaultParams: {
+        size: 50,
+        pressure: 0.5,
+        distortion: 0,
+        power: 0.5,
+      },
+    };
+
+    // 创建增强版液化管理器实例
+    this.enhancedManager = new EnhancedLiquifyManager({
+      // 配置选项
+      gridSize: options.gridSize || 15,
+      maxStrength: options.maxStrength || 100,
+      smoothingIterations: options.smoothingIterations || 2,
+      relaxFactor: options.relaxFactor || 0.25,
+      meshResolution: options.meshResolution || 64,
+      // 根据环境选择合适的渲染模式
+      forceCPU: true, // 默认不强制使用CPU
+      forceWebGL: false, // 优先使用WebGL模式
+      webglSizeThreshold: options.webglSizeThreshold || 500 * 500, // 降低阈值以更倾向使用WebGL
+      layerManager: options.layerManager || null,
+      canvas: options.canvas || null,
+    });
+
+    // 初始化液化管理器
+    this.initialize();
+  }
+
+  /**
+   * 初始化液化管理器
+   * @param {Object} options 配置选项
+   */
+  initialize(options = {}) {
+    // 更新基础属性
+    if (options.canvas) this.canvas = options.canvas;
+    if (options.layerManager) this.layerManager = options.layerManager;
+
+    // 初始化增强液化管理器
+    return this.enhancedManager.initialize({
+      canvas: this.canvas,
+      layerManager: this.layerManager,
+    });
+  }
+
+  /**
+   * 为液化操作准备图像
+   * @param {Object|String} target 目标对象或图层ID
+   * @returns {Promise<Object>} 准备结果
+   */
+  async prepareForLiquify(target) {
+    return this.enhancedManager.prepareForLiquify(target);
+  }
+
+  /**
+   * 设置液化模式
+   * @param {String} mode 液化模式
+   */
+  setMode(mode) {
+    return this.enhancedManager.setMode(mode);
+  }
+
+  /**
+   * 设置液化参数
+   * @param {String} param 参数名称
+   * @param {Number} value 参数值
+   */
+  setParam(param, value) {
+    return this.enhancedManager.setParam(param, value);
+  }
+
+  /**
+   * 获取当前参数
+   * @returns {Object} 当前参数对象
+   */
+  getParams() {
+    return this.enhancedManager.getParams();
+  }
+
+  /**
+   * 重置参数为默认值
+   */
+  resetParams() {
+    return this.enhancedManager.resetParams();
+  }
+
+  /**
+   * 应用液化效果
+   * @param {fabric.Object} targetObject 目标对象
+   * @param {String} mode 液化模式
+   * @param {Object} params 参数
+   * @param {Number} x X坐标
+   * @param {Number} y Y坐标
+   * @returns {ImageData} 处理后的图像数据
+   */
+  async applyLiquify(targetObject, mode, params, x, y) {
+    if (!this.enhancedManager || !targetObject) {
+      console.error("液化管理器未正确初始化");
+      return null;
+    }
+
+    // 确保设置正确的模式和参数
+    if (mode) {
+      this.enhancedManager.setMode(mode);
+    }
+
+    if (params) {
+      Object.entries(params).forEach(([key, value]) => {
+        this.enhancedManager.setParam(key, value);
+      });
+    }
+
+    // 应用液化变形
+    console.log(`应用液化变形, 模式=${mode}, 坐标=(${x}, ${y}), 参数=`, params);
+    try {
+      // 直接调用EnhancedLiquifyManager的applyLiquify方法
+      const resultData = await this.enhancedManager.applyLiquify(
+        targetObject,
+        mode,
+        params,
+        x,
+        y
+      );
+
+      // 确保返回结果数据
+      if (!resultData) {
+        console.warn("液化变形没有返回结果数据");
+      }
+
+      return resultData;
+    } catch (error) {
+      console.error("液化变形应用失败:", error);
+      return null;
+    }
+  }
+
+  /**
+   * 重置液化操作
+   * @returns {ImageData} 重置后的图像数据
+   */
+  reset() {
+    return this.enhancedManager.reset();
+  }
+
+  /**
+   * 检查图层是否可以液化
+   * @param {String} layerId 图层ID
+   * @returns {Object} 检查结果
+   */
+  checkLayerForLiquify(layerId) {
+    return this.enhancedManager.checkLayerForLiquify(layerId);
+  }
+
+  /**
+   * 获取当前状态信息
+   * @returns {Object} 状态信息
+   */
+  getStatus() {
+    return this.enhancedManager.getStatus();
+  }
+
+  /**
+   * 释放资源
+   */
+  dispose() {
+    if (this.enhancedManager) {
+      this.enhancedManager.dispose();
+    }
+  }
+}