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.layer = layer;
this.parent = parent; this.parent = parent;
console.log("==========",layer);
if (!layer) return false; if (!layer) return false;
if(!isUndo){ if(!isUndo){
@@ -343,10 +342,6 @@ export class FillGroupLayerBackgroundCommand extends Command {
minTop = Infinity, minTop = Infinity,
maxRight = -Infinity, maxRight = -Infinity,
maxBottom = -Infinity; maxBottom = -Infinity;
console.log(
"计算当前所有对象的边界信息:===>",
this.originalfabricObjects.length
);
this.originalfabricObjects?.forEach((obj) => { this.originalfabricObjects?.forEach((obj) => {
const { object } = findObjectById(this.canvas, obj.id) || {}; const { object } = findObjectById(this.canvas, obj.id) || {};
if (object) { if (object) {

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

@@ -3684,7 +3684,7 @@ export class ChangeFixedImageCommand extends Command {
opacity: currentObj.opacity, 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 false
); );
if (insertSuccess) { if (insertSuccess) {
console.log(`新图像插入到z-index位置: ${this.previousZIndex}`); // console.log(`新图像插入到z-index位置: ${this.previousZIndex}`);
} else { } else {
// 如果插入失败，回退到普通添加 // 如果插入失败，回退到普通添加
this.canvas.add(newImage); 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, 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 false
); );
if (insertSuccess) { if (insertSuccess) {
console.log(`新图像插入到z-index位置: ${this.previousZIndex}`); // console.log(`新图像插入到z-index位置: ${this.previousZIndex}`);
} else { } else {
// 如果插入失败，回退到普通添加 // 如果插入失败，回退到普通添加
this.canvas.add(newImage); 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); this.objectsToRasterize = objectsWithZIndex.map((item) => item.object);
console.log( // console.log(`📊 收集到 ${this.layersToRasterize.length} 个图层，${this.objectsToRasterize.length} 个对象进行组合` );
`📊 收集到 ${this.layersToRasterize.length} 个图层，${this.objectsToRasterize.length} 个对象进行组合` // console.log(
); // "🔢 对象z-index顺序:",
console.log( // objectsWithZIndex.map((item) => ({
"🔢 对象z-index顺序:", // id: item.object.id,
objectsWithZIndex.map((item) => ({ // type: item.object.type,
id: item.object.id, // zIndex: item.zIndex,
type: item.object.type, // }))
zIndex: item.zIndex, // );
}))
);
} }
/** /**
@@ -611,17 +609,17 @@ export class ExportLayerToImageCommand extends Command {
// 提取排序后的对象 // 提取排序后的对象
this.objectsToRasterize = objectsWithZIndex.map((item) => item.object); this.objectsToRasterize = objectsWithZIndex.map((item) => item.object);
console.log( // console.log(
`📊 收集到 ${this.layersToRasterize.length} 个图层，${this.objectsToRasterize.length} 个对象进行组合` // `📊 收集到 ${this.layersToRasterize.length} 个图层，${this.objectsToRasterize.length} 个对象进行组合`
); // );
console.log( // console.log(
"🔢 对象z-index顺序:", // "🔢 对象z-index顺序:",
objectsWithZIndex.map((item) => ({ // objectsWithZIndex.map((item) => ({
id: item.object.id, // id: item.object.id,
type: item.object.type, // type: item.object.type,
zIndex: item.zIndex, // zIndex: item.zIndex,
})) // }))
); // );
} }
/** /**

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

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

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

@@ -71,10 +71,6 @@ const props = defineProps({
type: [Object, String], type: [Object, String],
default: "", // 默认空 default: "", // 默认空
}, },
otherData: {
type: [Object, null],
default: null, // 默认空对象
},
config: { config: {
type: Object, type: Object,
default: () => CanvasConfig, // 默认配置 default: () => CanvasConfig, // 默认配置
@@ -472,12 +468,6 @@ onMounted(async () => {
canvasManager.canvas.width, canvasManager.canvas.width,
canvasManager.canvas.height 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) { updateMaskPosition(backgroundLayerObject) {
if (!backgroundLayerObject || !this.maskLayer || !this.canvas.clipPath) if (!backgroundLayerObject || !this.maskLayer || !this.canvas.clipPath)
return; return;
console.log("backgroundLayerObject");
const left = backgroundLayerObject.left; const left = backgroundLayerObject.left;
const top = backgroundLayerObject.top; const top = backgroundLayerObject.top;
@@ -1294,7 +1293,6 @@ export class CanvasManager {
} }
loadJSON(json, calllBack) { loadJSON(json, calllBack) {
console.log("加载画布JSON数据:", json);
// 确保传入的json是字符串格式 // 确保传入的json是字符串格式
if (typeof json === "object") { if (typeof json === "object") {
@@ -1305,6 +1303,7 @@ export class CanvasManager {
// 解析JSON字符串 // 解析JSON字符串
try { try {
const parsedJson = JSON.parse(json); const parsedJson = JSON.parse(json);
console.log("加载画布JSON数据:", parsedJson);
this.canvasWidth.value = parsedJson.canvasWidth || this.width; this.canvasWidth.value = parsedJson.canvasWidth || this.width;
this.canvasHeight.value = parsedJson.canvasHeight || this.height; this.canvasHeight.value = parsedJson.canvasHeight || this.height;
this.canvasColor.value = parsedJson.canvasColor || this.backgroundColor; this.canvasColor.value = parsedJson.canvasColor || this.backgroundColor;
@@ -1330,7 +1329,7 @@ export class CanvasManager {
// this.canvasHeight.value = parsedJson.canvasHeight || this.height; // this.canvasHeight.value = parsedJson.canvasHeight || this.height;
// this.canvasColor.value = parsedJson.canvasColor || this.backgroundColor; // this.canvasColor.value = parsedJson.canvasColor || this.backgroundColor;
console.log("是否检测到红绿图模式内容:", this.enabledRedGreenMode); // console.log("是否检测到红绿图模式内容:", this.enabledRedGreenMode);
// 重置视图变换以确保元素位置正确 // 重置视图变换以确保元素位置正确
this._resetViewportTransform(1); this._resetViewportTransform(1);
@@ -1342,7 +1341,7 @@ export class CanvasManager {
// 清除当前画布内容 // 清除当前画布内容
// this.canvas.clear(); // 清除画布内容 可以先去掉 这样加载闪动的情况就比较少 如果有问题 可以再打开 // this.canvas.clear(); // 清除画布内容 可以先去掉 这样加载闪动的情况就比较少 如果有问题 可以再打开
console.log("清除当前画布内容", canvasData); // console.log("清除当前画布内容", canvasData);
delete canvasData.clipPath; // 删除当前裁剪路径 delete canvasData.clipPath; // 删除当前裁剪路径
// 加载画布数据 // 加载画布数据
this.canvas.loadFromJSON(canvasData, async () => { this.canvas.loadFromJSON(canvasData, async () => {
@@ -1371,7 +1370,6 @@ export class CanvasManager {
// 重置画布数据 // 重置画布数据
await this.setCanvasSize(this.canvas.width, this.canvas.height); await this.setCanvasSize(this.canvas.width, this.canvas.height);
await this.centerBackgroundLayer(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()); // 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, // 是否是增强图片 isEnhanceImg, // 是否是增强图片
}); });
console.log("导出图片数据URL:", dataURL); // console.log("导出图片数据URL:", dataURL);
return dataURL; return dataURL;
// // 创建与画布相同尺寸的临时画布 // // 创建与画布相同尺寸的临时画布

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

@@ -149,7 +149,7 @@ export class LayerManager {
*/ */
initCommandManager() { initCommandManager() {
// 命令注册逻辑已移除，现在直接使用命令类实例化和执行 // 命令注册逻辑已移除，现在直接使用命令类实例化和执行
console.log("CommandManager 已初始化，使用直接命令调用模式"); // console.log("CommandManager 已初始化，使用直接命令调用模式");
} }
/** /**
@@ -161,7 +161,7 @@ export class LayerManager {
this.layerSort = createLayerSort(this.canvas, this.layers, { this.layerSort = createLayerSort(this.canvas, this.layers, {
commandManager: this.commandManager, commandManager: this.commandManager,
}); });
console.log("图层排序工具已初始化"); // console.log("图层排序工具已初始化");
} }
} }
@@ -180,7 +180,7 @@ export class LayerManager {
// 更新所有对象的交互性 // 更新所有对象的交互性
this.updateLayersObjectsInteractivity(); this.updateLayersObjectsInteractivity();
console.log(`已切换到${mode}模式`); // console.log(`已切换到${mode}模式`);
} }
setToolManager(toolManager) { setToolManager(toolManager) {
@@ -332,7 +332,7 @@ export class LayerManager {
// 私有方法：应用交互规则 // 私有方法：应用交互规则
async _applyInteractionRules({ isMoveing }) { async _applyInteractionRules({ isMoveing }) {
console.log("updateLayersObjectsInteractivity ===>", this.editorMode); // console.log("updateLayersObjectsInteractivity ===>", this.editorMode);
const objects = this.canvas.getObjects(); const objects = this.canvas.getObjects();
const editorMode = this.editorMode || CanvasConfig.defaultTool; const editorMode = this.editorMode || CanvasConfig.defaultTool;
const layers = this.layers?.value || []; const layers = this.layers?.value || [];
@@ -975,7 +975,7 @@ export class LayerManager {
return !layer.isFixed && !layer.isFixedOther && !layer.isBackground return !layer.isFixed && !layer.isFixedOther && !layer.isBackground
}) })
// const normalLayers = this.layers.value.filter((l) => !l.isBackground && !l.isFixed && !l.isFixedOther); // 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 if (isChild ? parentLength <= 1 : false) {//normalLayers.length <= 1
console.warn("不能删除唯一的普通图层"); console.warn("不能删除唯一的普通图层");
message.warning(this.t("Canvas.cannotDeleteOnlyLayer")); message.warning(this.t("Canvas.cannotDeleteOnlyLayer"));
@@ -1096,14 +1096,14 @@ export class LayerManager {
if (this.commandManager) { if (this.commandManager) {
const result = this.commandManager.execute(command); const result = this.commandManager.execute(command);
if (result) { if (result) {
console.log(`✅ 图层移动成功: ${direction}`); // console.log(`✅ 图层移动成功: ${direction}`);
} }
return result; return result;
} else { } else {
const result = command.execute(); const result = command.execute();
if (result) { if (result) {
// 更新画布渲染顺序 // 更新画布渲染顺序
console.log(`✅ 图层移动成功: ${direction}`); // console.log(`✅ 图层移动成功: ${direction}`);
} }
return result; return result;
} }
@@ -1147,7 +1147,6 @@ export class LayerManager {
return acc; return acc;
}, []); }, []);
console.log("==========", allObjects)
// if (layer.fill) { // if (layer.fill) {
// // 如果图层有填充颜色，设置所有对象的填充颜色 // // 如果图层有填充颜色，设置所有对象的填充颜色
// const { object } = findObjectById(this.canvas, layer.fill.id); // const { object } = findObjectById(this.canvas, layer.fill.id);
@@ -1845,7 +1844,7 @@ export class LayerManager {
input.select(); input.select();
document.execCommand("copy"); document.execCommand("copy");
document.body.removeChild(input); document.body.removeChild(input);
console.log(`已复制图层：${layer.name}`); // console.log(`已复制图层：${layer.name}`);
return this.clipboardData; return this.clipboardData;
} }
@@ -1870,7 +1869,7 @@ export class LayerManager {
// 检查是否是唯一的普通图层 // 检查是否是唯一的普通图层
const normalLayers = this.layers.value.filter((l) => !l.isBackground && !l.isFixed && !l.isFixedOther); const normalLayers = this.layers.value.filter((l) => !l.isBackground && !l.isFixed && !l.isFixedOther);
console.log("普通图层:", normalLayers) // console.log("普通图层:", normalLayers)
if (normalLayers.length <= 1) { if (normalLayers.length <= 1) {
console.warn("不能剪切唯一的普通图层"); console.warn("不能剪切唯一的普通图层");
return null; return null;
@@ -1930,7 +1929,7 @@ export class LayerManager {
// 更新对象交互性 // 更新对象交互性
this.updateLayersObjectsInteractivity(); this.updateLayersObjectsInteractivity();
console.log(`已剪切图层：${layer.name}`); // console.log(`已剪切图层：${layer.name}`);
return this.clipboardData; return this.clipboardData;
} }
@@ -1944,7 +1943,7 @@ export class LayerManager {
* @returns {string} 新创建的图层ID * @returns {string} 新创建的图层ID
*/ */
async pasteLayer(event) { async pasteLayer(event) {
console.log("剪贴板数据:", this.clipboardData,event); // console.log("剪贴板数据:", this.clipboardData,event);
if (!this.clipboardData) { if (!this.clipboardData) {
console.error("剪贴板中没有图层数据"); console.error("剪贴板中没有图层数据");
return null; return null;
@@ -2099,7 +2098,7 @@ export class LayerManager {
// 重新初始化基本图层 // 重新初始化基本图层
this.initializeLayers(); this.initializeLayers();
console.log("已清空画布"); // console.log("已清空画布");
} }
/** /**
@@ -2312,7 +2311,7 @@ export class LayerManager {
}); });
if (emptyLayerIds.length > 0) { if (emptyLayerIds.length > 0) {
console.log(`已清理 ${emptyLayerIds.length} 个空图层`); // console.log(`已清理 ${emptyLayerIds.length} 个空图层`);
} }
return emptyLayerIds; return emptyLayerIds;
@@ -2344,7 +2343,7 @@ export class LayerManager {
this.canvasManager = null; this.canvasManager = null;
this.toolManager = null; this.toolManager = null;
console.log("LayerManager 已销毁"); // console.log("LayerManager 已销毁");
} }
/** /**
@@ -2652,13 +2651,13 @@ export class LayerManager {
// 启用红绿图模式 // 启用红绿图模式
enableRedGreenMode() { enableRedGreenMode() {
this.isRedGreenMode = true; this.isRedGreenMode = true;
console.log("图层管理器：红绿图模式已启用"); // console.log("图层管理器：红绿图模式已启用");
} }
// 禁用红绿图模式 // 禁用红绿图模式
disableRedGreenMode() { disableRedGreenMode() {
this.isRedGreenMode = false; this.isRedGreenMode = false;
console.log("图层管理器：红绿图模式已禁用"); // console.log("图层管理器：红绿图模式已禁用");
} }
// 检查是否为红绿图模式 // 检查是否为红绿图模式
@@ -2708,14 +2707,14 @@ export class LayerManager {
: LayerSortUtils.shouldUseAsyncProcessing(objectsCount, layersCount); : LayerSortUtils.shouldUseAsyncProcessing(objectsCount, layersCount);
if (shouldUseAsync) { if (shouldUseAsync) {
console.log( // console.log(
`使用异步排序处理 ${objectsCount} 个对象, ${layersCount} 个图层` // `使用异步排序处理 ${objectsCount} 个对象, ${layersCount} 个图层`
); // );
return this.layerSort.rearrangeObjectsAsync(); return this.layerSort.rearrangeObjectsAsync();
} else { } else {
console.log( // console.log(
`使用同步排序处理 ${objectsCount} 个对象, ${layersCount} 个图层` // `使用同步排序处理 ${objectsCount} 个对象, ${layersCount} 个图层`
); // );
this.layerSort.rearrangeObjects(); this.layerSort.rearrangeObjects();
} }
} }
@@ -2735,7 +2734,7 @@ export class LayerManager {
const result = this.layerSort.smartSort(targetLayerIds); const result = this.layerSort.smartSort(targetLayerIds);
if (result) { if (result) {
console.log("智能排序完成"); // console.log("智能排序完成");
// 更新对象交互性 // 更新对象交互性
this.updateLayersObjectsInteractivity(); this.updateLayersObjectsInteractivity();
} }
@@ -2761,9 +2760,9 @@ export class LayerManager {
const stats = this.layerSort.optimizeLayerStructure(); const stats = this.layerSort.optimizeLayerStructure();
if (stats.removedEmptyLayers > 0 || stats.reorderedLayers > 0) { if (stats.removedEmptyLayers > 0 || stats.reorderedLayers > 0) {
console.log( // console.log(
`图层结构优化完成: 清理空图层 ${stats.removedEmptyLayers} 个, 重新排序 ${stats.reorderedLayers} 个图层` // `图层结构优化完成: 清理空图层 ${stats.removedEmptyLayers} 个, 重新排序 ${stats.reorderedLayers} 个图层`
); // );
// 更新对象交互性 // 更新对象交互性
this.updateLayersObjectsInteractivity(); this.updateLayersObjectsInteractivity();
} }
@@ -2838,9 +2837,9 @@ export class LayerManager {
}); });
if (result) { if (result) {
console.log( // console.log(
`图层 ${layerId} - oldIndex: ${oldIndex} 已移动到位置 ${newIndex}` // `图层 ${layerId} - oldIndex: ${oldIndex} 已移动到位置 ${newIndex}`
); // );
// 更新对象交互性 // 更新对象交互性
// this.updateLayersObjectsInteractivity(); // this.updateLayersObjectsInteractivity();
} }
@@ -2917,9 +2916,9 @@ export class LayerManager {
const result = this.layerSort.reorderLayers(oldIndex, newIndex, layerId); const result = this.layerSort.reorderLayers(oldIndex, newIndex, layerId);
if (result) { if (result) {
console.log( // console.log(
`高级排序完成: 图层 ${layerId} 从位置 ${oldIndex} 移动到 ${newIndex}` // `高级排序完成: 图层 ${layerId} 从位置 ${oldIndex} 移动到 ${newIndex}`
); // );
// 更新对象交互性 // 更新对象交互性
this.updateLayersObjectsInteractivity(); this.updateLayersObjectsInteractivity();
} }
@@ -2944,9 +2943,9 @@ export class LayerManager {
); );
if (result) { if (result) {
console.log( // console.log(
`高级子图层排序完成: 图层 ${layerId} 在父图层 ${parentId} 中从位置 ${oldIndex} 移动到 ${newIndex}` // `高级子图层排序完成: 图层 ${layerId} 在父图层 ${parentId} 中从位置 ${oldIndex} 移动到 ${newIndex}`
); // );
// 重新排列画布对象 // 重新排列画布对象
this.rearrangeCanvasObjects(); this.rearrangeCanvasObjects();
} }
@@ -2971,7 +2970,7 @@ export class LayerManager {
// 重新排列画布对象 // 重新排列画布对象
this.rearrangeCanvasObjects(); this.rearrangeCanvasObjects();
console.log("使用LayerSort工具完成图层排序"); // console.log("使用LayerSort工具完成图层排序");
} }
/** /**
@@ -2979,7 +2978,7 @@ export class LayerManager {
* 当图层顺序发生变化后调用此方法确保画布对象顺序正确 * 当图层顺序发生变化后调用此方法确保画布对象顺序正确
*/ */
forceRebuildCanvasOrder() { forceRebuildCanvasOrder() {
console.log("强制重建画布对象顺序"); // console.log("强制重建画布对象顺序");
if (this.layerSort) { if (this.layerSort) {
// 使用LayerSort的高级排序 // 使用LayerSort的高级排序
@@ -3010,7 +3009,7 @@ export class LayerManager {
return false; return false;
} }
console.log(`开始批量重新排序 ${reorderOperations.length} 个图层`); // console.log(`开始批量重新排序 ${reorderOperations.length} 个图层`);
let allSuccessful = true; let allSuccessful = true;
@@ -3042,7 +3041,7 @@ export class LayerManager {
} }
if (allSuccessful) { if (allSuccessful) {
console.log("批量图层排序完成"); // console.log("批量图层排序完成");
} else { } else {
console.warn("批量图层排序部分失败"); console.warn("批量图层排序部分失败");
} }
@@ -3079,11 +3078,11 @@ export class LayerManager {
// 执行命令 // 执行命令
if (this.commandManager) { if (this.commandManager) {
const result = await this.commandManager.execute(command); const result = await this.commandManager.execute(command);
result && console.log(`✅ 成功合并组图层: ${groupLayer.name}`); // result && console.log(`✅ 成功合并组图层: ${groupLayer.name}`);
return result; return result;
} else { } else {
const result = await command.execute(); const result = await command.execute();
result && console.log(`✅ 成功合并组图层: ${groupLayer.name}`); // result && console.log(`✅ 成功合并组图层: ${groupLayer.name}`);
return result || []; return result || [];
} }
} }
@@ -3132,13 +3131,13 @@ export class LayerManager {
if (this.commandManager) { if (this.commandManager) {
const result = await this.commandManager.execute(command); const result = await this.commandManager.execute(command);
if (result) { if (result) {
console.log(`✅ 成功栅格化图层: ${targetLayer.name}`); // console.log(`✅ 成功栅格化图层: ${targetLayer.name}`);
} }
return result; return result;
} else { } else {
const result = await command.execute(); const result = await command.execute();
if (result) { if (result) {
console.log(`✅ 成功栅格化图层: ${targetLayer.name}`); // console.log(`✅ 成功栅格化图层: ${targetLayer.name}`);
} }
return result; return result;
} }
@@ -3209,13 +3208,13 @@ export class LayerManager {
if (this.commandManager) { if (this.commandManager) {
const result = await this.commandManager.execute(command); const result = await this.commandManager.execute(command);
if (result) { if (result) {
console.log(`✅ 成功导出图层: ${targetLayer.name}`); // console.log(`✅ 成功导出图层: ${targetLayer.name}`);
} }
return result; return result;
} else { } else {
const result = await command.execute(); const result = await command.execute();
if (result) { if (result) {
console.log(`✅ 成功导出图层: ${targetLayer.name}`); // console.log(`✅ 成功导出图层: ${targetLayer.name}`);
} }
return result; return result;
} }
@@ -3259,7 +3258,7 @@ export class LayerManager {
// 执行命令 // 执行命令
const result = await command.execute(false); const result = await command.execute(false);
if (result) { if (result) {
console.log(`✅ 成功导出图层: ${targetLayer.name}`); // console.log(`✅ 成功导出图层: ${targetLayer.name}`);
} }
return result; return result;
} }
@@ -3294,12 +3293,12 @@ export class LayerManager {
const isSginleObject = e.target === activeSelection?._objects?.[0]; const isSginleObject = e.target === activeSelection?._objects?.[0];
if (e.target === activeSelection || isSginleObject) { if (e.target === activeSelection || isSginleObject) {
hasMoved = false; // 重置移动状态 hasMoved = false; // 重置移动状态
console.log("🎯 开始移动组选择对象"); // console.log("🎯 开始移动组选择对象");
// 记录遮罩初始位置 // 记录遮罩初始位置
console.log( // console.log(
"🖼️ 记录遮罩初始位置", // "🖼️ 记录遮罩初始位置",
`${layer.clippingMask.left || 0}, ${layer.clippingMask.top || 0}` // `${layer.clippingMask.left || 0}, ${layer.clippingMask.top || 0}`
); // );
// 记录初始位置 // 记录初始位置
initialLeft = isSginleObject ? e.target.left : activeSelection.left; initialLeft = isSginleObject ? e.target.left : activeSelection.left;
initialTop = isSginleObject ? e.target.top : activeSelection.top; initialTop = isSginleObject ? e.target.top : activeSelection.top;
@@ -3366,12 +3365,12 @@ export class LayerManager {
const isSginleObject = e.target === activeSelection?._objects?.[0]; const isSginleObject = e.target === activeSelection?._objects?.[0];
if (isSginleObject) { if (isSginleObject) {
// 如果是单个对象，不处理 // 如果是单个对象，不处理
console.log("🚫 单个对象不处理移动完成"); // console.log("🚫 单个对象不处理移动完成");
hasMoved = false; // 重置移动状态 hasMoved = false; // 重置移动状态
return; return;
} }
if ((target === activeSelection || isSginleObject) && hasMoved) { if ((target === activeSelection || isSginleObject) && hasMoved) {
console.log("✅ 组选择对象移动完成"); // console.log("✅ 组选择对象移动完成");
// 计算最终移动距离 // 计算最终移动距离
const deltaX = target.left - initialLeft; const deltaX = target.left - initialLeft;
@@ -3410,7 +3409,7 @@ export class LayerManager {
// 鼠标抬起事件处理 - 备用方案 // 鼠标抬起事件处理 - 备用方案
const handleMouseUp = (e) => { const handleMouseUp = (e) => {
if (hasMoved && this.canvas.getActiveObject() === activeSelection) { if (hasMoved && this.canvas.getActiveObject() === activeSelection) {
console.log("🖱️ 鼠标抬起 - 备用移动完成处理"); // console.log("🖱️ 鼠标抬起 - 备用移动完成处理");
handleModified(e); handleModified(e);
} }
}; };
@@ -3424,7 +3423,7 @@ export class LayerManager {
this.canvas.off("selection:cleared", cleanup); this.canvas.off("selection:cleared", cleanup);
this.canvas.off("selection:updated", 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:cleared", cleanup);
this.canvas.on("selection:updated", 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); const { layer } = findLayerRecursively(this.layers.value, layerId);
if (!fabricObjects || fabricObjects.length === 0) { if (!fabricObjects || fabricObjects.length === 0) {
console.warn("⚠️ 无法生成缩略图：没有可栅格化的对象 返回空缩略图"); // console.warn("⚠️ 无法生成缩略图：没有可栅格化的对象 返回空缩略图");
// 如果没有对象，返回默认缩略图 // 如果没有对象，返回默认缩略图
if (layer) { if (layer) {
layer.thumbnailUrl = this.defaultThumbnail; // 更新图层对象的缩略图 layer.thumbnailUrl = this.defaultThumbnail; // 更新图层对象的缩略图
@@ -123,7 +123,7 @@ export class ThumbnailManager {
*/ */
_collectLayersAndObjects(layerId) { _collectLayersAndObjects(layerId) {
if (!layerId) { if (!layerId) {
console.warn("⚠️ 无效的图层ID，无法收集对象"); // console.warn("⚠️ 无效的图层ID，无法收集对象");
return []; return [];
} }
@@ -199,17 +199,17 @@ export class ThumbnailManager {
// 提取排序后的对象 // 提取排序后的对象
const objectsToRasterize = objectsWithZIndex.map((item) => item.object); const objectsToRasterize = objectsWithZIndex.map((item) => item.object);
console.log( // console.log(
`📊 收集到 ${layersToRasterize.length} 个图层，${objectsToRasterize.length} 个对象进行栅格化` // `📊 收集到 ${layersToRasterize.length} 个图层，${objectsToRasterize.length} 个对象进行栅格化`
); // );
console.log( // console.log(
"🔢 对象z-index顺序:", // "🔢 对象z-index顺序:",
objectsWithZIndex.map((item) => ({ // objectsWithZIndex.map((item) => ({
id: item.object.id, // id: item.object.id,
type: item.object.type, // type: item.object.type,
zIndex: item.zIndex, // zIndex: item.zIndex,
})) // }))
); // );
return objectsToRasterize; 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") { if (tool && typeof tool.setup === "function") {
console.log(`画布切换工具:${tool.name}(${toolId})`) // console.log(`画布切换工具:${tool.name}(${toolId})`)
this.canvas.toolId = toolId; this.canvas.toolId = toolId;
tool.setup(); tool.setup();
} }
@@ -695,7 +695,7 @@ export class ToolManager {
// // 设置矩形选区模式 // // 设置矩形选区模式
// // 这里需要具体的矩形选区工具实现 // // 这里需要具体的矩形选区工具实现
console.log("矩形选区工具已激活"); // console.log("矩形选区工具已激活");
if (this.canvasManager && this.canvasManager.selectionManager) { if (this.canvasManager && this.canvasManager.selectionManager) {
this.canvasManager.selectionManager.setCurrentTool( this.canvasManager.selectionManager.setCurrentTool(
@@ -894,7 +894,7 @@ export class ToolManager {
this._rasterizeLayerForLiquify(layerId); this._rasterizeLayerForLiquify(layerId);
}, },
onCancel: () => { onCancel: () => {
console.log("用户取消了栅格化操作"); // console.log("用户取消了栅格化操作");
// 用户取消，触发液化面板显示事件但不能液化 // 用户取消，触发液化面板显示事件但不能液化
document.dispatchEvent( document.dispatchEvent(
new CustomEvent("showLiquifyPanel", { new CustomEvent("showLiquifyPanel", {
@@ -1286,7 +1286,7 @@ export class ToolManager {
*/ */
showTextEditor(textObject, layer) { showTextEditor(textObject, layer) {
// 这个方法将在TextEditorPanel组件实现后调用 // 这个方法将在TextEditorPanel组件实现后调用
console.log("显示文本编辑面板", textObject, layer); // console.log("显示文本编辑面板", textObject, layer);
// 将发出一个事件，让Vue组件捕获并显示编辑面板 // 将发出一个事件，让Vue组件捕获并显示编辑面板
document.dispatchEvent( document.dispatchEvent(
new CustomEvent("showTextEditor", { new CustomEvent("showTextEditor", {
@@ -1302,7 +1302,7 @@ export class ToolManager {
*/ */
hideTextEditor() { hideTextEditor() {
// 这个方法将在TextEditorPanel组件实现后调用 // 这个方法将在TextEditorPanel组件实现后调用
console.log("隐藏文本编辑面板"); // console.log("隐藏文本编辑面板");
// 将发出一个事件，让Vue组件捕获并隐藏编辑面板 // 将发出一个事件，让Vue组件捕获并隐藏编辑面板
document.dispatchEvent( document.dispatchEvent(
new CustomEvent("hideTextEditor", { new CustomEvent("hideTextEditor", {
@@ -1323,7 +1323,7 @@ export class ToolManager {
if (this.brushIndicator) { if (this.brushIndicator) {
this.brushIndicator.dispose(); this.brushIndicator.dispose();
this.brushIndicator = null; this.brushIndicator = null;
console.log("笔刷指示器已清理"); // console.log("笔刷指示器已清理");
} }
// 移除文本编辑相关事件监听器 // 移除文本编辑相关事件监听器
@@ -1348,7 +1348,7 @@ export class ToolManager {
this.canvas.isDrawingMode = false; this.canvas.isDrawingMode = false;
this.canvas.selection = false; this.canvas.selection = false;
console.log("文本工具已激活"); // console.log("文本工具已激活");
} }
/** /**
@@ -1424,7 +1424,7 @@ export class ToolManager {
// 切换到红色笔刷工具作为默认工具 // 切换到红色笔刷工具作为默认工具
this.setTool(OperationType.RED_BRUSH); this.setTool(OperationType.RED_BRUSH);
console.log("工具管理器已进入红绿图模式"); // console.log("工具管理器已进入红绿图模式");
} }
/** /**
@@ -1437,7 +1437,7 @@ export class ToolManager {
// 切换回选择工具 // 切换回选择工具
this.setTool(OperationType.SELECT); this.setTool(OperationType.SELECT);
console.log("工具管理器已退出红绿图模式"); // console.log("工具管理器已退出红绿图模式");
} }
/** /**
@@ -1495,7 +1495,7 @@ export class ToolManager {
// 更新指示器颜色 // 更新指示器颜色
this.brushIndicator.updateColor(brushColor); this.brushIndicator.updateColor(brushColor);
console.log(`笔刷指示器已启用，大小: ${brushSize}, 颜色: ${brushColor}`); // console.log(`笔刷指示器已启用，大小: ${brushSize}, 颜色: ${brushColor}`);
} }
/** /**
@@ -1506,7 +1506,7 @@ export class ToolManager {
if (!this.brushIndicator) return; if (!this.brushIndicator) return;
this.brushIndicator.disable(); this.brushIndicator.disable();
console.log("笔刷指示器已禁用"); // console.log("笔刷指示器已禁用");
} }
/** /**
@@ -1517,7 +1517,7 @@ export class ToolManager {
if (!this.brushIndicator) return; if (!this.brushIndicator) return;
this.brushIndicator.updateSize(size); this.brushIndicator.updateSize(size);
console.log(`笔刷指示器大小已更新为: ${size}`); // console.log(`笔刷指示器大小已更新为: ${size}`);
} }
/** /**
@@ -1528,7 +1528,7 @@ export class ToolManager {
if (!this.brushIndicator) return; if (!this.brushIndicator) return;
this.brushIndicator.updateColor(color); 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.undoStack = [];
this.redoStack = []; this.redoStack = [];
this._notifyStateChange(); 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") { 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) { if (e.touches.length === 2) {
@@ -500,11 +500,11 @@ export class CanvasEventManager {
this.touchState.zoomCenter = { x: centerX, y: centerY }; this.touchState.zoomCenter = { x: centerX, y: centerY };
if (process.env.NODE_ENV === "development") { if (process.env.NODE_ENV === "development") {
console.log("iPad双指缩放开始:", { // console.log("iPad双指缩放开始:", {
distance: lastTouchDistance, // distance: lastTouchDistance,
zoom: lastZoom, // zoom: lastZoom,
center: this.touchState.zoomCenter, // center: this.touchState.zoomCenter,
}); // });
} }
e.preventDefault(); e.preventDefault();
@@ -554,14 +554,14 @@ export class CanvasEventManager {
const clampedZoom = Math.max(0.1, Math.min(5, newZoom)); const clampedZoom = Math.max(0.1, Math.min(5, newZoom));
if (process.env.NODE_ENV === "development") { if (process.env.NODE_ENV === "development") {
console.log("iPad双指缩放中:", { // console.log("iPad双指缩放中:", {
currentDistance, // currentDistance,
lastTouchDistance, // lastTouchDistance,
scale, // scale,
currentZoom, // currentZoom,
newZoom, // newZoom,
clampedZoom, // clampedZoom,
}); // });
} }
// 使用缩放中心点进行缩放 // 使用缩放中心点进行缩放
@@ -839,7 +839,7 @@ export class CanvasEventManager {
const hasNewImage = !!fabricImage; const hasNewImage = !!fabricImage;
if (!hasExistingObjects && !hasNewImage) { if (!hasExistingObjects && !hasNewImage) {
console.log("没有对象需要合并"); // console.log("没有对象需要合并");
return; return;
} }
@@ -851,7 +851,7 @@ export class CanvasEventManager {
// 执行高保真合并操作 // 执行高保真合并操作
try { try {
console.log(`开始合并图层 ${activeLayer.name} 中的对象为组...`); // console.log(`开始合并图层 ${activeLayer.name} 中的对象为组...`);
const command = await this.layerManager.LayerObjectsToGroup( const command = await this.layerManager.LayerObjectsToGroup(
activeLayer, activeLayer,
@@ -869,7 +869,7 @@ export class CanvasEventManager {
// 降级处理：如果合并失败，至少保证新图像能添加到图层 // 降级处理：如果合并失败，至少保证新图像能添加到图层
if (fabricImage && this.layerManager) { if (fabricImage && this.layerManager) {
console.log("执行降级处理：直接添加图像到图层"); // console.log("执行降级处理：直接添加图像到图层");
this.layerManager.addObjectToLayer(fabricImage, activeLayer.id); this.layerManager.addObjectToLayer(fabricImage, activeLayer.id);
} }
} }
@@ -1011,15 +1011,15 @@ export class CanvasEventManager {
// 调试日志 - 仅在开发环境输出 // 调试日志 - 仅在开发环境输出
if (process.env.NODE_ENV === "development") { if (process.env.NODE_ENV === "development") {
console.log("设备检测结果:", { // console.log("设备检测结果:", {
userAgent, // userAgent,
platform, // platform,
isMobile, // isMobile,
isTablet, // isTablet,
isDesktop, // isDesktop,
hasTouchSupport, // hasTouchSupport,
maxTouchPoints: navigator.maxTouchPoints, // maxTouchPoints: navigator.maxTouchPoints,
}); // });
} }
return { 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") || ""; const text = event.clipboardData?.getData("text/plain") || "";
if(/^aida_copy_canvas_layer/.test(text)) return; if(/^aida_copy_canvas_layer/.test(text)) return;
const items = event.clipboardData?.items || []; const items = event.clipboardData?.items || [];
console.log(this); // console.log(this);
for (const item of items) { for (const item of items) {
if (item.type.indexOf("text/plain") !== -1) { if (item.type.indexOf("text/plain") !== -1) {
item.getAsString((text) => { item.getAsString((text) => {
@@ -249,7 +249,7 @@ export class KeyboardManager {
this.container.addEventListener("touchcancel", this._handleTouchEnd); 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": case "copy":
// 复制逻辑 // 复制逻辑
console.log("复制当前选中图层"); // console.log("复制当前选中图层");
if(this.isRedGreenMode.value) return; if(this.isRedGreenMode.value) return;
this.layerManager.copyLayer(this.layerManager.activeLayerId.value); this.layerManager.copyLayer(this.layerManager.activeLayerId.value);
break; break;
case "paste": case "paste":
// 粘贴逻辑 // 粘贴逻辑
console.log("粘贴"); // console.log("粘贴");
if(this.isRedGreenMode.value) return; if(this.isRedGreenMode.value) return;
this.layerManager.pasteLayer(); this.layerManager.pasteLayer();
break; break;
case "cut": case "cut":
// 剪切逻辑 // 剪切逻辑
console.log("剪切"); // console.log("剪切");
if(this.isRedGreenMode.value) return; if(this.isRedGreenMode.value) return;
this.layerManager.cutLayer(this.layerManager.activeLayerId.value); this.layerManager.cutLayer(this.layerManager.activeLayerId.value);
break; break;
case "delete": case "delete":
// 删除逻辑 // 删除逻辑
console.log("删除"); // console.log("删除");
if(this.isRedGreenMode.value) return; if(this.isRedGreenMode.value) return;
this.layerManager.removeLayer(this.layerManager.activeLayerId.value); this.layerManager.removeLayer(this.layerManager.activeLayerId.value);
break; break;
case "selectAll": case "selectAll":
// 全选逻辑 // 全选逻辑
console.log("全选"); // console.log("全选");
if(this.isRedGreenMode.value) return; if(this.isRedGreenMode.value) return;
// 这里需要实现全选逻辑 TODO: 是否在选择模式下才可以全选？ // 这里需要实现全选逻辑 TODO: 是否在选择模式下才可以全选？
if (this.layerManager) { if (this.layerManager) {
@@ -475,7 +475,7 @@ export class KeyboardManager {
case "clearSelection": case "clearSelection":
// 清除选择逻辑 // 清除选择逻辑
console.log("清除选择"); // console.log("清除选择");
// 这里需要实现清除选择逻辑 // 这里需要实现清除选择逻辑
if (this.layerManager) { if (this.layerManager) {
this.layerManager.clearSelection(); this.layerManager.clearSelection();
@@ -484,7 +484,7 @@ export class KeyboardManager {
case "save": case "save":
// 保存逻辑 // 保存逻辑
console.log("保存"); // console.log("保存");
break; break;
case "selectTool": case "selectTool":
@@ -591,7 +591,7 @@ export class KeyboardManager {
case "contextMenu": case "contextMenu":
// 上下文菜单（通常由右击或触控设备上的特定手势触发） // 上下文菜单（通常由右击或触控设备上的特定手势触发）
console.log("显示上下文菜单"); // console.log("显示上下文菜单");
// 这里需要实现显示上下文菜单的逻辑 // 这里需要实现显示上下文菜单的逻辑
break; break;

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

@@ -30,7 +30,7 @@ export class LiquifyStateManager {
// 设备性能检测 // 设备性能检测
this.devicePerformance = this._detectDevicePerformance(); this.devicePerformance = this._detectDevicePerformance();
console.log("🎯 液化状态管理器已初始化，设备性能等级:", this.devicePerformance); // console.log("🎯 液化状态管理器已初始化，设备性能等级:", this.devicePerformance);
} }
/** /**
@@ -48,7 +48,7 @@ export class LiquifyStateManager {
// 显示操作反馈 // 显示操作反馈
this._showOperationFeedback(); this._showOperationFeedback();
console.log("🚀 开始液化操作"); // console.log("🚀 开始液化操作");
} }
/** /**
@@ -68,7 +68,7 @@ export class LiquifyStateManager {
// 禁用不必要的画布功能 // 禁用不必要的画布功能
this._disableCanvasFeatures(); 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(); this._hideOperationFeedback();
console.log(`⏱️ 液化操作完成，耗时: ${operationTime.toFixed(2)}ms`); // console.log(`⏱️ 液化操作完成，耗时: ${operationTime.toFixed(2)}ms`);
} }
/** /**
@@ -158,11 +158,11 @@ export class LiquifyStateManager {
// 根据性能数据动态调整设置 // 根据性能数据动态调整设置
this._adaptivePerformanceOptimization(operationTime); this._adaptivePerformanceOptimization(operationTime);
console.log( // console.log(
`📊 记录性能指标: ${operationType}/${mode}, 耗时: ${operationTime.toFixed( // `📊 记录性能指标: ${operationType}/${mode}, 耗时: ${operationTime.toFixed(
2 // 2
)}ms, 渲染模式: ${renderMode}` // )}ms, 渲染模式: ${renderMode}`
); // );
} }
/** /**
@@ -179,7 +179,7 @@ export class LiquifyStateManager {
const currentQuality = this.realtimeUpdater.config.imageQuality || 1.0; const currentQuality = this.realtimeUpdater.config.imageQuality || 1.0;
if (currentQuality > 0.7) { if (currentQuality > 0.7) {
this.realtimeUpdater.setImageQuality(Math.max(0.7, currentQuality - 0.1)); this.realtimeUpdater.setImageQuality(Math.max(0.7, currentQuality - 0.1));
console.log("⚡ 自动降低图像质量以提升性能"); // console.log("⚡ 自动降低图像质量以提升性能");
} }
// 增加节流时间 // 增加节流时间
@@ -188,7 +188,7 @@ export class LiquifyStateManager {
33, 33,
this.realtimeUpdater.config.throttleTime + 8 this.realtimeUpdater.config.throttleTime + 8
); );
console.log("⏱️ 自动增加节流时间以提升性能"); // console.log("⏱️ 自动增加节流时间以提升性能");
} }
} }
@@ -228,7 +228,7 @@ export class LiquifyStateManager {
this._updateCursor("default"); this._updateCursor("default");
this.cursorCache.clear(); 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, // 是否为带遮罩的组图层 isGroupWithMask = false, // 是否为带遮罩的组图层
} = {}) => { } = {}) => {
try { try {
console.log(`📊 开始栅格化 ${fabricObjects.length} 个对象${maskObject ? "（带遮罩）" : ""}`); // console.log(`📊 开始栅格化 ${fabricObjects.length} 个对象${maskObject ? "（带遮罩）" : ""}`);
// 确保有对象需要栅格化 // 确保有对象需要栅格化
if (fabricObjects.length === 0) { if (fabricObjects.length === 0) {
@@ -36,7 +36,7 @@ export const createRasterizedImage = async ({
if (isThumbnail) scaleFactor = 0.2; // 缩略图使用较小的高清倍数 if (isThumbnail) scaleFactor = 0.2; // 缩略图使用较小的高清倍数
console.log(`高清倍数: ${scaleFactor}, 当前缩放: ${currentZoom}`); // console.log(`高清倍数: ${scaleFactor}, 当前缩放: ${currentZoom}`);
// 如果有遮罩且保持原始质量，使用高质量的遮罩处理方法 // 如果有遮罩且保持原始质量，使用高质量的遮罩处理方法
if (maskObject && preserveOriginalQuality) { if (maskObject && preserveOriginalQuality) {
@@ -58,7 +58,7 @@ export const createRasterizedImage = async ({
} }
if (isReturenDataURL) { if (isReturenDataURL) {
console.log("✅ 带遮罩的栅格化图像创建成功，返回DataURL"); // console.log("✅ 带遮罩的栅格化图像创建成功，返回DataURL");
return rasterizedImage; return rasterizedImage;
} }
@@ -77,7 +77,7 @@ export const createRasterizedImage = async ({
}, },
}); });
console.log(`✅ 带遮罩的栅格化图像创建完成`); // console.log(`✅ 带遮罩的栅格化图像创建完成`);
return rasterizedImage; return rasterizedImage;
} }
@@ -101,7 +101,7 @@ export const createRasterizedImage = async ({
} }
if (isReturenDataURL) { if (isReturenDataURL) {
console.log("✅ 栅格化图像创建成功，返回DataURL"); // console.log("✅ 栅格化图像创建成功，返回DataURL");
return rasterizedImage; return rasterizedImage;
} }
@@ -120,7 +120,7 @@ export const createRasterizedImage = async ({
}, },
}); });
console.log(`✅ 栅格化图像创建完成`); // console.log(`✅ 栅格化图像创建完成`);
} }
return rasterizedImage; return rasterizedImage;
@@ -172,7 +172,7 @@ const createRasterizedImageWithGroup = async ({
// 获取组的绝对边界框 // 获取组的绝对边界框
const groupBounds = group.getBoundingRect(true, true); const groupBounds = group.getBoundingRect(true, true);
console.log("📏 组边界框:", groupBounds); // console.log("📏 组边界框:", groupBounds);
// 设置离屏画布尺寸，使用组的边界大小 // 设置离屏画布尺寸，使用组的边界大小
const canvasWidth = Math.ceil(groupBounds.width * scaleFactor); const canvasWidth = Math.ceil(groupBounds.width * scaleFactor);
@@ -184,7 +184,7 @@ const createRasterizedImageWithGroup = async ({
hasControls: false, hasControls: false,
}); });
console.log(`🎨 离屏画布尺寸: ${canvasWidth}x${canvasHeight}, 缩放: ${scaleFactor}`); // console.log(`🎨 离屏画布尺寸: ${canvasWidth}x${canvasHeight}, 缩放: ${scaleFactor}`);
// 调整组的位置，让它位于画布的左上角 // 调整组的位置，让它位于画布的左上角
group.set({ group.set({
@@ -266,11 +266,11 @@ const createRasterizedImageWithMask = async ({
isGroupWithMask, isGroupWithMask,
}) => { }) => {
try { try {
console.log("🎭 使用遮罩创建栅格化图像"); // console.log("🎭 使用遮罩创建栅格化图像");
// 获取遮罩的边界框，这将作为最终图像的边界 // 获取遮罩的边界框，这将作为最终图像的边界
const maskBounds = maskObject.getBoundingRect(true, true); const maskBounds = maskObject.getBoundingRect(true, true);
console.log("📏 遮罩边界框:", maskBounds); // console.log("📏 遮罩边界框:", maskBounds);
// 克隆所有对象，并清除它们的遮罩，避免重复应用 // 克隆所有对象，并清除它们的遮罩，避免重复应用
const clonedObjects = []; const clonedObjects = [];
@@ -308,7 +308,7 @@ const createRasterizedImageWithMask = async ({
height: canvasHeight, height: canvasHeight,
}); });
console.log(`🎨 离屏画布尺寸: ${canvasWidth}x${canvasHeight}, 缩放: ${scaleFactor}`); // console.log(`🎨 离屏画布尺寸: ${canvasWidth}x${canvasHeight}, 缩放: ${scaleFactor}`);
// 调整对象位置，相对于遮罩边界重新定位 // 调整对象位置，相对于遮罩边界重新定位
clonedObjects.forEach((obj) => { clonedObjects.forEach((obj) => {
@@ -376,7 +376,7 @@ const createRasterizedImageWithMask = async ({
// 确保图像位置正确 // 确保图像位置正确
fabricImage.setCoords(); fabricImage.setCoords();
console.log("✅ 带遮罩的栅格化图像创建完成"); // console.log("✅ 带遮罩的栅格化图像创建完成");
return fabricImage; return fabricImage;
} catch (error) { } catch (error) {
console.error("带遮罩的栅格化失败:", error); console.error("带遮罩的栅格化失败:", error);
@@ -430,12 +430,12 @@ const createFabricImageFromDataURL = (dataURL) => {
*/ */
const applyMaskToCanvas = async (canvas, maskObject, bounds) => { const applyMaskToCanvas = async (canvas, maskObject, bounds) => {
if (!maskObject) { if (!maskObject) {
console.log("没有遮罩对象，跳过遮罩应用"); // console.log("没有遮罩对象，跳过遮罩应用");
return; return;
} }
try { try {
console.log("🎭 应用遮罩到画布"); // console.log("🎭 应用遮罩到画布");
// 克隆遮罩对象，避免影响原对象 // 克隆遮罩对象，避免影响原对象
const clonedMask = await cloneObjectAsync(maskObject); const clonedMask = await cloneObjectAsync(maskObject);
@@ -459,7 +459,7 @@ const applyMaskToCanvas = async (canvas, maskObject, bounds) => {
// 将遮罩设置为画布的clipPath // 将遮罩设置为画布的clipPath
canvas.clipPath = clonedMask; canvas.clipPath = clonedMask;
console.log("✅ 遮罩应用完成"); // console.log("✅ 遮罩应用完成");
} catch (error) { } catch (error) {
console.error("应用遮罩失败:", error); console.error("应用遮罩失败:", error);
} }

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

@@ -24,7 +24,7 @@ export const createRasterizedImage = async ({
isEnhanceImg, // 是否是增强图片 isEnhanceImg, // 是否是增强图片
} = {}) => { } = {}) => {
try { try {
console.log(`📊 开始栅格化 ${fabricObjects.length} 个对象`); // console.log(`📊 开始栅格化 ${fabricObjects.length} 个对象`);
// 确保有对象需要栅格化 // 确保有对象需要栅格化
if (fabricObjects.length === 0) { if (fabricObjects.length === 0) {
@@ -86,14 +86,14 @@ const createClippedObjects = async ({
isEnhanceImg, // 是否是增强图片 isEnhanceImg, // 是否是增强图片
}) => { }) => {
try { try {
console.log("🎯 使用新的图像遮罩裁剪方法创建对象"); // console.log("🎯 使用新的图像遮罩裁剪方法创建对象");
// 使用优化后的边界计算，确保包含描边区域 // 使用优化后的边界计算，确保包含描边区域
const optimizedBounds = calculateOptimizedBounds( const optimizedBounds = calculateOptimizedBounds(
clippingObject, clippingObject,
fabricObjects fabricObjects
); );
console.log("📐 优化后的选区边界框:", optimizedBounds); // console.log("📐 优化后的选区边界框:", optimizedBounds);
// 获取羽化值 // 获取羽化值
let featherAmount = 0; let featherAmount = 0;
@@ -102,7 +102,7 @@ const createClippedObjects = async ({
typeof selectionManager.getFeatherAmount === "function" typeof selectionManager.getFeatherAmount === "function"
) { ) {
featherAmount = selectionManager.getFeatherAmount(); featherAmount = selectionManager.getFeatherAmount();
console.log(`🌟 应用羽化效果: ${featherAmount}px`); // console.log(`🌟 应用羽化效果: ${featherAmount}px`);
} }
// 方法1：如果只需要返回DataURL，使用画布裁剪方法 // 方法1：如果只需要返回DataURL，使用画布裁剪方法
@@ -160,7 +160,7 @@ const createClippedObjects = async ({
// 更新坐标 // 更新坐标
fabricImage.setCoords(); fabricImage.setCoords();
console.log("✅ 返回裁剪后的fabric对象，已恢复到优化后的原始大小和位置"); // console.log("✅ 返回裁剪后的fabric对象，已恢复到优化后的原始大小和位置");
return fabricImage; return fabricImage;
} catch (error) { } catch (error) {
console.warn("创建裁剪对象失败:", error); console.warn("创建裁剪对象失败:", error);
@@ -181,7 +181,7 @@ const createClippedDataURLByCanvas = async ({
isEnhanceImg = false, // 是否是增强图片 isEnhanceImg = false, // 是否是增强图片
}) => { }) => {
try { try {
console.log("🖼️ 使用图像遮罩裁剪方法生成DataURL"); // console.log("🖼️ 使用图像遮罩裁剪方法生成DataURL");
// 使用优化后的边界计算，确保包含描边区域 // 使用优化后的边界计算，确保包含描边区域
// const optimizedBounds = calculateOptimizedBounds( // const optimizedBounds = calculateOptimizedBounds(
@@ -199,18 +199,18 @@ const createClippedDataURLByCanvas = async ({
const pixelRatio = window.devicePixelRatio || 1; const pixelRatio = window.devicePixelRatio || 1;
const qualityMultiplier = !!isEnhanceImg ? Math.max(2, pixelRatio) : 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 canvasWidth = Math.ceil(optimizedBounds.width * qualityMultiplier);
const canvasHeight = Math.ceil(optimizedBounds.height * qualityMultiplier); const canvasHeight = Math.ceil(optimizedBounds.height * qualityMultiplier);
console.log( // console.log(
`📏 优化后画布尺寸: ${canvasWidth}x${canvasHeight} (质量倍数: ${qualityMultiplier})` // `📏 优化后画布尺寸: ${canvasWidth}x${canvasHeight} (质量倍数: ${qualityMultiplier})`
); // );
console.log("🎯 边界框对比:", { // console.log("🎯 边界框对比:", {
original: selectionBounds, // original: selectionBounds,
optimized: optimizedBounds, // optimized: optimizedBounds,
}); // });
// 步骤1: 先将路径转换为遮罩图像（支持羽化） // 步骤1: 先将路径转换为遮罩图像（支持羽化）
const maskImageDataURL = const maskImageDataURL =
@@ -242,7 +242,7 @@ const createClippedDataURLByCanvas = async ({
canvasHeight, canvasHeight,
}); });
console.log("✅ 图像遮罩裁剪完成，生成DataURL"); // console.log("✅ 图像遮罩裁剪完成，生成DataURL");
return clippedDataURL; return clippedDataURL;
} catch (error) { } catch (error) {
console.error("图像遮罩裁剪失败:", error); console.error("图像遮罩裁剪失败:", error);
@@ -262,7 +262,7 @@ const createSimpleClone = async ({
format, format,
}) => { }) => {
try { try {
console.log("📋 创建简单克隆对象"); // console.log("📋 创建简单克隆对象");
const clonedObjects = []; const clonedObjects = [];
@@ -370,7 +370,7 @@ const renderObjectsToDataURL = async (objects, quality, format) => {
*/ */
const renderClippedObjectsToDataURL = async (clippedObjects) => { const renderClippedObjectsToDataURL = async (clippedObjects) => {
try { try {
console.log("🖼️ 渲染裁剪对象为DataURL"); // console.log("🖼️ 渲染裁剪对象为DataURL");
// 计算所有裁剪对象的总边界框 // 计算所有裁剪对象的总边界框
let totalBounds = null; let totalBounds = null;
@@ -450,7 +450,7 @@ const renderClippedObjectsToDataURL = async (clippedObjects) => {
// 清理临时画布 // 清理临时画布
tempCanvas.dispose(); tempCanvas.dispose();
console.log("✅ 裁剪对象渲染完成"); // console.log("✅ 裁剪对象渲染完成");
return dataURL; return dataURL;
} catch (error) { } catch (error) {
console.error("渲染裁剪对象失败:", error); console.error("渲染裁剪对象失败:", error);
@@ -472,7 +472,7 @@ const createLegacyRasterization = async ({
isCropByBg, // 是否根据背景裁剪 isCropByBg, // 是否根据背景裁剪
isEnhanceImg, // 是否是增强图片 isEnhanceImg, // 是否是增强图片
}) => { }) => {
console.log("⚠️ 使用兼容的离屏渲染方法"); // console.log("⚠️ 使用兼容的离屏渲染方法");
// 这里保留原有的离屏渲染逻辑作为备选方案 // 这里保留原有的离屏渲染逻辑作为备选方案
const currentZoom = canvas.getZoom?.() || 1; const currentZoom = canvas.getZoom?.() || 1;
@@ -522,12 +522,12 @@ const calculateBounds = (fabricObjects) => {
// 获取绝对边界框（原始大小和位置） // 获取绝对边界框（原始大小和位置）
const absoluteBound = obj.getBoundingRect(true, true); const absoluteBound = obj.getBoundingRect(true, true);
console.log(`对象 ${obj.id || index} 边界框比较:`, { // console.log(`对象 ${obj.id || index} 边界框比较:`, {
relative: relativeBound, // relative: relativeBound,
absolute: absoluteBound, // absolute: absoluteBound,
scaleX: obj.scaleX, // scaleX: obj.scaleX,
scaleY: obj.scaleY, // scaleY: obj.scaleY,
}); // });
// 计算绝对边界框的累积范围 // 计算绝对边界框的累积范围
if (!absoluteBounds) { if (!absoluteBounds) {
@@ -600,7 +600,7 @@ const createOffscreenRasterization = async ({
let renderBounds = absoluteBounds; let renderBounds = absoluteBounds;
if (clippingObject) { if (clippingObject) {
const clippingBounds = clippingObject.getBoundingRect(true, true); const clippingBounds = clippingObject.getBoundingRect(true, true);
console.log("🎯 使用裁剪对象边界框:", clippingBounds); // console.log("🎯 使用裁剪对象边界框:", clippingBounds);
renderBounds = clippingBounds; renderBounds = clippingBounds;
} }
@@ -613,9 +613,9 @@ const createOffscreenRasterization = async ({
height: canvasHeight, height: canvasHeight,
}); });
console.log( // console.log(
`🎨 离屏画布尺寸: ${canvasWidth}x${canvasHeight}, 缩放: ${scaleFactor}` // `🎨 离屏画布尺寸: ${canvasWidth}x${canvasHeight}, 缩放: ${scaleFactor}`
); // );
// 克隆对象到离屏画布 // 克隆对象到离屏画布
const clonedObjects = []; const clonedObjects = [];
@@ -786,7 +786,7 @@ const createMaskImageFromPath = async ({
qualityMultiplier, qualityMultiplier,
}) => { }) => {
try { try {
console.log("🎭 创建路径遮罩图像"); // console.log("🎭 创建路径遮罩图像");
// 创建专门用于渲染遮罩的画布 // 创建专门用于渲染遮罩的画布
const maskCanvas = new fabric.StaticCanvas(); const maskCanvas = new fabric.StaticCanvas();
@@ -820,7 +820,7 @@ const createMaskImageFromPath = async ({
// 清理遮罩画布 // 清理遮罩画布
maskCanvas.dispose(); maskCanvas.dispose();
console.log("✅ 遮罩图像创建完成"); // console.log("✅ 遮罩图像创建完成");
return maskDataURL; return maskDataURL;
} catch (error) { } catch (error) {
console.error("创建遮罩图像失败:", error); console.error("创建遮罩图像失败:", error);
@@ -841,7 +841,7 @@ const renderContentToImage = async ({
qualityMultiplier, qualityMultiplier,
}) => { }) => {
try { try {
console.log("🖼️ 渲染内容图像"); // console.log("🖼️ 渲染内容图像");
// 创建内容渲染画布 // 创建内容渲染画布
const contentCanvas = new fabric.StaticCanvas(); const contentCanvas = new fabric.StaticCanvas();
@@ -880,7 +880,6 @@ const renderContentToImage = async ({
// if(obj.globalCompositeOperation === "multiply"){ // if(obj.globalCompositeOperation === "multiply"){
// clonedObj.clipPath = null; // clonedObj.clipPath = null;
// } // }
console.log("==========", obj.id, obj.layerName);
contentCanvas.add(clonedObj); contentCanvas.add(clonedObj);
} }
@@ -897,7 +896,7 @@ const renderContentToImage = async ({
// 清理内容画布 // 清理内容画布
contentCanvas.dispose(); contentCanvas.dispose();
console.log("✅ 内容图像渲染完成"); // console.log("✅ 内容图像渲染完成");
return contentDataURL; return contentDataURL;
} catch (error) { } catch (error) {
console.error("渲染内容图像失败:", error); console.error("渲染内容图像失败:", error);
@@ -920,7 +919,7 @@ const applyImageMask = async ({
canvasHeight, canvasHeight,
}) => { }) => {
try { try {
console.log("🎯 应用图像遮罩"); // console.log("🎯 应用图像遮罩");
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
// 创建用于合成的Canvas元素 // 创建用于合成的Canvas元素
@@ -952,7 +951,7 @@ const applyImageMask = async ({
// 获取最终结果 // 获取最终结果
const resultDataURL = compositeCanvas.toDataURL("image/png", 1.0); const resultDataURL = compositeCanvas.toDataURL("image/png", 1.0);
console.log("✅ 图像遮罩应用完成"); // console.log("✅ 图像遮罩应用完成");
resolve(resultDataURL); resolve(resultDataURL);
} catch (error) { } catch (error) {
console.error("合成图像失败:", error); console.error("合成图像失败:", error);
@@ -994,7 +993,7 @@ const createAdvancedMaskImage = async ({
featherAmount = 0, featherAmount = 0,
}) => { }) => {
try { try {
console.log(`🎭 创建高级遮罩图像 (羽化: ${featherAmount})`); // console.log(`🎭 创建高级遮罩图像 (羽化: ${featherAmount})`);
// 创建专门用于渲染遮罩的画布 // 创建专门用于渲染遮罩的画布
const maskCanvas = new fabric.StaticCanvas(); const maskCanvas = new fabric.StaticCanvas();
@@ -1047,7 +1046,7 @@ const createAdvancedMaskImage = async ({
// 清理遮罩画布 // 清理遮罩画布
maskCanvas.dispose(); maskCanvas.dispose();
console.log("✅ 高级遮罩图像创建完成"); // console.log("✅ 高级遮罩图像创建完成");
return maskDataURL; return maskDataURL;
} catch (error) { } catch (error) {
console.error("创建高级遮罩图像失败:", error); console.error("创建高级遮罩图像失败:", error);
@@ -1116,7 +1115,7 @@ const createSolidMaskPath = async (
qualityMultiplier qualityMultiplier
) => { ) => {
try { try {
console.log("🔧 创建实体遮罩路径，处理描边转填充"); // console.log("🔧 创建实体遮罩路径，处理描边转填充");
// 克隆原始对象 // 克隆原始对象
const maskPath = await cloneObjectAsync(clippingObject); const maskPath = await cloneObjectAsync(clippingObject);
@@ -1125,9 +1124,9 @@ const createSolidMaskPath = async (
const hasStroke = maskPath.stroke && maskPath.strokeWidth > 0; const hasStroke = maskPath.stroke && maskPath.strokeWidth > 0;
if (hasStroke) { if (hasStroke) {
console.log( // console.log(
`📏 检测到描边: ${maskPath.stroke}, 宽度: ${maskPath.strokeWidth}` // `📏 检测到描边: ${maskPath.stroke}, 宽度: ${maskPath.strokeWidth}`
); // );
// 对于有描边的路径，我们需要更精确的处理 // 对于有描边的路径，我们需要更精确的处理
const strokeWidth = maskPath.strokeWidth; const strokeWidth = maskPath.strokeWidth;
@@ -1182,7 +1181,7 @@ const createSolidMaskPath = async (
}); });
} }
console.log(`✅ 描边已转换为填充，类型: ${maskPath.type}`); // console.log(`✅ 描边已转换为填充，类型: ${maskPath.type}`);
} else { } else {
// 没有描边，直接处理位置和缩放 // 没有描边，直接处理位置和缩放
maskPath.set({ maskPath.set({
@@ -1216,7 +1215,7 @@ const createSolidMaskPath = async (
*/ */
const calculateOptimizedBounds = (clippingObject, fabricObjects) => { const calculateOptimizedBounds = (clippingObject, fabricObjects) => {
try { try {
console.log("📐 计算优化后的边界框"); // console.log("📐 计算优化后的边界框");
// 获取裁剪对象的边界框（包含描边） // 获取裁剪对象的边界框（包含描边）
const clippingBounds = clippingObject.getBoundingRect(true, true); const clippingBounds = clippingObject.getBoundingRect(true, true);
@@ -1232,7 +1231,7 @@ const calculateOptimizedBounds = (clippingObject, fabricObjects) => {
clippingBounds.width += strokeWidth; clippingBounds.width += strokeWidth;
clippingBounds.height += strokeWidth; clippingBounds.height += strokeWidth;
console.log(`🖊️ 调整描边边界框，描边宽度: ${strokeWidth}`); // console.log(`🖊️ 调整描边边界框，描边宽度: ${strokeWidth}`);
} }
// 计算内容对象的边界框 // 计算内容对象的边界框
@@ -1246,11 +1245,11 @@ const calculateOptimizedBounds = (clippingObject, fabricObjects) => {
height: Math.max(1, clippingBounds.height), height: Math.max(1, clippingBounds.height),
}; };
console.log("✅ 边界框优化完成", { // console.log("✅ 边界框优化完成", {
original: clippingObject.getBoundingRect(true, true), // original: clippingObject.getBoundingRect(true, true),
optimized: optimizedBounds, // optimized: optimizedBounds,
hasStroke: !!(clippingObject.stroke && clippingObject.strokeWidth > 0), // hasStroke: !!(clippingObject.stroke && clippingObject.strokeWidth > 0),
}); // });
return optimizedBounds; return optimizedBounds;
} catch (error) { } catch (error) {

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

@@ -331,52 +331,55 @@
class: "export-btn", class: "export-btn",
}, },
]); ]);
const otherData = { const canvasLoadJsonSuccess = () => {
color: { rgba: { r: 255, g: 0, b: 0, a: 1 } }, console.log("画布加载JSON成功");
printObject: { canvasEditor.value?.updateOtherLayers({
prints: [ color: { rgba: { r: 255, g: 0, b: 0, a: 1 } },
{ printObject: {
ifSingle: false, prints: [
level2Type: "Pattern", {
designType: "Library", ifSingle: false,
path: "/src/assets/images/canvas/yinhua1.jpg", level2Type: "Pattern",
location: [250, 780], designType: "Library",
scale: [1.2, 1.6], path: "/src/assets/images/canvas/yinhua1.jpg",
angle: 0, location: [250, 780],
object: { scale: [1.2, 1.6],
top: 600, angle: 0,
left: 800, object: {
scaleX: 0.5, top: 600,
scaleY: 0.5, left: 800,
opacity: 1, scaleX: 0.5,
angle: 45, scaleY: 0.5,
flipX: false, opacity: 1,
flipY: false, angle: 45,
blendMode: "multiply", flipX: false,
gapX: 0, flipY: false,
gapY: 0, blendMode: "multiply",
gapX: 0,
gapY: 0,
},
}, },
}, // {
// { // ifSingle: true,
// ifSingle: true, // level2Type: "Pattern",
// level2Type: "Pattern", // designType: "Library",
// designType: "Library", // path: "/src/assets/images/canvas/yinhua1.jpg",
// path: "/src/assets/images/canvas/yinhua1.jpg", // location: [550, 650],
// location: [550, 650], // scale: [0.15, 0.2],
// scale: [0.15, 0.2], // angle: 0,
// angle: 0, // },
// }, // {
// { // ifSingle: true,
// ifSingle: true, // level2Type: "Pattern",
// level2Type: "Pattern", // designType: "Library",
// designType: "Library", // path: "/src/assets/images/canvas/yinhua1.jpg",
// path: "/src/assets/images/canvas/yinhua1.jpg", // location: [700, 400],
// location: [700, 400], // scale: [0.1, 0.133],
// scale: [0.1, 0.133], // angle: 0,
// angle: 0, // },
// }, ],
], },
}, });
}; };
</script> </script>
@@ -408,13 +411,13 @@
:clothingMinIOPath="clothingMinIOPath" :clothingMinIOPath="clothingMinIOPath"
:clothingImageUrl="clothingImageUrl" :clothingImageUrl="clothingImageUrl"
:clothingImageUrl2="clothingImageUrlInit" :clothingImageUrl2="clothingImageUrlInit"
:otherData="otherData"
:config="editorConfig" :config="editorConfig"
:clothing-image-opts="{ :clothing-image-opts="{
imageMode: 'contains', // 设置底图包含在画布内 imageMode: 'contains', // 设置底图包含在画布内
}" }"
@change-canvas="changeCanvas" @change-canvas="changeCanvas"
@canvas-init="canvasInit" @canvas-init="canvasInit"
@canvas-load-json-success="canvasLoadJsonSuccess"
isFixedErasable isFixedErasable
showFixedLayer showFixedLayer
> >

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

@@ -355,7 +355,6 @@ export default defineComponent({
isContainNormalLayer:false, isContainNormalLayer:false,
width:props.sketchSize.width, width:props.sketchSize.width,
height:props.sketchSize.height}).then((rv)=>{ height:props.sketchSize.height}).then((rv)=>{
console.log('====================',rv)
detailData.selectDetail.undividedLayerColor = rv detailData.selectDetail.undividedLayerColor = rv
}) })
// } // }
@@ -395,7 +394,6 @@ export default defineComponent({
// privewDetail() // privewDetail()
}) })
onMounted(()=>{ onMounted(()=>{
console.log('==========================',detailData.canvasLoad)
nextTick(async ()=>{ nextTick(async ()=>{
// detailData.currentView = 'canvasEditor' // detailData.currentView = 'canvasEditor'
const sessionCanvasList = sessionStorage.getItem('canvasList'); const sessionCanvasList = sessionStorage.getItem('canvasList');