/** * 液化功能集成测试 * 用于在浏览器环境中测试完整的液化工作流程 */ import { LiquifyCPUManager } from "../managers/liquify/LiquifyCPUManager.js"; import { LiquifyWebGLManager } from "../managers/liquify/LiquifyWebGLManager.js"; import { LiquifyRealTimeUpdater } from "../managers/liquify/LiquifyRealTimeUpdater.js"; import { EnhancedLiquifyManager } from "../managers/liquify/EnhancedLiquifyManager.js"; // 集成测试结果 let testResults = { totalTests: 0, passedTests: 0, failedTests: 0, errors: [], }; /** * 创建测试图像数据 */ function createTestImageData(width = 100, height = 100) { const imageData = new ImageData(width, height); const data = imageData.data; // 创建一个简单的渐变图案用于测试 for (let y = 0; y < height; y++) { for (let x = 0; x < width; x++) { const index = (y * width + x) * 4; data[index] = (x / width) * 255; // Red data[index + 1] = (y / height) * 255; // Green data[index + 2] = 128; // Blue data[index + 3] = 255; // Alpha } } return imageData; } /** * 创建测试Canvas */ function createTestCanvas(width = 200, height = 200) { const canvas = document.createElement("canvas"); canvas.width = width; canvas.height = height; return canvas; } /** * 创建模拟Fabric对象 */ function createMockFabricObject(imageData) { return { left: 50, top: 50, width: imageData.width, height: imageData.height, scaleX: 1, scaleY: 1, angle: 0, flipX: false, flipY: false, _element: null, calcTransformMatrix: function () { return [this.scaleX, 0, 0, this.scaleY, this.left, this.top]; }, set: function (props) { Object.assign(this, props); }, }; } /** * 运行单个测试 */ async function runTest(testName, testFunction) { testResults.totalTests++; try { console.log(`🧪 运行测试: ${testName}`); await testFunction(); testResults.passedTests++; console.log(`✅ 测试通过: ${testName}`); } catch (error) { testResults.failedTests++; testResults.errors.push({ testName, error: error.message }); console.error(`❌ 测试失败: ${testName}`, error); } } /** * 测试CPU管理器基本功能 */ async function testCPUManagerBasics() { const manager = new LiquifyCPUManager(); const testImageData = createTestImageData(); // 初始化 manager.initialize(testImageData); // 设置参数 manager.setParams({ size: 50, pressure: 0.5, distortion: 0.3, power: 0.8, }); // 设置模式 manager.setMode("push"); // 应用变形 const result = manager.applyDeformation(50, 50); if ( !result || result.width !== testImageData.width || result.height !== testImageData.height ) { throw new Error("CPU管理器变形结果无效"); } // 测试不同模式 const modes = [ "push", "clockwise", "counterclockwise", "pinch", "expand", "reconstruct", ]; for (const mode of modes) { manager.setMode(mode); const modeResult = manager.applyDeformation(25, 25); if (!modeResult) { throw new Error(`模式 ${mode} 变形失败`); } } } /** * 测试WebGL管理器基本功能 */ async function testWebGLManagerBasics() { const manager = new LiquifyWebGLManager(); const testImageData = createTestImageData(); try { // 初始化 manager.initialize(testImageData); // 检查WebGL是否可用 if (!manager.initialized) { console.warn("WebGL不可用,跳过WebGL测试"); return; } // 设置参数 manager.setParams({ size: 50, pressure: 0.5, distortion: 0.3, power: 0.8, }); // 设置模式 manager.setMode("push"); // 应用变形 const result = manager.applyDeformation(50, 50); if ( !result || result.width !== testImageData.width || result.height !== testImageData.height ) { throw new Error("WebGL管理器变形结果无效"); } } catch (error) { if (error.message.includes("WebGL")) { console.warn("WebGL不支持,跳过WebGL测试"); return; } throw error; } } /** * 测试实时更新器功能 */ async function testRealTimeUpdater() { const canvas = createTestCanvas(); const testImageData = createTestImageData(); const mockFabricObject = createMockFabricObject(testImageData); // 模拟fabric Canvas const fabricCanvas = { getObjects: () => [mockFabricObject], remove: () => {}, insertAt: () => {}, renderAll: () => {}, }; const updater = new LiquifyRealTimeUpdater(fabricCanvas); // 设置目标对象 updater.setTargetObject(mockFabricObject); // 测试快速更新 await updater.updateImage(testImageData, true); // 测试完整更新 await updater.updateImage(testImageData, false); // 测试待处理更新 updater.pendingImageData = testImageData; await updater.processPendingUpdates(); // 清理 updater.dispose(); } /** * 测试增强液化管理器 */ async function testEnhancedLiquifyManager() { const manager = new EnhancedLiquifyManager(); const testImageData = createTestImageData(); const mockFabricObject = createMockFabricObject(testImageData); // 初始化 const result = await manager.prepareForLiquify(mockFabricObject); if (!result || !result.originalImageData) { throw new Error("增强液化管理器初始化失败"); } // 设置参数 manager.setParams({ size: 50, pressure: 0.5, distortion: 0.3, power: 0.8, }); // 应用液化 const liquifyResult = await manager.applyLiquify( mockFabricObject, "push", { size: 50, pressure: 0.5, distortion: 0.3, power: 0.8 }, 50, 50 ); if (!liquifyResult) { throw new Error("液化应用失败"); } } /** * 测试坐标转换准确性 */ async function testCoordinateConversion() { const testImageData = createTestImageData(200, 200); const mockFabricObject = createMockFabricObject(testImageData); // 测试不同的缩放情况 const testCases = [ { scaleX: 1, scaleY: 1, flipX: false, flipY: false }, { scaleX: 2, scaleY: 2, flipX: false, flipY: false }, { scaleX: 0.5, scaleY: 0.5, flipX: false, flipY: false }, { scaleX: 1, scaleY: 1, flipX: true, flipY: false }, { scaleX: 1, scaleY: 1, flipX: false, flipY: true }, ]; for (const testCase of testCases) { Object.assign(mockFabricObject, testCase); // 模拟坐标转换函数(简化版) const fabricX = 100, fabricY = 100; // 创建变换矩阵模拟 const transform = mockFabricObject.calcTransformMatrix(); // 基本的坐标边界检查 const localX = (fabricX - mockFabricObject.left) / mockFabricObject.scaleX; const localY = (fabricY - mockFabricObject.top) / mockFabricObject.scaleY; if ( localX < -mockFabricObject.width / 2 || localX > mockFabricObject.width / 2 || localY < -mockFabricObject.height / 2 || localY > mockFabricObject.height / 2 ) { // 坐标在对象外部,这是正常情况 continue; } // 转换到图像坐标 let imageX = (localX + mockFabricObject.width / 2) * (testImageData.width / mockFabricObject.width); let imageY = (localY + mockFabricObject.height / 2) * (testImageData.height / mockFabricObject.height); // 处理翻转 if (mockFabricObject.flipX) { imageX = testImageData.width - imageX; } if (mockFabricObject.flipY) { imageY = testImageData.height - imageY; } // 验证结果在合理范围内 if ( imageX < 0 || imageX >= testImageData.width || imageY < 0 || imageY >= testImageData.height ) { throw new Error(`坐标转换结果超出图像范围: (${imageX}, ${imageY})`); } } } /** * 测试性能表现 */ async function testPerformance() { const manager = new LiquifyCPUManager(); const testImageData = createTestImageData(400, 400); // 更大的图像 manager.initialize(testImageData); manager.setParams({ size: 50, pressure: 0.5, distortion: 0.3, power: 0.8, }); manager.setMode("push"); // 测试多次操作的性能 const startTime = performance.now(); const operationCount = 100; for (let i = 0; i < operationCount; i++) { const x = Math.random() * testImageData.width; const y = Math.random() * testImageData.height; manager.applyDeformation(x, y); } const endTime = performance.now(); const totalTime = endTime - startTime; const avgTime = totalTime / operationCount; console.log( `性能测试结果: ${operationCount} 次操作,总耗时 ${totalTime.toFixed( 2 )}ms,平均 ${avgTime.toFixed(2)}ms/次` ); // 验证性能阈值(每次操作不应超过50ms) if (avgTime > 50) { throw new Error( `性能不达标:平均操作时间 ${avgTime.toFixed(2)}ms 超过阈值 50ms` ); } } /** * 测试内存管理 */ async function testMemoryManagement() { const initialMemory = performance.memory ? performance.memory.usedJSHeapSize : 0; // 创建多个管理器实例 const managers = []; for (let i = 0; i < 10; i++) { const manager = new LiquifyCPUManager(); const testImageData = createTestImageData(200, 200); manager.initialize(testImageData); managers.push(manager); } // 销毁所有管理器 for (const manager of managers) { if (manager.destroy) { manager.destroy(); } } // 强制垃圾回收(如果可用) if (window.gc) { window.gc(); } const finalMemory = performance.memory ? performance.memory.usedJSHeapSize : 0; const memoryIncrease = finalMemory - initialMemory; console.log( `内存测试: 初始 ${(initialMemory / 1024 / 1024).toFixed(2)}MB, 最终 ${( finalMemory / 1024 / 1024 ).toFixed(2)}MB, 增长 ${(memoryIncrease / 1024 / 1024).toFixed(2)}MB` ); // 验证内存增长不超过10MB(基本的内存泄漏检查) if (memoryIncrease > 10 * 1024 * 1024) { console.warn( `潜在内存泄漏: 内存增长 ${(memoryIncrease / 1024 / 1024).toFixed(2)}MB` ); } } /** * 运行所有集成测试 */ export async function runLiquifyIntegrationTests() { console.log("🚀 开始液化功能集成测试..."); // 重置测试结果 testResults = { totalTests: 0, passedTests: 0, failedTests: 0, errors: [], }; try { // 基础功能测试 await runTest("CPU管理器基本功能", testCPUManagerBasics); await runTest("WebGL管理器基本功能", testWebGLManagerBasics); await runTest("实时更新器功能", testRealTimeUpdater); await runTest("增强液化管理器", testEnhancedLiquifyManager); // 高级功能测试 await runTest("坐标转换准确性", testCoordinateConversion); await runTest("性能表现", testPerformance); await runTest("内存管理", testMemoryManagement); } catch (error) { console.error("集成测试出现严重错误:", error); } // 输出测试结果 console.log("\n📊 液化功能集成测试结果:"); console.log(`总测试数: ${testResults.totalTests}`); console.log(`通过: ${testResults.passedTests}`); console.log(`失败: ${testResults.failedTests}`); console.log( `成功率: ${( (testResults.passedTests / testResults.totalTests) * 100 ).toFixed(1)}%` ); if (testResults.errors.length > 0) { console.log("\n❌ 失败的测试:"); testResults.errors.forEach(({ testName, error }) => { console.log(` - ${testName}: ${error}`); }); } return testResults; } /** * 在浏览器控制台中运行测试 */ if (typeof window !== "undefined") { window.runLiquifyIntegrationTests = runLiquifyIntegrationTests; console.log("💡 使用 window.runLiquifyIntegrationTests() 运行液化集成测试"); }