From 74b43e431bf62a4c60bb821064763945181a38aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E9=B9=8F?= <2916022834@qq.com> Date: Mon, 19 Jan 2026 16:57:11 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8E=BB=E9=99=A4=E7=94=BB=E5=B8=83=E6=89=93?= =?UTF-8?q?=E5=8D=B0=E4=BF=A1=E6=81=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../FillGroupLayerBackgroundCommand.js | 5 - .../CanvasEditor/commands/LayerCommands.js | 4 +- .../commands/ObjectLayerCommands.js | 4 +- .../commands/RasterizeLayerCommand.js | 42 ++++--- .../CanvasEditor/components/ToolsSidebar.vue | 1 - src/component/Canvas/CanvasEditor/index.vue | 10 -- .../CanvasEditor/managers/CanvasManager.js | 8 +- .../CanvasEditor/managers/ExportManager.js | 2 +- .../CanvasEditor/managers/LayerManager.js | 113 +++++++++--------- .../CanvasEditor/managers/ThumbnailManager.js | 26 ++-- .../CanvasEditor/managers/ToolManager.js | 26 ++-- .../managers/command/CommandManager.js | 2 +- .../managers/events/CanvasEventManager.js | 52 ++++---- .../managers/events/KeyboardManager.js | 20 ++-- .../managers/liquify/LiquifyStateManager.js | 26 ++-- .../CanvasEditor/utils/rasterizedImage.js | 30 ++--- .../CanvasEditor/utils/selectionToImage.js | 99 ++++++++------- src/component/Canvas/canvasExample.vue | 95 ++++++++------- src/component/Detail/canvas/index.vue | 2 - 19 files changed, 273 insertions(+), 294 deletions(-) diff --git a/src/component/Canvas/CanvasEditor/commands/FillGroupLayerBackgroundCommand.js b/src/component/Canvas/CanvasEditor/commands/FillGroupLayerBackgroundCommand.js index cc773d34..edd061ac 100644 --- a/src/component/Canvas/CanvasEditor/commands/FillGroupLayerBackgroundCommand.js +++ b/src/component/Canvas/CanvasEditor/commands/FillGroupLayerBackgroundCommand.js @@ -50,7 +50,6 @@ export class FillGroupLayerBackgroundCommand extends Command { ); this.layer = layer; this.parent = parent; - console.log("==========",layer); if (!layer) return false; if(!isUndo){ @@ -343,10 +342,6 @@ export class FillGroupLayerBackgroundCommand extends Command { minTop = Infinity, maxRight = -Infinity, maxBottom = -Infinity; - console.log( - "计算当前所有对象的边界信息:===>", - this.originalfabricObjects.length - ); this.originalfabricObjects?.forEach((obj) => { const { object } = findObjectById(this.canvas, obj.id) || {}; if (object) { diff --git a/src/component/Canvas/CanvasEditor/commands/LayerCommands.js b/src/component/Canvas/CanvasEditor/commands/LayerCommands.js index fa01dac5..339fe361 100644 --- a/src/component/Canvas/CanvasEditor/commands/LayerCommands.js +++ b/src/component/Canvas/CanvasEditor/commands/LayerCommands.js @@ -3684,7 +3684,7 @@ export class ChangeFixedImageCommand extends Command { opacity: currentObj.opacity, }; - console.log(`保存渲染顺序: z-index = ${this.previousZIndex}`); + // console.log(`保存渲染顺序: z-index = ${this.previousZIndex}`); } } @@ -3794,7 +3794,7 @@ export class ChangeFixedImageCommand extends Command { false ); if (insertSuccess) { - console.log(`新图像插入到z-index位置: ${this.previousZIndex}`); + // console.log(`新图像插入到z-index位置: ${this.previousZIndex}`); } else { // 如果插入失败，回退到普通添加 this.canvas.add(newImage); diff --git a/src/component/Canvas/CanvasEditor/commands/ObjectLayerCommands.js b/src/component/Canvas/CanvasEditor/commands/ObjectLayerCommands.js index fdf72140..c32ff8c3 100644 --- a/src/component/Canvas/CanvasEditor/commands/ObjectLayerCommands.js +++ b/src/component/Canvas/CanvasEditor/commands/ObjectLayerCommands.js @@ -600,7 +600,7 @@ export class ChangeFixedImageCommand extends Command { opacity: currentObj.opacity, }; - console.log(`保存渲染顺序: z-index = ${this.previousZIndex}`); + // console.log(`保存渲染顺序: z-index = ${this.previousZIndex}`); } } @@ -716,7 +716,7 @@ export class ChangeFixedImageCommand extends Command { false ); if (insertSuccess) { - console.log(`新图像插入到z-index位置: ${this.previousZIndex}`); + // console.log(`新图像插入到z-index位置: ${this.previousZIndex}`); } else { // 如果插入失败，回退到普通添加 this.canvas.add(newImage); diff --git a/src/component/Canvas/CanvasEditor/commands/RasterizeLayerCommand.js b/src/component/Canvas/CanvasEditor/commands/RasterizeLayerCommand.js index e4cca18e..5b6f3192 100644 --- a/src/component/Canvas/CanvasEditor/commands/RasterizeLayerCommand.js +++ b/src/component/Canvas/CanvasEditor/commands/RasterizeLayerCommand.js @@ -285,17 +285,15 @@ export class RasterizeLayerCommand extends Command { // 提取排序后的对象 this.objectsToRasterize = objectsWithZIndex.map((item) => item.object); - console.log( - `📊 收集到 ${this.layersToRasterize.length} 个图层，${this.objectsToRasterize.length} 个对象进行组合` - ); - console.log( - "🔢 对象z-index顺序:", - objectsWithZIndex.map((item) => ({ - id: item.object.id, - type: item.object.type, - zIndex: item.zIndex, - })) - ); + // console.log(`📊 收集到 ${this.layersToRasterize.length} 个图层，${this.objectsToRasterize.length} 个对象进行组合` ); + // console.log( + // "🔢 对象z-index顺序:", + // objectsWithZIndex.map((item) => ({ + // id: item.object.id, + // type: item.object.type, + // zIndex: item.zIndex, + // })) + // ); } /** @@ -611,17 +609,17 @@ export class ExportLayerToImageCommand extends Command { // 提取排序后的对象 this.objectsToRasterize = objectsWithZIndex.map((item) => item.object); - console.log( - `📊 收集到 ${this.layersToRasterize.length} 个图层，${this.objectsToRasterize.length} 个对象进行组合` - ); - console.log( - "🔢 对象z-index顺序:", - objectsWithZIndex.map((item) => ({ - id: item.object.id, - type: item.object.type, - zIndex: item.zIndex, - })) - ); + // console.log( + // `📊 收集到 ${this.layersToRasterize.length} 个图层，${this.objectsToRasterize.length} 个对象进行组合` + // ); + // console.log( + // "🔢 对象z-index顺序:", + // objectsWithZIndex.map((item) => ({ + // id: item.object.id, + // type: item.object.type, + // zIndex: item.zIndex, + // })) + // ); } /** diff --git a/src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue b/src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue index 0e0c820e..69cb3214 100644 --- a/src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue +++ b/src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue @@ -34,7 +34,6 @@ const props = defineProps({ default: "", // 衣服底图URL-线稿 }, }); -console.log(props.clothingMinIOPath) const commandManager = inject("commandManager"); const layerManager = inject("layerManager"); // 图层管理器 diff --git a/src/component/Canvas/CanvasEditor/index.vue b/src/component/Canvas/CanvasEditor/index.vue index 85202f56..41a4c589 100644 --- a/src/component/Canvas/CanvasEditor/index.vue +++ b/src/component/Canvas/CanvasEditor/index.vue @@ -71,10 +71,6 @@ const props = defineProps({ type: [Object, String], default: "", // 默认空 }, - otherData: { - type: [Object, null], - default: null, // 默认空对象 - }, config: { type: Object, default: () => CanvasConfig, // 默认配置 @@ -472,12 +468,6 @@ onMounted(async () => { canvasManager.canvas.width, canvasManager.canvas.height ); - - // if(props.otherData && !props.otherData.canvasId) { - // await canvasManager?.createOtherLayers(props.otherData); - // await layerManager?.layerSort?.rearrangeObjects(); - // } - } // // 设置固定图层是否可擦除 diff --git a/src/component/Canvas/CanvasEditor/managers/CanvasManager.js b/src/component/Canvas/CanvasEditor/managers/CanvasManager.js index 284ce5fd..fb4866b4 100644 --- a/src/component/Canvas/CanvasEditor/managers/CanvasManager.js +++ b/src/component/Canvas/CanvasEditor/managers/CanvasManager.js @@ -843,7 +843,6 @@ export class CanvasManager { updateMaskPosition(backgroundLayerObject) { if (!backgroundLayerObject || !this.maskLayer || !this.canvas.clipPath) return; - console.log("backgroundLayerObject"); const left = backgroundLayerObject.left; const top = backgroundLayerObject.top; @@ -1294,7 +1293,6 @@ export class CanvasManager { } loadJSON(json, calllBack) { - console.log("加载画布JSON数据:", json); // 确保传入的json是字符串格式 if (typeof json === "object") { @@ -1305,6 +1303,7 @@ export class CanvasManager { // 解析JSON字符串 try { const parsedJson = JSON.parse(json); + console.log("加载画布JSON数据:", parsedJson); this.canvasWidth.value = parsedJson.canvasWidth || this.width; this.canvasHeight.value = parsedJson.canvasHeight || this.height; this.canvasColor.value = parsedJson.canvasColor || this.backgroundColor; @@ -1330,7 +1329,7 @@ export class CanvasManager { // this.canvasHeight.value = parsedJson.canvasHeight || this.height; // this.canvasColor.value = parsedJson.canvasColor || this.backgroundColor; - console.log("是否检测到红绿图模式内容:", this.enabledRedGreenMode); + // console.log("是否检测到红绿图模式内容:", this.enabledRedGreenMode); // 重置视图变换以确保元素位置正确 this._resetViewportTransform(1); @@ -1342,7 +1341,7 @@ export class CanvasManager { // 清除当前画布内容 // this.canvas.clear(); // 清除画布内容 可以先去掉 这样加载闪动的情况就比较少 如果有问题 可以再打开 - console.log("清除当前画布内容", canvasData); + // console.log("清除当前画布内容", canvasData); delete canvasData.clipPath; // 删除当前裁剪路径 // 加载画布数据 this.canvas.loadFromJSON(canvasData, async () => { @@ -1371,7 +1370,6 @@ export class CanvasManager { // 重置画布数据 await this.setCanvasSize(this.canvas.width, this.canvas.height); await this.centerBackgroundLayer(this.canvas.width, this.canvas.height); - // await this.createOtherLayers(this.props.otherData); // 重新构建对象关系 // restoreObjectLayerAssociations(this.layers.value, this.canvas.getObjects()); // 验证图层关联关系 - 稳定后可以注释 diff --git a/src/component/Canvas/CanvasEditor/managers/ExportManager.js b/src/component/Canvas/CanvasEditor/managers/ExportManager.js index f3777452..98dc6532 100644 --- a/src/component/Canvas/CanvasEditor/managers/ExportManager.js +++ b/src/component/Canvas/CanvasEditor/managers/ExportManager.js @@ -681,7 +681,7 @@ export class ExportManager { isEnhanceImg, // 是否是增强图片 }); - console.log("导出图片数据URL:", dataURL); + // console.log("导出图片数据URL:", dataURL); return dataURL; // // 创建与画布相同尺寸的临时画布 diff --git a/src/component/Canvas/CanvasEditor/managers/LayerManager.js b/src/component/Canvas/CanvasEditor/managers/LayerManager.js index 007ef3f5..293590ea 100644 --- a/src/component/Canvas/CanvasEditor/managers/LayerManager.js +++ b/src/component/Canvas/CanvasEditor/managers/LayerManager.js @@ -149,7 +149,7 @@ export class LayerManager { */ initCommandManager() { // 命令注册逻辑已移除，现在直接使用命令类实例化和执行 - console.log("CommandManager 已初始化，使用直接命令调用模式"); + // console.log("CommandManager 已初始化，使用直接命令调用模式"); } /** @@ -161,7 +161,7 @@ export class LayerManager { this.layerSort = createLayerSort(this.canvas, this.layers, { commandManager: this.commandManager, }); - console.log("图层排序工具已初始化"); + // console.log("图层排序工具已初始化"); } } @@ -180,7 +180,7 @@ export class LayerManager { // 更新所有对象的交互性 this.updateLayersObjectsInteractivity(); - console.log(`已切换到${mode}模式`); + // console.log(`已切换到${mode}模式`); } setToolManager(toolManager) { @@ -332,7 +332,7 @@ export class LayerManager { // 私有方法：应用交互规则 async _applyInteractionRules({ isMoveing }) { - console.log("updateLayersObjectsInteractivity ===>", this.editorMode); + // console.log("updateLayersObjectsInteractivity ===>", this.editorMode); const objects = this.canvas.getObjects(); const editorMode = this.editorMode || CanvasConfig.defaultTool; const layers = this.layers?.value || []; @@ -975,7 +975,7 @@ export class LayerManager { return !layer.isFixed && !layer.isFixedOther && !layer.isBackground }) // const normalLayers = this.layers.value.filter((l) => !l.isBackground && !l.isFixed && !l.isFixedOther); - console.log("普通图层:", normalLayers) + // console.log("普通图层:", normalLayers) if (isChild ? parentLength <= 1 : false) {//normalLayers.length <= 1 console.warn("不能删除唯一的普通图层"); message.warning(this.t("Canvas.cannotDeleteOnlyLayer")); @@ -1096,14 +1096,14 @@ export class LayerManager { if (this.commandManager) { const result = this.commandManager.execute(command); if (result) { - console.log(`✅ 图层移动成功: ${direction}`); + // console.log(`✅ 图层移动成功: ${direction}`); } return result; } else { const result = command.execute(); if (result) { // 更新画布渲染顺序 - console.log(`✅ 图层移动成功: ${direction}`); + // console.log(`✅ 图层移动成功: ${direction}`); } return result; } @@ -1147,7 +1147,6 @@ export class LayerManager { return acc; }, []); - console.log("==========", allObjects) // if (layer.fill) { // // 如果图层有填充颜色，设置所有对象的填充颜色 // const { object } = findObjectById(this.canvas, layer.fill.id); @@ -1845,7 +1844,7 @@ export class LayerManager { input.select(); document.execCommand("copy"); document.body.removeChild(input); - console.log(`已复制图层：${layer.name}`); + // console.log(`已复制图层：${layer.name}`); return this.clipboardData; } @@ -1870,7 +1869,7 @@ export class LayerManager { // 检查是否是唯一的普通图层 const normalLayers = this.layers.value.filter((l) => !l.isBackground && !l.isFixed && !l.isFixedOther); - console.log("普通图层:", normalLayers) + // console.log("普通图层:", normalLayers) if (normalLayers.length <= 1) { console.warn("不能剪切唯一的普通图层"); return null; @@ -1930,7 +1929,7 @@ export class LayerManager { // 更新对象交互性 this.updateLayersObjectsInteractivity(); - console.log(`已剪切图层：${layer.name}`); + // console.log(`已剪切图层：${layer.name}`); return this.clipboardData; } @@ -1944,7 +1943,7 @@ export class LayerManager { * @returns {string} 新创建的图层ID */ async pasteLayer(event) { - console.log("剪贴板数据:", this.clipboardData,event); + // console.log("剪贴板数据:", this.clipboardData,event); if (!this.clipboardData) { console.error("剪贴板中没有图层数据"); return null; @@ -2099,7 +2098,7 @@ export class LayerManager { // 重新初始化基本图层 this.initializeLayers(); - console.log("已清空画布"); + // console.log("已清空画布"); } /** @@ -2312,7 +2311,7 @@ export class LayerManager { }); if (emptyLayerIds.length > 0) { - console.log(`已清理 ${emptyLayerIds.length} 个空图层`); + // console.log(`已清理 ${emptyLayerIds.length} 个空图层`); } return emptyLayerIds; @@ -2344,7 +2343,7 @@ export class LayerManager { this.canvasManager = null; this.toolManager = null; - console.log("LayerManager 已销毁"); + // console.log("LayerManager 已销毁"); } /** @@ -2652,13 +2651,13 @@ export class LayerManager { // 启用红绿图模式 enableRedGreenMode() { this.isRedGreenMode = true; - console.log("图层管理器：红绿图模式已启用"); + // console.log("图层管理器：红绿图模式已启用"); } // 禁用红绿图模式 disableRedGreenMode() { this.isRedGreenMode = false; - console.log("图层管理器：红绿图模式已禁用"); + // console.log("图层管理器：红绿图模式已禁用"); } // 检查是否为红绿图模式 @@ -2708,14 +2707,14 @@ export class LayerManager { : LayerSortUtils.shouldUseAsyncProcessing(objectsCount, layersCount); if (shouldUseAsync) { - console.log( - `使用异步排序处理 ${objectsCount} 个对象, ${layersCount} 个图层` - ); + // console.log( + // `使用异步排序处理 ${objectsCount} 个对象, ${layersCount} 个图层` + // ); return this.layerSort.rearrangeObjectsAsync(); } else { - console.log( - `使用同步排序处理 ${objectsCount} 个对象, ${layersCount} 个图层` - ); + // console.log( + // `使用同步排序处理 ${objectsCount} 个对象, ${layersCount} 个图层` + // ); this.layerSort.rearrangeObjects(); } } @@ -2735,7 +2734,7 @@ export class LayerManager { const result = this.layerSort.smartSort(targetLayerIds); if (result) { - console.log("智能排序完成"); + // console.log("智能排序完成"); // 更新对象交互性 this.updateLayersObjectsInteractivity(); } @@ -2761,9 +2760,9 @@ export class LayerManager { const stats = this.layerSort.optimizeLayerStructure(); if (stats.removedEmptyLayers > 0 || stats.reorderedLayers > 0) { - console.log( - `图层结构优化完成: 清理空图层 ${stats.removedEmptyLayers} 个, 重新排序 ${stats.reorderedLayers} 个图层` - ); + // console.log( + // `图层结构优化完成: 清理空图层 ${stats.removedEmptyLayers} 个, 重新排序 ${stats.reorderedLayers} 个图层` + // ); // 更新对象交互性 this.updateLayersObjectsInteractivity(); } @@ -2838,9 +2837,9 @@ export class LayerManager { }); if (result) { - console.log( - `图层 ${layerId} - oldIndex: ${oldIndex} 已移动到位置 ${newIndex}` - ); + // console.log( + // `图层 ${layerId} - oldIndex: ${oldIndex} 已移动到位置 ${newIndex}` + // ); // 更新对象交互性 // this.updateLayersObjectsInteractivity(); } @@ -2917,9 +2916,9 @@ export class LayerManager { const result = this.layerSort.reorderLayers(oldIndex, newIndex, layerId); if (result) { - console.log( - `高级排序完成: 图层 ${layerId} 从位置 ${oldIndex} 移动到 ${newIndex}` - ); + // console.log( + // `高级排序完成: 图层 ${layerId} 从位置 ${oldIndex} 移动到 ${newIndex}` + // ); // 更新对象交互性 this.updateLayersObjectsInteractivity(); } @@ -2944,9 +2943,9 @@ export class LayerManager { ); if (result) { - console.log( - `高级子图层排序完成: 图层 ${layerId} 在父图层 ${parentId} 中从位置 ${oldIndex} 移动到 ${newIndex}` - ); + // console.log( + // `高级子图层排序完成: 图层 ${layerId} 在父图层 ${parentId} 中从位置 ${oldIndex} 移动到 ${newIndex}` + // ); // 重新排列画布对象 this.rearrangeCanvasObjects(); } @@ -2971,7 +2970,7 @@ export class LayerManager { // 重新排列画布对象 this.rearrangeCanvasObjects(); - console.log("使用LayerSort工具完成图层排序"); + // console.log("使用LayerSort工具完成图层排序"); } /** @@ -2979,7 +2978,7 @@ export class LayerManager { * 当图层顺序发生变化后调用此方法确保画布对象顺序正确 */ forceRebuildCanvasOrder() { - console.log("强制重建画布对象顺序"); + // console.log("强制重建画布对象顺序"); if (this.layerSort) { // 使用LayerSort的高级排序 @@ -3010,7 +3009,7 @@ export class LayerManager { return false; } - console.log(`开始批量重新排序 ${reorderOperations.length} 个图层`); + // console.log(`开始批量重新排序 ${reorderOperations.length} 个图层`); let allSuccessful = true; @@ -3042,7 +3041,7 @@ export class LayerManager { } if (allSuccessful) { - console.log("批量图层排序完成"); + // console.log("批量图层排序完成"); } else { console.warn("批量图层排序部分失败"); } @@ -3079,11 +3078,11 @@ export class LayerManager { // 执行命令 if (this.commandManager) { const result = await this.commandManager.execute(command); - result && console.log(`✅ 成功合并组图层: ${groupLayer.name}`); + // result && console.log(`✅ 成功合并组图层: ${groupLayer.name}`); return result; } else { const result = await command.execute(); - result && console.log(`✅ 成功合并组图层: ${groupLayer.name}`); + // result && console.log(`✅ 成功合并组图层: ${groupLayer.name}`); return result || []; } } @@ -3132,13 +3131,13 @@ export class LayerManager { if (this.commandManager) { const result = await this.commandManager.execute(command); if (result) { - console.log(`✅ 成功栅格化图层: ${targetLayer.name}`); + // console.log(`✅ 成功栅格化图层: ${targetLayer.name}`); } return result; } else { const result = await command.execute(); if (result) { - console.log(`✅ 成功栅格化图层: ${targetLayer.name}`); + // console.log(`✅ 成功栅格化图层: ${targetLayer.name}`); } return result; } @@ -3209,13 +3208,13 @@ export class LayerManager { if (this.commandManager) { const result = await this.commandManager.execute(command); if (result) { - console.log(`✅ 成功导出图层: ${targetLayer.name}`); + // console.log(`✅ 成功导出图层: ${targetLayer.name}`); } return result; } else { const result = await command.execute(); if (result) { - console.log(`✅ 成功导出图层: ${targetLayer.name}`); + // console.log(`✅ 成功导出图层: ${targetLayer.name}`); } return result; } @@ -3259,7 +3258,7 @@ export class LayerManager { // 执行命令 const result = await command.execute(false); if (result) { - console.log(`✅ 成功导出图层: ${targetLayer.name}`); + // console.log(`✅ 成功导出图层: ${targetLayer.name}`); } return result; } @@ -3294,12 +3293,12 @@ export class LayerManager { const isSginleObject = e.target === activeSelection?._objects?.[0]; if (e.target === activeSelection || isSginleObject) { hasMoved = false; // 重置移动状态 - console.log("🎯 开始移动组选择对象"); + // console.log("🎯 开始移动组选择对象"); // 记录遮罩初始位置 - console.log( - "🖼️ 记录遮罩初始位置", - `${layer.clippingMask.left || 0}, ${layer.clippingMask.top || 0}` - ); + // console.log( + // "🖼️ 记录遮罩初始位置", + // `${layer.clippingMask.left || 0}, ${layer.clippingMask.top || 0}` + // ); // 记录初始位置 initialLeft = isSginleObject ? e.target.left : activeSelection.left; initialTop = isSginleObject ? e.target.top : activeSelection.top; @@ -3366,12 +3365,12 @@ export class LayerManager { const isSginleObject = e.target === activeSelection?._objects?.[0]; if (isSginleObject) { // 如果是单个对象，不处理 - console.log("🚫 单个对象不处理移动完成"); + // console.log("🚫 单个对象不处理移动完成"); hasMoved = false; // 重置移动状态 return; } if ((target === activeSelection || isSginleObject) && hasMoved) { - console.log("✅ 组选择对象移动完成"); + // console.log("✅ 组选择对象移动完成"); // 计算最终移动距离 const deltaX = target.left - initialLeft; @@ -3410,7 +3409,7 @@ export class LayerManager { // 鼠标抬起事件处理 - 备用方案 const handleMouseUp = (e) => { if (hasMoved && this.canvas.getActiveObject() === activeSelection) { - console.log("🖱️ 鼠标抬起 - 备用移动完成处理"); + // console.log("🖱️ 鼠标抬起 - 备用移动完成处理"); handleModified(e); } }; @@ -3424,7 +3423,7 @@ export class LayerManager { this.canvas.off("selection:cleared", cleanup); this.canvas.off("selection:updated", cleanup); - console.log("🧹 清理组遮罩移动同步事件监听器"); + // console.log("🧹 清理组遮罩移动同步事件监听器"); }; // 绑定事件监听器 @@ -3437,7 +3436,7 @@ export class LayerManager { this.canvas.on("selection:cleared", cleanup); this.canvas.on("selection:updated", cleanup); - console.log("🎨 已设置组遮罩移动同步 - 使用 object:modified 事件"); + // console.log("🎨 已设置组遮罩移动同步 - 使用 object:modified 事件"); } /** diff --git a/src/component/Canvas/CanvasEditor/managers/ThumbnailManager.js b/src/component/Canvas/CanvasEditor/managers/ThumbnailManager.js index 2f6010fc..3c042817 100644 --- a/src/component/Canvas/CanvasEditor/managers/ThumbnailManager.js +++ b/src/component/Canvas/CanvasEditor/managers/ThumbnailManager.js @@ -27,7 +27,7 @@ export class ThumbnailManager { const { layer } = findLayerRecursively(this.layers.value, layerId); if (!fabricObjects || fabricObjects.length === 0) { - console.warn("⚠️ 无法生成缩略图：没有可栅格化的对象 返回空缩略图"); + // console.warn("⚠️ 无法生成缩略图：没有可栅格化的对象 返回空缩略图"); // 如果没有对象，返回默认缩略图 if (layer) { layer.thumbnailUrl = this.defaultThumbnail; // 更新图层对象的缩略图 @@ -123,7 +123,7 @@ export class ThumbnailManager { */ _collectLayersAndObjects(layerId) { if (!layerId) { - console.warn("⚠️ 无效的图层ID，无法收集对象"); + // console.warn("⚠️ 无效的图层ID，无法收集对象"); return []; } @@ -199,17 +199,17 @@ export class ThumbnailManager { // 提取排序后的对象 const objectsToRasterize = objectsWithZIndex.map((item) => item.object); - console.log( - `📊 收集到 ${layersToRasterize.length} 个图层，${objectsToRasterize.length} 个对象进行栅格化` - ); - console.log( - "🔢 对象z-index顺序:", - objectsWithZIndex.map((item) => ({ - id: item.object.id, - type: item.object.type, - zIndex: item.zIndex, - })) - ); + // console.log( + // `📊 收集到 ${layersToRasterize.length} 个图层，${objectsToRasterize.length} 个对象进行栅格化` + // ); + // console.log( + // "🔢 对象z-index顺序:", + // objectsWithZIndex.map((item) => ({ + // id: item.object.id, + // type: item.object.type, + // zIndex: item.zIndex, + // })) + // ); return objectsToRasterize; } diff --git a/src/component/Canvas/CanvasEditor/managers/ToolManager.js b/src/component/Canvas/CanvasEditor/managers/ToolManager.js index 3b34ec84..53fd8852 100644 --- a/src/component/Canvas/CanvasEditor/managers/ToolManager.js +++ b/src/component/Canvas/CanvasEditor/managers/ToolManager.js @@ -420,7 +420,7 @@ export class ToolManager { // 设置工具特定的状态 if (tool && typeof tool.setup === "function") { - console.log(`画布切换工具:${tool.name}(${toolId})`) + // console.log(`画布切换工具:${tool.name}(${toolId})`) this.canvas.toolId = toolId; tool.setup(); } @@ -695,7 +695,7 @@ export class ToolManager { // // 设置矩形选区模式 // // 这里需要具体的矩形选区工具实现 - console.log("矩形选区工具已激活"); + // console.log("矩形选区工具已激活"); if (this.canvasManager && this.canvasManager.selectionManager) { this.canvasManager.selectionManager.setCurrentTool( @@ -894,7 +894,7 @@ export class ToolManager { this._rasterizeLayerForLiquify(layerId); }, onCancel: () => { - console.log("用户取消了栅格化操作"); + // console.log("用户取消了栅格化操作"); // 用户取消，触发液化面板显示事件但不能液化 document.dispatchEvent( new CustomEvent("showLiquifyPanel", { @@ -1286,7 +1286,7 @@ export class ToolManager { */ showTextEditor(textObject, layer) { // 这个方法将在TextEditorPanel组件实现后调用 - console.log("显示文本编辑面板", textObject, layer); + // console.log("显示文本编辑面板", textObject, layer); // 将发出一个事件，让Vue组件捕获并显示编辑面板 document.dispatchEvent( new CustomEvent("showTextEditor", { @@ -1302,7 +1302,7 @@ export class ToolManager { */ hideTextEditor() { // 这个方法将在TextEditorPanel组件实现后调用 - console.log("隐藏文本编辑面板"); + // console.log("隐藏文本编辑面板"); // 将发出一个事件，让Vue组件捕获并隐藏编辑面板 document.dispatchEvent( new CustomEvent("hideTextEditor", { @@ -1323,7 +1323,7 @@ export class ToolManager { if (this.brushIndicator) { this.brushIndicator.dispose(); this.brushIndicator = null; - console.log("笔刷指示器已清理"); + // console.log("笔刷指示器已清理"); } // 移除文本编辑相关事件监听器 @@ -1348,7 +1348,7 @@ export class ToolManager { this.canvas.isDrawingMode = false; this.canvas.selection = false; - console.log("文本工具已激活"); + // console.log("文本工具已激活"); } /** @@ -1424,7 +1424,7 @@ export class ToolManager { // 切换到红色笔刷工具作为默认工具 this.setTool(OperationType.RED_BRUSH); - console.log("工具管理器已进入红绿图模式"); + // console.log("工具管理器已进入红绿图模式"); } /** @@ -1437,7 +1437,7 @@ export class ToolManager { // 切换回选择工具 this.setTool(OperationType.SELECT); - console.log("工具管理器已退出红绿图模式"); + // console.log("工具管理器已退出红绿图模式"); } /** @@ -1495,7 +1495,7 @@ export class ToolManager { // 更新指示器颜色 this.brushIndicator.updateColor(brushColor); - console.log(`笔刷指示器已启用，大小: ${brushSize}, 颜色: ${brushColor}`); + // console.log(`笔刷指示器已启用，大小: ${brushSize}, 颜色: ${brushColor}`); } /** @@ -1506,7 +1506,7 @@ export class ToolManager { if (!this.brushIndicator) return; this.brushIndicator.disable(); - console.log("笔刷指示器已禁用"); + // console.log("笔刷指示器已禁用"); } /** @@ -1517,7 +1517,7 @@ export class ToolManager { if (!this.brushIndicator) return; this.brushIndicator.updateSize(size); - console.log(`笔刷指示器大小已更新为: ${size}`); + // console.log(`笔刷指示器大小已更新为: ${size}`); } /** @@ -1528,7 +1528,7 @@ export class ToolManager { if (!this.brushIndicator) return; this.brushIndicator.updateColor(color); - console.log(`笔刷指示器颜色已更新为: ${color}`); + // console.log(`笔刷指示器颜色已更新为: ${color}`); } /** diff --git a/src/component/Canvas/CanvasEditor/managers/command/CommandManager.js b/src/component/Canvas/CanvasEditor/managers/command/CommandManager.js index c6984c9b..65fd54b4 100644 --- a/src/component/Canvas/CanvasEditor/managers/command/CommandManager.js +++ b/src/component/Canvas/CanvasEditor/managers/command/CommandManager.js @@ -299,7 +299,7 @@ export class CommandManager { this.undoStack = []; this.redoStack = []; this._notifyStateChange(); - console.log("📝 命令历史已清空"); + // console.log("📝 命令历史已清空"); } /** diff --git a/src/component/Canvas/CanvasEditor/managers/events/CanvasEventManager.js b/src/component/Canvas/CanvasEditor/managers/events/CanvasEventManager.js index 270c3003..8c318cf5 100644 --- a/src/component/Canvas/CanvasEditor/managers/events/CanvasEventManager.js +++ b/src/component/Canvas/CanvasEditor/managers/events/CanvasEventManager.js @@ -485,7 +485,7 @@ export class CanvasEventManager { // 调试信息 if (process.env.NODE_ENV === "development") { - console.log("iPad touchstart:", e.touches.length, "fingers"); + // console.log("iPad touchstart:", e.touches.length, "fingers"); } if (e.touches.length === 2) { @@ -500,11 +500,11 @@ export class CanvasEventManager { this.touchState.zoomCenter = { x: centerX, y: centerY }; if (process.env.NODE_ENV === "development") { - console.log("iPad双指缩放开始:", { - distance: lastTouchDistance, - zoom: lastZoom, - center: this.touchState.zoomCenter, - }); + // console.log("iPad双指缩放开始:", { + // distance: lastTouchDistance, + // zoom: lastZoom, + // center: this.touchState.zoomCenter, + // }); } e.preventDefault(); @@ -554,14 +554,14 @@ export class CanvasEventManager { const clampedZoom = Math.max(0.1, Math.min(5, newZoom)); if (process.env.NODE_ENV === "development") { - console.log("iPad双指缩放中:", { - currentDistance, - lastTouchDistance, - scale, - currentZoom, - newZoom, - clampedZoom, - }); + // console.log("iPad双指缩放中:", { + // currentDistance, + // lastTouchDistance, + // scale, + // currentZoom, + // newZoom, + // clampedZoom, + // }); } // 使用缩放中心点进行缩放 @@ -839,7 +839,7 @@ export class CanvasEventManager { const hasNewImage = !!fabricImage; if (!hasExistingObjects && !hasNewImage) { - console.log("没有对象需要合并"); + // console.log("没有对象需要合并"); return; } @@ -851,7 +851,7 @@ export class CanvasEventManager { // 执行高保真合并操作 try { - console.log(`开始合并图层 ${activeLayer.name} 中的对象为组...`); + // console.log(`开始合并图层 ${activeLayer.name} 中的对象为组...`); const command = await this.layerManager.LayerObjectsToGroup( activeLayer, @@ -869,7 +869,7 @@ export class CanvasEventManager { // 降级处理：如果合并失败，至少保证新图像能添加到图层 if (fabricImage && this.layerManager) { - console.log("执行降级处理：直接添加图像到图层"); + // console.log("执行降级处理：直接添加图像到图层"); this.layerManager.addObjectToLayer(fabricImage, activeLayer.id); } } @@ -1011,15 +1011,15 @@ export class CanvasEventManager { // 调试日志 - 仅在开发环境输出 if (process.env.NODE_ENV === "development") { - console.log("设备检测结果:", { - userAgent, - platform, - isMobile, - isTablet, - isDesktop, - hasTouchSupport, - maxTouchPoints: navigator.maxTouchPoints, - }); + // console.log("设备检测结果:", { + // userAgent, + // platform, + // isMobile, + // isTablet, + // isDesktop, + // hasTouchSupport, + // maxTouchPoints: navigator.maxTouchPoints, + // }); } return { diff --git a/src/component/Canvas/CanvasEditor/managers/events/KeyboardManager.js b/src/component/Canvas/CanvasEditor/managers/events/KeyboardManager.js index 8e1b9408..78e5493f 100644 --- a/src/component/Canvas/CanvasEditor/managers/events/KeyboardManager.js +++ b/src/component/Canvas/CanvasEditor/managers/events/KeyboardManager.js @@ -219,7 +219,7 @@ export class KeyboardManager { const text = event.clipboardData?.getData("text/plain") || ""; if(/^aida_copy_canvas_layer/.test(text)) return; const items = event.clipboardData?.items || []; - console.log(this); + // console.log(this); for (const item of items) { if (item.type.indexOf("text/plain") !== -1) { item.getAsString((text) => { @@ -249,7 +249,7 @@ export class KeyboardManager { this.container.addEventListener("touchcancel", this._handleTouchEnd); } - console.log(`键盘管理器已初始化，平台: ${this.platform}, 触摸设备: ${this.isTouchDevice}`); + // console.log(`键盘管理器已初始化，平台: ${this.platform}, 触摸设备: ${this.isTouchDevice}`); } /** @@ -437,35 +437,35 @@ export class KeyboardManager { case "copy": // 复制逻辑 - console.log("复制当前选中图层"); + // console.log("复制当前选中图层"); if(this.isRedGreenMode.value) return; this.layerManager.copyLayer(this.layerManager.activeLayerId.value); break; case "paste": // 粘贴逻辑 - console.log("粘贴"); + // console.log("粘贴"); if(this.isRedGreenMode.value) return; this.layerManager.pasteLayer(); break; case "cut": // 剪切逻辑 - console.log("剪切"); + // console.log("剪切"); if(this.isRedGreenMode.value) return; this.layerManager.cutLayer(this.layerManager.activeLayerId.value); break; case "delete": // 删除逻辑 - console.log("删除"); + // console.log("删除"); if(this.isRedGreenMode.value) return; this.layerManager.removeLayer(this.layerManager.activeLayerId.value); break; case "selectAll": // 全选逻辑 - console.log("全选"); + // console.log("全选"); if(this.isRedGreenMode.value) return; // 这里需要实现全选逻辑 TODO: 是否在选择模式下才可以全选？ if (this.layerManager) { @@ -475,7 +475,7 @@ export class KeyboardManager { case "clearSelection": // 清除选择逻辑 - console.log("清除选择"); + // console.log("清除选择"); // 这里需要实现清除选择逻辑 if (this.layerManager) { this.layerManager.clearSelection(); @@ -484,7 +484,7 @@ export class KeyboardManager { case "save": // 保存逻辑 - console.log("保存"); + // console.log("保存"); break; case "selectTool": @@ -591,7 +591,7 @@ export class KeyboardManager { case "contextMenu": // 上下文菜单（通常由右击或触控设备上的特定手势触发） - console.log("显示上下文菜单"); + // console.log("显示上下文菜单"); // 这里需要实现显示上下文菜单的逻辑 break; diff --git a/src/component/Canvas/CanvasEditor/managers/liquify/LiquifyStateManager.js b/src/component/Canvas/CanvasEditor/managers/liquify/LiquifyStateManager.js index a8a648de..63b9326d 100644 --- a/src/component/Canvas/CanvasEditor/managers/liquify/LiquifyStateManager.js +++ b/src/component/Canvas/CanvasEditor/managers/liquify/LiquifyStateManager.js @@ -30,7 +30,7 @@ export class LiquifyStateManager { // 设备性能检测 this.devicePerformance = this._detectDevicePerformance(); - console.log("🎯 液化状态管理器已初始化，设备性能等级:", this.devicePerformance); + // console.log("🎯 液化状态管理器已初始化，设备性能等级:", this.devicePerformance); } /** @@ -48,7 +48,7 @@ export class LiquifyStateManager { // 显示操作反馈 this._showOperationFeedback(); - console.log("🚀 开始液化操作"); + // console.log("🚀 开始液化操作"); } /** @@ -68,7 +68,7 @@ export class LiquifyStateManager { // 禁用不必要的画布功能 this._disableCanvasFeatures(); - console.log("🖱️ 开始拖拽操作"); + // console.log("🖱️ 开始拖拽操作"); } /** @@ -98,7 +98,7 @@ export class LiquifyStateManager { } } - console.log("✅ 结束拖拽操作"); + // console.log("✅ 结束拖拽操作"); } /** @@ -116,7 +116,7 @@ export class LiquifyStateManager { // 隐藏操作反馈 this._hideOperationFeedback(); - console.log(`⏱️ 液化操作完成，耗时: ${operationTime.toFixed(2)}ms`); + // console.log(`⏱️ 液化操作完成，耗时: ${operationTime.toFixed(2)}ms`); } /** @@ -158,11 +158,11 @@ export class LiquifyStateManager { // 根据性能数据动态调整设置 this._adaptivePerformanceOptimization(operationTime); - console.log( - `📊 记录性能指标: ${operationType}/${mode}, 耗时: ${operationTime.toFixed( - 2 - )}ms, 渲染模式: ${renderMode}` - ); + // console.log( + // `📊 记录性能指标: ${operationType}/${mode}, 耗时: ${operationTime.toFixed( + // 2 + // )}ms, 渲染模式: ${renderMode}` + // ); } /** @@ -179,7 +179,7 @@ export class LiquifyStateManager { const currentQuality = this.realtimeUpdater.config.imageQuality || 1.0; if (currentQuality > 0.7) { this.realtimeUpdater.setImageQuality(Math.max(0.7, currentQuality - 0.1)); - console.log("⚡ 自动降低图像质量以提升性能"); + // console.log("⚡ 自动降低图像质量以提升性能"); } // 增加节流时间 @@ -188,7 +188,7 @@ export class LiquifyStateManager { 33, this.realtimeUpdater.config.throttleTime + 8 ); - console.log("⏱️ 自动增加节流时间以提升性能"); + // console.log("⏱️ 自动增加节流时间以提升性能"); } } @@ -228,7 +228,7 @@ export class LiquifyStateManager { this._updateCursor("default"); this.cursorCache.clear(); - console.log("🧹 液化状态管理器已清理"); + // console.log("🧹 液化状态管理器已清理"); } // === 私有方法 === diff --git a/src/component/Canvas/CanvasEditor/utils/rasterizedImage.js b/src/component/Canvas/CanvasEditor/utils/rasterizedImage.js index e41409d3..e1d21b5d 100644 --- a/src/component/Canvas/CanvasEditor/utils/rasterizedImage.js +++ b/src/component/Canvas/CanvasEditor/utils/rasterizedImage.js @@ -22,7 +22,7 @@ export const createRasterizedImage = async ({ isGroupWithMask = false, // 是否为带遮罩的组图层 } = {}) => { try { - console.log(`📊 开始栅格化 ${fabricObjects.length} 个对象${maskObject ? "（带遮罩）" : ""}`); + // console.log(`📊 开始栅格化 ${fabricObjects.length} 个对象${maskObject ? "（带遮罩）" : ""}`); // 确保有对象需要栅格化 if (fabricObjects.length === 0) { @@ -36,7 +36,7 @@ export const createRasterizedImage = async ({ if (isThumbnail) scaleFactor = 0.2; // 缩略图使用较小的高清倍数 - console.log(`高清倍数: ${scaleFactor}, 当前缩放: ${currentZoom}`); + // console.log(`高清倍数: ${scaleFactor}, 当前缩放: ${currentZoom}`); // 如果有遮罩且保持原始质量，使用高质量的遮罩处理方法 if (maskObject && preserveOriginalQuality) { @@ -58,7 +58,7 @@ export const createRasterizedImage = async ({ } if (isReturenDataURL) { - console.log("✅ 带遮罩的栅格化图像创建成功，返回DataURL"); + // console.log("✅ 带遮罩的栅格化图像创建成功，返回DataURL"); return rasterizedImage; } @@ -77,7 +77,7 @@ export const createRasterizedImage = async ({ }, }); - console.log(`✅ 带遮罩的栅格化图像创建完成`); + // console.log(`✅ 带遮罩的栅格化图像创建完成`); return rasterizedImage; } @@ -101,7 +101,7 @@ export const createRasterizedImage = async ({ } if (isReturenDataURL) { - console.log("✅ 栅格化图像创建成功，返回DataURL"); + // console.log("✅ 栅格化图像创建成功，返回DataURL"); return rasterizedImage; } @@ -120,7 +120,7 @@ export const createRasterizedImage = async ({ }, }); - console.log(`✅ 栅格化图像创建完成`); + // console.log(`✅ 栅格化图像创建完成`); } return rasterizedImage; @@ -172,7 +172,7 @@ const createRasterizedImageWithGroup = async ({ // 获取组的绝对边界框 const groupBounds = group.getBoundingRect(true, true); - console.log("📏 组边界框:", groupBounds); + // console.log("📏 组边界框:", groupBounds); // 设置离屏画布尺寸，使用组的边界大小 const canvasWidth = Math.ceil(groupBounds.width * scaleFactor); @@ -184,7 +184,7 @@ const createRasterizedImageWithGroup = async ({ hasControls: false, }); - console.log(`🎨 离屏画布尺寸: ${canvasWidth}x${canvasHeight}, 缩放: ${scaleFactor}`); + // console.log(`🎨 离屏画布尺寸: ${canvasWidth}x${canvasHeight}, 缩放: ${scaleFactor}`); // 调整组的位置，让它位于画布的左上角 group.set({ @@ -266,11 +266,11 @@ const createRasterizedImageWithMask = async ({ isGroupWithMask, }) => { try { - console.log("🎭 使用遮罩创建栅格化图像"); + // console.log("🎭 使用遮罩创建栅格化图像"); // 获取遮罩的边界框，这将作为最终图像的边界 const maskBounds = maskObject.getBoundingRect(true, true); - console.log("📏 遮罩边界框:", maskBounds); + // console.log("📏 遮罩边界框:", maskBounds); // 克隆所有对象，并清除它们的遮罩，避免重复应用 const clonedObjects = []; @@ -308,7 +308,7 @@ const createRasterizedImageWithMask = async ({ height: canvasHeight, }); - console.log(`🎨 离屏画布尺寸: ${canvasWidth}x${canvasHeight}, 缩放: ${scaleFactor}`); + // console.log(`🎨 离屏画布尺寸: ${canvasWidth}x${canvasHeight}, 缩放: ${scaleFactor}`); // 调整对象位置，相对于遮罩边界重新定位 clonedObjects.forEach((obj) => { @@ -376,7 +376,7 @@ const createRasterizedImageWithMask = async ({ // 确保图像位置正确 fabricImage.setCoords(); - console.log("✅ 带遮罩的栅格化图像创建完成"); + // console.log("✅ 带遮罩的栅格化图像创建完成"); return fabricImage; } catch (error) { console.error("带遮罩的栅格化失败:", error); @@ -430,12 +430,12 @@ const createFabricImageFromDataURL = (dataURL) => { */ const applyMaskToCanvas = async (canvas, maskObject, bounds) => { if (!maskObject) { - console.log("没有遮罩对象，跳过遮罩应用"); + // console.log("没有遮罩对象，跳过遮罩应用"); return; } try { - console.log("🎭 应用遮罩到画布"); + // console.log("🎭 应用遮罩到画布"); // 克隆遮罩对象，避免影响原对象 const clonedMask = await cloneObjectAsync(maskObject); @@ -459,7 +459,7 @@ const applyMaskToCanvas = async (canvas, maskObject, bounds) => { // 将遮罩设置为画布的clipPath canvas.clipPath = clonedMask; - console.log("✅ 遮罩应用完成"); + // console.log("✅ 遮罩应用完成"); } catch (error) { console.error("应用遮罩失败:", error); } diff --git a/src/component/Canvas/CanvasEditor/utils/selectionToImage.js b/src/component/Canvas/CanvasEditor/utils/selectionToImage.js index 75e39218..1b775b41 100644 --- a/src/component/Canvas/CanvasEditor/utils/selectionToImage.js +++ b/src/component/Canvas/CanvasEditor/utils/selectionToImage.js @@ -24,7 +24,7 @@ export const createRasterizedImage = async ({ isEnhanceImg, // 是否是增强图片 } = {}) => { try { - console.log(`📊 开始栅格化 ${fabricObjects.length} 个对象`); + // console.log(`📊 开始栅格化 ${fabricObjects.length} 个对象`); // 确保有对象需要栅格化 if (fabricObjects.length === 0) { @@ -86,14 +86,14 @@ const createClippedObjects = async ({ isEnhanceImg, // 是否是增强图片 }) => { try { - console.log("🎯 使用新的图像遮罩裁剪方法创建对象"); + // console.log("🎯 使用新的图像遮罩裁剪方法创建对象"); // 使用优化后的边界计算，确保包含描边区域 const optimizedBounds = calculateOptimizedBounds( clippingObject, fabricObjects ); - console.log("📐 优化后的选区边界框:", optimizedBounds); + // console.log("📐 优化后的选区边界框:", optimizedBounds); // 获取羽化值 let featherAmount = 0; @@ -102,7 +102,7 @@ const createClippedObjects = async ({ typeof selectionManager.getFeatherAmount === "function" ) { featherAmount = selectionManager.getFeatherAmount(); - console.log(`🌟 应用羽化效果: ${featherAmount}px`); + // console.log(`🌟 应用羽化效果: ${featherAmount}px`); } // 方法1：如果只需要返回DataURL，使用画布裁剪方法 @@ -160,7 +160,7 @@ const createClippedObjects = async ({ // 更新坐标 fabricImage.setCoords(); - console.log("✅ 返回裁剪后的fabric对象，已恢复到优化后的原始大小和位置"); + // console.log("✅ 返回裁剪后的fabric对象，已恢复到优化后的原始大小和位置"); return fabricImage; } catch (error) { console.warn("创建裁剪对象失败:", error); @@ -181,7 +181,7 @@ const createClippedDataURLByCanvas = async ({ isEnhanceImg = false, // 是否是增强图片 }) => { try { - console.log("🖼️ 使用图像遮罩裁剪方法生成DataURL"); + // console.log("🖼️ 使用图像遮罩裁剪方法生成DataURL"); // 使用优化后的边界计算，确保包含描边区域 // const optimizedBounds = calculateOptimizedBounds( @@ -199,18 +199,18 @@ const createClippedDataURLByCanvas = async ({ const pixelRatio = window.devicePixelRatio || 1; const qualityMultiplier = !!isEnhanceImg ? Math.max(2, pixelRatio) : 1; - console.log("使用高分辨率以保证质量:" + isEnhanceImg, optimizedBounds); + // console.log("使用高分辨率以保证质量:" + isEnhanceImg, optimizedBounds); const canvasWidth = Math.ceil(optimizedBounds.width * qualityMultiplier); const canvasHeight = Math.ceil(optimizedBounds.height * qualityMultiplier); - console.log( - `📏 优化后画布尺寸: ${canvasWidth}x${canvasHeight} (质量倍数: ${qualityMultiplier})` - ); - console.log("🎯 边界框对比:", { - original: selectionBounds, - optimized: optimizedBounds, - }); + // console.log( + // `📏 优化后画布尺寸: ${canvasWidth}x${canvasHeight} (质量倍数: ${qualityMultiplier})` + // ); + // console.log("🎯 边界框对比:", { + // original: selectionBounds, + // optimized: optimizedBounds, + // }); // 步骤1: 先将路径转换为遮罩图像（支持羽化） const maskImageDataURL = @@ -242,7 +242,7 @@ const createClippedDataURLByCanvas = async ({ canvasHeight, }); - console.log("✅ 图像遮罩裁剪完成，生成DataURL"); + // console.log("✅ 图像遮罩裁剪完成，生成DataURL"); return clippedDataURL; } catch (error) { console.error("图像遮罩裁剪失败:", error); @@ -262,7 +262,7 @@ const createSimpleClone = async ({ format, }) => { try { - console.log("📋 创建简单克隆对象"); + // console.log("📋 创建简单克隆对象"); const clonedObjects = []; @@ -370,7 +370,7 @@ const renderObjectsToDataURL = async (objects, quality, format) => { */ const renderClippedObjectsToDataURL = async (clippedObjects) => { try { - console.log("🖼️ 渲染裁剪对象为DataURL"); + // console.log("🖼️ 渲染裁剪对象为DataURL"); // 计算所有裁剪对象的总边界框 let totalBounds = null; @@ -450,7 +450,7 @@ const renderClippedObjectsToDataURL = async (clippedObjects) => { // 清理临时画布 tempCanvas.dispose(); - console.log("✅ 裁剪对象渲染完成"); + // console.log("✅ 裁剪对象渲染完成"); return dataURL; } catch (error) { console.error("渲染裁剪对象失败:", error); @@ -472,7 +472,7 @@ const createLegacyRasterization = async ({ isCropByBg, // 是否根据背景裁剪 isEnhanceImg, // 是否是增强图片 }) => { - console.log("⚠️ 使用兼容的离屏渲染方法"); +// console.log("⚠️ 使用兼容的离屏渲染方法"); // 这里保留原有的离屏渲染逻辑作为备选方案 const currentZoom = canvas.getZoom?.() || 1; @@ -522,12 +522,12 @@ const calculateBounds = (fabricObjects) => { // 获取绝对边界框（原始大小和位置） const absoluteBound = obj.getBoundingRect(true, true); - console.log(`对象 ${obj.id || index} 边界框比较:`, { - relative: relativeBound, - absolute: absoluteBound, - scaleX: obj.scaleX, - scaleY: obj.scaleY, - }); + // console.log(`对象 ${obj.id || index} 边界框比较:`, { + // relative: relativeBound, + // absolute: absoluteBound, + // scaleX: obj.scaleX, + // scaleY: obj.scaleY, + // }); // 计算绝对边界框的累积范围 if (!absoluteBounds) { @@ -600,7 +600,7 @@ const createOffscreenRasterization = async ({ let renderBounds = absoluteBounds; if (clippingObject) { const clippingBounds = clippingObject.getBoundingRect(true, true); - console.log("🎯 使用裁剪对象边界框:", clippingBounds); + // console.log("🎯 使用裁剪对象边界框:", clippingBounds); renderBounds = clippingBounds; } @@ -613,9 +613,9 @@ const createOffscreenRasterization = async ({ height: canvasHeight, }); - console.log( - `🎨 离屏画布尺寸: ${canvasWidth}x${canvasHeight}, 缩放: ${scaleFactor}` - ); + // console.log( + // `🎨 离屏画布尺寸: ${canvasWidth}x${canvasHeight}, 缩放: ${scaleFactor}` + // ); // 克隆对象到离屏画布 const clonedObjects = []; @@ -786,7 +786,7 @@ const createMaskImageFromPath = async ({ qualityMultiplier, }) => { try { - console.log("🎭 创建路径遮罩图像"); + // console.log("🎭 创建路径遮罩图像"); // 创建专门用于渲染遮罩的画布 const maskCanvas = new fabric.StaticCanvas(); @@ -820,7 +820,7 @@ const createMaskImageFromPath = async ({ // 清理遮罩画布 maskCanvas.dispose(); - console.log("✅ 遮罩图像创建完成"); + // console.log("✅ 遮罩图像创建完成"); return maskDataURL; } catch (error) { console.error("创建遮罩图像失败:", error); @@ -841,7 +841,7 @@ const renderContentToImage = async ({ qualityMultiplier, }) => { try { - console.log("🖼️ 渲染内容图像"); + // console.log("🖼️ 渲染内容图像"); // 创建内容渲染画布 const contentCanvas = new fabric.StaticCanvas(); @@ -880,7 +880,6 @@ const renderContentToImage = async ({ // if(obj.globalCompositeOperation === "multiply"){ // clonedObj.clipPath = null; // } - console.log("==========", obj.id, obj.layerName); contentCanvas.add(clonedObj); } @@ -897,7 +896,7 @@ const renderContentToImage = async ({ // 清理内容画布 contentCanvas.dispose(); - console.log("✅ 内容图像渲染完成"); + // console.log("✅ 内容图像渲染完成"); return contentDataURL; } catch (error) { console.error("渲染内容图像失败:", error); @@ -920,7 +919,7 @@ const applyImageMask = async ({ canvasHeight, }) => { try { - console.log("🎯 应用图像遮罩"); + // console.log("🎯 应用图像遮罩"); return new Promise((resolve, reject) => { // 创建用于合成的Canvas元素 @@ -952,7 +951,7 @@ const applyImageMask = async ({ // 获取最终结果 const resultDataURL = compositeCanvas.toDataURL("image/png", 1.0); - console.log("✅ 图像遮罩应用完成"); + // console.log("✅ 图像遮罩应用完成"); resolve(resultDataURL); } catch (error) { console.error("合成图像失败:", error); @@ -994,7 +993,7 @@ const createAdvancedMaskImage = async ({ featherAmount = 0, }) => { try { - console.log(`🎭 创建高级遮罩图像 (羽化: ${featherAmount})`); + // console.log(`🎭 创建高级遮罩图像 (羽化: ${featherAmount})`); // 创建专门用于渲染遮罩的画布 const maskCanvas = new fabric.StaticCanvas(); @@ -1047,7 +1046,7 @@ const createAdvancedMaskImage = async ({ // 清理遮罩画布 maskCanvas.dispose(); - console.log("✅ 高级遮罩图像创建完成"); + // console.log("✅ 高级遮罩图像创建完成"); return maskDataURL; } catch (error) { console.error("创建高级遮罩图像失败:", error); @@ -1116,7 +1115,7 @@ const createSolidMaskPath = async ( qualityMultiplier ) => { try { - console.log("🔧 创建实体遮罩路径，处理描边转填充"); + // console.log("🔧 创建实体遮罩路径，处理描边转填充"); // 克隆原始对象 const maskPath = await cloneObjectAsync(clippingObject); @@ -1125,9 +1124,9 @@ const createSolidMaskPath = async ( const hasStroke = maskPath.stroke && maskPath.strokeWidth > 0; if (hasStroke) { - console.log( - `📏 检测到描边: ${maskPath.stroke}, 宽度: ${maskPath.strokeWidth}` - ); + // console.log( + // `📏 检测到描边: ${maskPath.stroke}, 宽度: ${maskPath.strokeWidth}` + // ); // 对于有描边的路径，我们需要更精确的处理 const strokeWidth = maskPath.strokeWidth; @@ -1182,7 +1181,7 @@ const createSolidMaskPath = async ( }); } - console.log(`✅ 描边已转换为填充，类型: ${maskPath.type}`); + // console.log(`✅ 描边已转换为填充，类型: ${maskPath.type}`); } else { // 没有描边，直接处理位置和缩放 maskPath.set({ @@ -1216,7 +1215,7 @@ const createSolidMaskPath = async ( */ const calculateOptimizedBounds = (clippingObject, fabricObjects) => { try { - console.log("📐 计算优化后的边界框"); + // console.log("📐 计算优化后的边界框"); // 获取裁剪对象的边界框（包含描边） const clippingBounds = clippingObject.getBoundingRect(true, true); @@ -1232,7 +1231,7 @@ const calculateOptimizedBounds = (clippingObject, fabricObjects) => { clippingBounds.width += strokeWidth; clippingBounds.height += strokeWidth; - console.log(`🖊️ 调整描边边界框，描边宽度: ${strokeWidth}`); + // console.log(`🖊️ 调整描边边界框，描边宽度: ${strokeWidth}`); } // 计算内容对象的边界框 @@ -1246,11 +1245,11 @@ const calculateOptimizedBounds = (clippingObject, fabricObjects) => { height: Math.max(1, clippingBounds.height), }; - console.log("✅ 边界框优化完成", { - original: clippingObject.getBoundingRect(true, true), - optimized: optimizedBounds, - hasStroke: !!(clippingObject.stroke && clippingObject.strokeWidth > 0), - }); + // console.log("✅ 边界框优化完成", { + // original: clippingObject.getBoundingRect(true, true), + // optimized: optimizedBounds, + // hasStroke: !!(clippingObject.stroke && clippingObject.strokeWidth > 0), + // }); return optimizedBounds; } catch (error) { diff --git a/src/component/Canvas/canvasExample.vue b/src/component/Canvas/canvasExample.vue index cef06618..c233f19d 100644 --- a/src/component/Canvas/canvasExample.vue +++ b/src/component/Canvas/canvasExample.vue @@ -331,52 +331,55 @@ class: "export-btn", }, ]); - const otherData = { - color: { rgba: { r: 255, g: 0, b: 0, a: 1 } }, - printObject: { - prints: [ - { - ifSingle: false, - level2Type: "Pattern", - designType: "Library", - path: "/src/assets/images/canvas/yinhua1.jpg", - location: [250, 780], - scale: [1.2, 1.6], - angle: 0, - object: { - top: 600, - left: 800, - scaleX: 0.5, - scaleY: 0.5, - opacity: 1, - angle: 45, - flipX: false, - flipY: false, - blendMode: "multiply", - gapX: 0, - gapY: 0, + const canvasLoadJsonSuccess = () => { + console.log("画布加载JSON成功"); + canvasEditor.value?.updateOtherLayers({ + color: { rgba: { r: 255, g: 0, b: 0, a: 1 } }, + printObject: { + prints: [ + { + ifSingle: false, + level2Type: "Pattern", + designType: "Library", + path: "/src/assets/images/canvas/yinhua1.jpg", + location: [250, 780], + scale: [1.2, 1.6], + angle: 0, + object: { + top: 600, + left: 800, + scaleX: 0.5, + scaleY: 0.5, + opacity: 1, + angle: 45, + flipX: false, + flipY: false, + blendMode: "multiply", + gapX: 0, + gapY: 0, + }, }, - }, - // { - // ifSingle: true, - // level2Type: "Pattern", - // designType: "Library", - // path: "/src/assets/images/canvas/yinhua1.jpg", - // location: [550, 650], - // scale: [0.15, 0.2], - // angle: 0, - // }, - // { - // ifSingle: true, - // level2Type: "Pattern", - // designType: "Library", - // path: "/src/assets/images/canvas/yinhua1.jpg", - // location: [700, 400], - // scale: [0.1, 0.133], - // angle: 0, - // }, - ], - }, + // { + // ifSingle: true, + // level2Type: "Pattern", + // designType: "Library", + // path: "/src/assets/images/canvas/yinhua1.jpg", + // location: [550, 650], + // scale: [0.15, 0.2], + // angle: 0, + // }, + // { + // ifSingle: true, + // level2Type: "Pattern", + // designType: "Library", + // path: "/src/assets/images/canvas/yinhua1.jpg", + // location: [700, 400], + // scale: [0.1, 0.133], + // angle: 0, + // }, + ], + }, + }); }; @@ -408,13 +411,13 @@ :clothingMinIOPath="clothingMinIOPath" :clothingImageUrl="clothingImageUrl" :clothingImageUrl2="clothingImageUrlInit" - :otherData="otherData" :config="editorConfig" :clothing-image-opts="{ imageMode: 'contains', // 设置底图包含在画布内 }" @change-canvas="changeCanvas" @canvas-init="canvasInit" + @canvas-load-json-success="canvasLoadJsonSuccess" isFixedErasable showFixedLayer > diff --git a/src/component/Detail/canvas/index.vue b/src/component/Detail/canvas/index.vue index c3e24d92..65c160f4 100644 --- a/src/component/Detail/canvas/index.vue +++ b/src/component/Detail/canvas/index.vue @@ -355,7 +355,6 @@ export default defineComponent({ isContainNormalLayer:false, width:props.sketchSize.width, height:props.sketchSize.height}).then((rv)=>{ - console.log('====================',rv) detailData.selectDetail.undividedLayerColor = rv }) // } @@ -395,7 +394,6 @@ export default defineComponent({ // privewDetail() }) onMounted(()=>{ - console.log('==========================',detailData.canvasLoad) nextTick(async ()=>{ // detailData.currentView = 'canvasEditor' const sessionCanvasList = sessionStorage.getItem('canvasList');