aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

去除画布打印信息

Browse Source
This commit is contained in:
李志鹏
2026-01-19 16:57:11 +08:00
parent 7ff2c2095a
commit 74b43e431b
19 changed files with 273 additions and 294 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/component/Canvas/CanvasEditor/commands/FillGroupLayerBackgroundCommand.js
View File

@@ -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) {

4
src/component/Canvas/CanvasEditor/commands/LayerCommands.js
View File

@@ -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);

4
src/component/Canvas/CanvasEditor/commands/ObjectLayerCommands.js
View File

@@ -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);

42
src/component/Canvas/CanvasEditor/commands/RasterizeLayerCommand.js
View File

@@ -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,
// }))
// );
}
/**

1
src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue
View File

@@ -34,7 +34,6 @@ const props = defineProps({
default: "", // 衣服底图URL-线稿
},
});
console.log(props.clothingMinIOPath)
const commandManager = inject("commandManager");
const layerManager = inject("layerManager"); // 图层管理器

10
src/component/Canvas/CanvasEditor/index.vue
View File

@@ -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();
// }
}
// // 设置固定图层是否可擦除

8
src/component/Canvas/CanvasEditor/managers/CanvasManager.js
View File

@@ -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());
// 验证图层关联关系 - 稳定后可以注释

2
src/component/Canvas/CanvasEditor/managers/ExportManager.js
View File

@@ -681,7 +681,7 @@ export class ExportManager {
isEnhanceImg, // 是否是增强图片
});
console.log("导出图片数据URL:", dataURL);
// console.log("导出图片数据URL:", dataURL);
return dataURL;
// // 创建与画布相同尺寸的临时画布

113
src/component/Canvas/CanvasEditor/managers/LayerManager.js
View File

@@ -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 事件");
}
/**

26
src/component/Canvas/CanvasEditor/managers/ThumbnailManager.js
View File

@@ -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;
}

26
src/component/Canvas/CanvasEditor/managers/ToolManager.js
View File

@@ -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}`);
}
/**

2
src/component/Canvas/CanvasEditor/managers/command/CommandManager.js
View File

@@ -299,7 +299,7 @@ export class CommandManager {
this.undoStack = [];
this.redoStack = [];
this._notifyStateChange();
console.log("📝 命令历史已清空");
// console.log("📝 命令历史已清空");
}
/**

52
src/component/Canvas/CanvasEditor/managers/events/CanvasEventManager.js
View File

@@ -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 {

20
src/component/Canvas/CanvasEditor/managers/events/KeyboardManager.js
View File

@@ -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;

26
src/component/Canvas/CanvasEditor/managers/liquify/LiquifyStateManager.js
View File

@@ -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("🧹 液化状态管理器已清理");
}
// === 私有方法 ===

30
src/component/Canvas/CanvasEditor/utils/rasterizedImage.js
View File

@@ -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);
}

99
src/component/Canvas/CanvasEditor/utils/selectionToImage.js
View File

@@ -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) {

95
src/component/Canvas/canvasExample.vue
View File

@@ -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,
// },
],
},
});
};
</script>
@@ -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
>

2
src/component/Detail/canvas/index.vue
View File

@@ -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');