204 lines
5.2 KiB
JavaScript
204 lines
5.2 KiB
JavaScript
/**
|
||
* 液化管理器
|
||
* 负责管理液化操作的核心算法和变形处理
|
||
*
|
||
* 此版本使用增强的液化算法,支持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: true, // 优先使用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) {
|
||
console.log(`LiquifyManager 设置参数: ${param}=${value}`);
|
||
return this.enhancedManager.setParam(param, value);
|
||
}
|
||
|
||
/**
|
||
* 批量设置参数
|
||
* @param {Object} params 参数对象
|
||
*/
|
||
setParams(params) {
|
||
console.log("LiquifyManager 批量设置参数:", params);
|
||
return this.enhancedManager.setParams(params);
|
||
}
|
||
|
||
/**
|
||
* 获取当前参数
|
||
* @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;
|
||
}
|
||
|
||
console.log(`LiquifyManager.applyLiquify: 模式=${mode}, 坐标=(${x}, ${y}), 参数=`, params);
|
||
|
||
try {
|
||
// 直接调用EnhancedLiquifyManager的applyLiquify方法
|
||
// 避免重复设置参数,让EnhancedLiquifyManager处理参数设置
|
||
const resultData = await this.enhancedManager.applyLiquify(targetObject, mode, params, x, y);
|
||
|
||
// 确保返回结果数据
|
||
if (!resultData) {
|
||
console.warn("液化变形没有返回结果数据");
|
||
} else {
|
||
console.log("✅ 液化变形成功,返回图像数据尺寸:", resultData.width, "x", resultData.height);
|
||
}
|
||
|
||
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();
|
||
}
|
||
|
||
/**
|
||
* 开始液化操作(记录初始点)
|
||
* @param {Number} x 初始X坐标
|
||
* @param {Number} y 初始Y坐标
|
||
*/
|
||
startLiquifyOperation(x, y) {
|
||
return this.enhancedManager.startLiquifyOperation(x, y);
|
||
}
|
||
|
||
/**
|
||
* 结束液化操作
|
||
*/
|
||
endLiquifyOperation() {
|
||
return this.enhancedManager.endLiquifyOperation();
|
||
}
|
||
|
||
/**
|
||
* 释放资源
|
||
*/
|
||
dispose() {
|
||
if (this.enhancedManager) {
|
||
this.enhancedManager.dispose();
|
||
}
|
||
}
|
||
}
|