diff --git a/src/assets/icons/CPart.svg b/src/assets/icons/CPart.svg index 931b5358..6b75a0d1 100644 --- a/src/assets/icons/CPart.svg +++ b/src/assets/icons/CPart.svg @@ -1,68 +1,29 @@ - - - + + + + + .cls-2 { + stroke: #333; + stroke-miterlimit: 10; + } + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/component/Canvas/CanvasEditor/commands/FillGroupLayerBackgroundCommand.js b/src/component/Canvas/CanvasEditor/commands/FillGroupLayerBackgroundCommand.js index cc773d34..edd061ac 100644 --- a/src/component/Canvas/CanvasEditor/commands/FillGroupLayerBackgroundCommand.js +++ b/src/component/Canvas/CanvasEditor/commands/FillGroupLayerBackgroundCommand.js @@ -50,7 +50,6 @@ export class FillGroupLayerBackgroundCommand extends Command { ); this.layer = layer; this.parent = parent; - console.log("==========",layer); if (!layer) return false; if(!isUndo){ @@ -343,10 +342,6 @@ export class FillGroupLayerBackgroundCommand extends Command { minTop = Infinity, maxRight = -Infinity, maxBottom = -Infinity; - console.log( - "计算当前所有对象的边界信息:===>", - this.originalfabricObjects.length - ); this.originalfabricObjects?.forEach((obj) => { const { object } = findObjectById(this.canvas, obj.id) || {}; if (object) { diff --git a/src/component/Canvas/CanvasEditor/commands/FillRepeatCommand.js b/src/component/Canvas/CanvasEditor/commands/FillRepeatCommand.js index b8e0baee..85aa2dd6 100644 --- a/src/component/Canvas/CanvasEditor/commands/FillRepeatCommand.js +++ b/src/component/Canvas/CanvasEditor/commands/FillRepeatCommand.js @@ -110,13 +110,15 @@ export class FillRepeatCommand extends Command { height: object.height, } }; + const fdObject = this.canvasManager.getFixedLayerObject(); const bgObject = this.canvasManager.getBackgroundLayerObject(); + const tObject = fdObject || bgObject; const pattern = new fabric.Pattern({ source: img, repeat: this.fillRepeat, patternTransform: object.fill?.hasOwnProperty("patternTransform") ? object.fill.patternTransform : createPatternTransform(scale, 0), - offsetX: object.fill?.hasOwnProperty("offsetX") ? object.fill.offsetX : bgObject.width / 2, // 水平偏移 - offsetY: object.fill?.hasOwnProperty("offsetY") ? object.fill.offsetY : bgObject.height / 2, // 垂直偏移 + offsetX: object.fill?.hasOwnProperty("offsetX") ? object.fill.offsetX : tObject.width / 2, // 水平偏移 + offsetY: object.fill?.hasOwnProperty("offsetY") ? object.fill.offsetY : tObject.height / 2, // 垂直偏移 }); const rect = new fabric.Rect({ id: object.id, @@ -143,13 +145,13 @@ export class FillRepeatCommand extends Command { flipY: object.flipY, }); } else { - let scaleX = bgObject.scaleX || 1; - let scaleY = bgObject.scaleY || 1; + let scaleX = tObject.scaleX || 1; + let scaleY = tObject.scaleY || 1; rect.set({ - width: bgObject.width, - height: bgObject.height, - top: bgObject.top - bgObject.height * scaleY / 2, - left: bgObject.left - bgObject.width * scaleX / 2, + width: tObject.width, + height: tObject.height, + top: tObject.top - tObject.height * scaleY / 2, + left: tObject.left - tObject.width * scaleX / 2, scaleX, scaleY, }); @@ -305,6 +307,7 @@ export class FillRepeatGapChangeCommand extends Command { object.fill_.gapY = this.newGapY; } const image = new Image(); + image.crossOrigin = "anonymous"; image.src = object.fill_.source; await image.decode(); object.fill_.width = image.width; diff --git a/src/component/Canvas/CanvasEditor/commands/LayerCommands.js b/src/component/Canvas/CanvasEditor/commands/LayerCommands.js index fa01dac5..339fe361 100644 --- a/src/component/Canvas/CanvasEditor/commands/LayerCommands.js +++ b/src/component/Canvas/CanvasEditor/commands/LayerCommands.js @@ -3684,7 +3684,7 @@ export class ChangeFixedImageCommand extends Command { opacity: currentObj.opacity, }; - console.log(`保存渲染顺序: z-index = ${this.previousZIndex}`); + // console.log(`保存渲染顺序: z-index = ${this.previousZIndex}`); } } @@ -3794,7 +3794,7 @@ export class ChangeFixedImageCommand extends Command { false ); if (insertSuccess) { - console.log(`新图像插入到z-index位置: ${this.previousZIndex}`); + // console.log(`新图像插入到z-index位置: ${this.previousZIndex}`); } else { // 如果插入失败，回退到普通添加 this.canvas.add(newImage); diff --git a/src/component/Canvas/CanvasEditor/commands/ObjectLayerCommands.js b/src/component/Canvas/CanvasEditor/commands/ObjectLayerCommands.js index fdf72140..c32ff8c3 100644 --- a/src/component/Canvas/CanvasEditor/commands/ObjectLayerCommands.js +++ b/src/component/Canvas/CanvasEditor/commands/ObjectLayerCommands.js @@ -600,7 +600,7 @@ export class ChangeFixedImageCommand extends Command { opacity: currentObj.opacity, }; - console.log(`保存渲染顺序: z-index = ${this.previousZIndex}`); + // console.log(`保存渲染顺序: z-index = ${this.previousZIndex}`); } } @@ -716,7 +716,7 @@ export class ChangeFixedImageCommand extends Command { false ); if (insertSuccess) { - console.log(`新图像插入到z-index位置: ${this.previousZIndex}`); + // console.log(`新图像插入到z-index位置: ${this.previousZIndex}`); } else { // 如果插入失败，回退到普通添加 this.canvas.add(newImage); diff --git a/src/component/Canvas/CanvasEditor/commands/RasterizeLayerCommand.js b/src/component/Canvas/CanvasEditor/commands/RasterizeLayerCommand.js index e4cca18e..5b6f3192 100644 --- a/src/component/Canvas/CanvasEditor/commands/RasterizeLayerCommand.js +++ b/src/component/Canvas/CanvasEditor/commands/RasterizeLayerCommand.js @@ -285,17 +285,15 @@ export class RasterizeLayerCommand extends Command { // 提取排序后的对象 this.objectsToRasterize = objectsWithZIndex.map((item) => item.object); - console.log( - `📊 收集到 ${this.layersToRasterize.length} 个图层，${this.objectsToRasterize.length} 个对象进行组合` - ); - console.log( - "🔢 对象z-index顺序:", - objectsWithZIndex.map((item) => ({ - id: item.object.id, - type: item.object.type, - zIndex: item.zIndex, - })) - ); + // console.log(`📊 收集到 ${this.layersToRasterize.length} 个图层，${this.objectsToRasterize.length} 个对象进行组合` ); + // console.log( + // "🔢 对象z-index顺序:", + // objectsWithZIndex.map((item) => ({ + // id: item.object.id, + // type: item.object.type, + // zIndex: item.zIndex, + // })) + // ); } /** @@ -611,17 +609,17 @@ export class ExportLayerToImageCommand extends Command { // 提取排序后的对象 this.objectsToRasterize = objectsWithZIndex.map((item) => item.object); - console.log( - `📊 收集到 ${this.layersToRasterize.length} 个图层，${this.objectsToRasterize.length} 个对象进行组合` - ); - console.log( - "🔢 对象z-index顺序:", - objectsWithZIndex.map((item) => ({ - id: item.object.id, - type: item.object.type, - zIndex: item.zIndex, - })) - ); + // console.log( + // `📊 收集到 ${this.layersToRasterize.length} 个图层，${this.objectsToRasterize.length} 个对象进行组合` + // ); + // console.log( + // "🔢 对象z-index顺序:", + // objectsWithZIndex.map((item) => ({ + // id: item.object.id, + // type: item.object.type, + // zIndex: item.zIndex, + // })) + // ); } /** diff --git a/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/index.vue b/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/index.vue index 84659f21..2ac1bfc6 100644 --- a/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/index.vue +++ b/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/index.vue @@ -125,6 +125,7 @@ " :options="selectOptions" @change="(e) => changeFillRepeat(e, v)" + :disabled="v.layer?.metadata?.level2Type === 'Embroidery'" /> diff --git a/src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue b/src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue index 0e0c820e..69cb3214 100644 --- a/src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue +++ b/src/component/Canvas/CanvasEditor/components/ToolsSidebar.vue @@ -34,7 +34,6 @@ const props = defineProps({ default: "", // 衣服底图URL-线稿 }, }); -console.log(props.clothingMinIOPath) const commandManager = inject("commandManager"); const layerManager = inject("layerManager"); // 图层管理器 diff --git a/src/component/Canvas/CanvasEditor/index.vue b/src/component/Canvas/CanvasEditor/index.vue index 237a8512..41a4c589 100644 --- a/src/component/Canvas/CanvasEditor/index.vue +++ b/src/component/Canvas/CanvasEditor/index.vue @@ -71,10 +71,6 @@ const props = defineProps({ type: [Object, String], default: "", // 默认空 }, - otherData: { - type: [Object, null], - default: null, // 默认空对象 - }, config: { type: Object, default: () => CanvasConfig, // 默认配置 @@ -472,13 +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(); - } - emit("canvas-load-json-success"); - } // // 设置固定图层是否可擦除 @@ -502,10 +491,11 @@ onMounted(async () => { nextTick(() => { // 确保所有依赖都已加载完成 handleCanvasInit(); + emit("canvas-load-json-success"); setTimeout(() => { // 初始状态下生成所有预览图 canvasManager?.updateAllThumbnails?.(); - }, 700); + }, 500); }); let trailingTimeout = null; diff --git a/src/component/Canvas/CanvasEditor/managers/CanvasManager.js b/src/component/Canvas/CanvasEditor/managers/CanvasManager.js index 49042262..fb4866b4 100644 --- a/src/component/Canvas/CanvasEditor/managers/CanvasManager.js +++ b/src/component/Canvas/CanvasEditor/managers/CanvasManager.js @@ -843,7 +843,6 @@ export class CanvasManager { updateMaskPosition(backgroundLayerObject) { if (!backgroundLayerObject || !this.maskLayer || !this.canvas.clipPath) return; - console.log("backgroundLayerObject"); const left = backgroundLayerObject.left; const top = backgroundLayerObject.top; @@ -1187,7 +1186,8 @@ export class CanvasManager { obj.scale = [scaleXY, scaleXY]; obj.angle = angle; obj.location = [left, top]; - obj.gap = [fill_.gapX, fill_.gapY]; + obj.object.gapX = fill_.gapX; + obj.object.gapY = fill_.gapY; } if(obj.level2Type === "Pattern"){ prints.push(obj); @@ -1293,7 +1293,6 @@ export class CanvasManager { } loadJSON(json, calllBack) { - console.log("加载画布JSON数据:", json); // 确保传入的json是字符串格式 if (typeof json === "object") { @@ -1304,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; @@ -1329,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); @@ -1341,7 +1341,7 @@ export class CanvasManager { // 清除当前画布内容 // this.canvas.clear(); // 清除画布内容 可以先去掉 这样加载闪动的情况就比较少 如果有问题 可以再打开 - console.log("清除当前画布内容", canvasData); + // console.log("清除当前画布内容", canvasData); delete canvasData.clipPath; // 删除当前裁剪路径 // 加载画布数据 this.canvas.loadFromJSON(canvasData, async () => { @@ -1370,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()); // 验证图层关联关系 - 稳定后可以注释 @@ -1400,7 +1399,6 @@ export class CanvasManager { await this.layerManager?.updateLayersObjectsInteractivity?.(); await calllBack?.(); - this.emit("canvas-load-json-success"); // 更新所有缩略图 setTimeout(() => { this.updateAllThumbnails(); @@ -1458,7 +1456,7 @@ export class CanvasManager { const printTrimsLayers = [];// 印花和元素图层 const singleLayers = [];// 平铺图层 - otherData_.printObject?.prints?.forEach((print, index) => { + otherData_.printObject?.prints?.forEach((print, index) => {// 印花 print.name = t("Canvas.Print") + (index + 1); if(print.ifSingle){ printTrimsLayers.unshift({...print}); @@ -1466,7 +1464,7 @@ export class CanvasManager { singleLayers.unshift({...print}); } }) - otherData_.trims?.prints?.forEach((trims, index) => { + otherData_.trims?.prints?.forEach((trims, index) => {// 元素 trims.name = t("Canvas.Elements") + (index + 1); printTrimsLayers.unshift({...trims}); }) @@ -1577,37 +1575,52 @@ export class CanvasManager { let name = item.name; let image = await new Promise(resolve => { fabric.Image.fromURL(item.path, (fabricImage)=>{ - const left = flLeft - flWidth * flScaleX / 2 + (item.location?.[0] || 0) * flScaleX - const top = flTop - flHeight * flScaleY / 2 + (item.location?.[1] || 0) * flScaleY - const scaleX = flWidth * (item.scale?.[0] || 1) / fabricImage.width * flScaleX - const scaleY = flHeight * (item.scale?.[1] || 1) / fabricImage.height * flScaleY - const {x, y} = calculateRotatedTopLeftDeg( - fabricImage.width * scaleX, - fabricImage.height * scaleY, - left, - top, - 0, - item.angle || 0 - ) - const angle = item.angle || 0 - fabricImage.set({ - left: x, - top: y, - scaleX: scaleX, - scaleY: scaleY, - angle: angle, - id: id, - layerId: id, - layerName: name, - selectable: true, - hasControls: true, - hasBorders: true, - isPrintTrims: true, - globalCompositeOperation: BlendMode.MULTIPLY, - }); resolve(fabricImage); }, { crossOrigin: "anonymous" }); }) + let left = flLeft - flWidth * flScaleX / 2 + (item.location?.[0] || 0) * flScaleX + let top = flTop - flHeight * flScaleY / 2 + (item.location?.[1] || 0) * flScaleY + let scaleX = flWidth * (item.scale?.[0] || 1) / image.width * flScaleX + let scaleY = flHeight * (item.scale?.[1] || 1) / image.height * flScaleY + let {x, y} = calculateRotatedTopLeftDeg( + image.width * scaleX, + image.height * scaleY, + left, + top, + 0, + item.angle || 0 + ) + let angle = item.angle || 0 + + let opacity = 1 + let flipX = false; + let flipY = false; + let blendMode = BlendMode.MULTIPLY; + if(item.level2Type === "Embroidery") blendMode = BlendMode.NORMAL;// 元素正常 + if(item.object){ + opacity = item.object.opacity + flipX = item.object.flipX + flipY = item.object.flipY + if(item.object.blendMode) blendMode = item.object.blendMode; + } + image.set({ + left: x, + top: y, + scaleX: scaleX, + scaleY: scaleY, + angle: angle, + opacity: opacity, + flipX: flipX, + flipY: flipY, + globalCompositeOperation: blendMode, + id: id, + layerId: id, + layerName: name, + selectable: true, + hasControls: true, + hasBorders: true, + isPrintTrims: true, + }); this.canvas.add(image); let layer = createLayer({ id: id, @@ -1615,11 +1628,11 @@ export class CanvasManager { type: LayerType.BITMAP, visible: true, locked: false, - opacity: 1.0, + opacity: opacity, isPrintTrims: true, - blendMode: BlendMode.MULTIPLY, + blendMode: blendMode, fabricObjects: [image.toObject(["id", "layerId", "layerName"])], - metadata: {sourceData: item}, + metadata: {sourceData: item, level2Type: item.level2Type}, }) children.push(layer); }; diff --git a/src/component/Canvas/CanvasEditor/managers/ExportManager.js b/src/component/Canvas/CanvasEditor/managers/ExportManager.js index f3777452..98dc6532 100644 --- a/src/component/Canvas/CanvasEditor/managers/ExportManager.js +++ b/src/component/Canvas/CanvasEditor/managers/ExportManager.js @@ -681,7 +681,7 @@ export class ExportManager { isEnhanceImg, // 是否是增强图片 }); - console.log("导出图片数据URL:", dataURL); + // console.log("导出图片数据URL:", dataURL); return dataURL; // // 创建与画布相同尺寸的临时画布 diff --git a/src/component/Canvas/CanvasEditor/managers/LayerManager.js b/src/component/Canvas/CanvasEditor/managers/LayerManager.js index 007ef3f5..293590ea 100644 --- a/src/component/Canvas/CanvasEditor/managers/LayerManager.js +++ b/src/component/Canvas/CanvasEditor/managers/LayerManager.js @@ -149,7 +149,7 @@ export class LayerManager { */ initCommandManager() { // 命令注册逻辑已移除，现在直接使用命令类实例化和执行 - console.log("CommandManager 已初始化，使用直接命令调用模式"); + // console.log("CommandManager 已初始化，使用直接命令调用模式"); } /** @@ -161,7 +161,7 @@ export class LayerManager { this.layerSort = createLayerSort(this.canvas, this.layers, { commandManager: this.commandManager, }); - console.log("图层排序工具已初始化"); + // console.log("图层排序工具已初始化"); } } @@ -180,7 +180,7 @@ export class LayerManager { // 更新所有对象的交互性 this.updateLayersObjectsInteractivity(); - console.log(`已切换到${mode}模式`); + // console.log(`已切换到${mode}模式`); } setToolManager(toolManager) { @@ -332,7 +332,7 @@ export class LayerManager { // 私有方法：应用交互规则 async _applyInteractionRules({ isMoveing }) { - console.log("updateLayersObjectsInteractivity ===>", this.editorMode); + // console.log("updateLayersObjectsInteractivity ===>", this.editorMode); const objects = this.canvas.getObjects(); const editorMode = this.editorMode || CanvasConfig.defaultTool; const layers = this.layers?.value || []; @@ -975,7 +975,7 @@ export class LayerManager { return !layer.isFixed && !layer.isFixedOther && !layer.isBackground }) // const normalLayers = this.layers.value.filter((l) => !l.isBackground && !l.isFixed && !l.isFixedOther); - console.log("普通图层:", normalLayers) + // console.log("普通图层:", normalLayers) if (isChild ? parentLength <= 1 : false) {//normalLayers.length <= 1 console.warn("不能删除唯一的普通图层"); message.warning(this.t("Canvas.cannotDeleteOnlyLayer")); @@ -1096,14 +1096,14 @@ export class LayerManager { if (this.commandManager) { const result = this.commandManager.execute(command); if (result) { - console.log(`✅ 图层移动成功: ${direction}`); + // console.log(`✅ 图层移动成功: ${direction}`); } return result; } else { const result = command.execute(); if (result) { // 更新画布渲染顺序 - console.log(`✅ 图层移动成功: ${direction}`); + // console.log(`✅ 图层移动成功: ${direction}`); } return result; } @@ -1147,7 +1147,6 @@ export class LayerManager { return acc; }, []); - console.log("==========", allObjects) // if (layer.fill) { // // 如果图层有填充颜色，设置所有对象的填充颜色 // const { object } = findObjectById(this.canvas, layer.fill.id); @@ -1845,7 +1844,7 @@ export class LayerManager { input.select(); document.execCommand("copy"); document.body.removeChild(input); - console.log(`已复制图层：${layer.name}`); + // console.log(`已复制图层：${layer.name}`); return this.clipboardData; } @@ -1870,7 +1869,7 @@ export class LayerManager { // 检查是否是唯一的普通图层 const normalLayers = this.layers.value.filter((l) => !l.isBackground && !l.isFixed && !l.isFixedOther); - console.log("普通图层:", normalLayers) + // console.log("普通图层:", normalLayers) if (normalLayers.length <= 1) { console.warn("不能剪切唯一的普通图层"); return null; @@ -1930,7 +1929,7 @@ export class LayerManager { // 更新对象交互性 this.updateLayersObjectsInteractivity(); - console.log(`已剪切图层：${layer.name}`); + // console.log(`已剪切图层：${layer.name}`); return this.clipboardData; } @@ -1944,7 +1943,7 @@ export class LayerManager { * @returns {string} 新创建的图层ID */ async pasteLayer(event) { - console.log("剪贴板数据:", this.clipboardData,event); + // console.log("剪贴板数据:", this.clipboardData,event); if (!this.clipboardData) { console.error("剪贴板中没有图层数据"); return null; @@ -2099,7 +2098,7 @@ export class LayerManager { // 重新初始化基本图层 this.initializeLayers(); - console.log("已清空画布"); + // console.log("已清空画布"); } /** @@ -2312,7 +2311,7 @@ export class LayerManager { }); if (emptyLayerIds.length > 0) { - console.log(`已清理 ${emptyLayerIds.length} 个空图层`); + // console.log(`已清理 ${emptyLayerIds.length} 个空图层`); } return emptyLayerIds; @@ -2344,7 +2343,7 @@ export class LayerManager { this.canvasManager = null; this.toolManager = null; - console.log("LayerManager 已销毁"); + // console.log("LayerManager 已销毁"); } /** @@ -2652,13 +2651,13 @@ export class LayerManager { // 启用红绿图模式 enableRedGreenMode() { this.isRedGreenMode = true; - console.log("图层管理器：红绿图模式已启用"); + // console.log("图层管理器：红绿图模式已启用"); } // 禁用红绿图模式 disableRedGreenMode() { this.isRedGreenMode = false; - console.log("图层管理器：红绿图模式已禁用"); + // console.log("图层管理器：红绿图模式已禁用"); } // 检查是否为红绿图模式 @@ -2708,14 +2707,14 @@ export class LayerManager { : LayerSortUtils.shouldUseAsyncProcessing(objectsCount, layersCount); if (shouldUseAsync) { - console.log( - `使用异步排序处理 ${objectsCount} 个对象, ${layersCount} 个图层` - ); + // console.log( + // `使用异步排序处理 ${objectsCount} 个对象, ${layersCount} 个图层` + // ); return this.layerSort.rearrangeObjectsAsync(); } else { - console.log( - `使用同步排序处理 ${objectsCount} 个对象, ${layersCount} 个图层` - ); + // console.log( + // `使用同步排序处理 ${objectsCount} 个对象, ${layersCount} 个图层` + // ); this.layerSort.rearrangeObjects(); } } @@ -2735,7 +2734,7 @@ export class LayerManager { const result = this.layerSort.smartSort(targetLayerIds); if (result) { - console.log("智能排序完成"); + // console.log("智能排序完成"); // 更新对象交互性 this.updateLayersObjectsInteractivity(); } @@ -2761,9 +2760,9 @@ export class LayerManager { const stats = this.layerSort.optimizeLayerStructure(); if (stats.removedEmptyLayers > 0 || stats.reorderedLayers > 0) { - console.log( - `图层结构优化完成: 清理空图层 ${stats.removedEmptyLayers} 个, 重新排序 ${stats.reorderedLayers} 个图层` - ); + // console.log( + // `图层结构优化完成: 清理空图层 ${stats.removedEmptyLayers} 个, 重新排序 ${stats.reorderedLayers} 个图层` + // ); // 更新对象交互性 this.updateLayersObjectsInteractivity(); } @@ -2838,9 +2837,9 @@ export class LayerManager { }); if (result) { - console.log( - `图层 ${layerId} - oldIndex: ${oldIndex} 已移动到位置 ${newIndex}` - ); + // console.log( + // `图层 ${layerId} - oldIndex: ${oldIndex} 已移动到位置 ${newIndex}` + // ); // 更新对象交互性 // this.updateLayersObjectsInteractivity(); } @@ -2917,9 +2916,9 @@ export class LayerManager { const result = this.layerSort.reorderLayers(oldIndex, newIndex, layerId); if (result) { - console.log( - `高级排序完成: 图层 ${layerId} 从位置 ${oldIndex} 移动到 ${newIndex}` - ); + // console.log( + // `高级排序完成: 图层 ${layerId} 从位置 ${oldIndex} 移动到 ${newIndex}` + // ); // 更新对象交互性 this.updateLayersObjectsInteractivity(); } @@ -2944,9 +2943,9 @@ export class LayerManager { ); if (result) { - console.log( - `高级子图层排序完成: 图层 ${layerId} 在父图层 ${parentId} 中从位置 ${oldIndex} 移动到 ${newIndex}` - ); + // console.log( + // `高级子图层排序完成: 图层 ${layerId} 在父图层 ${parentId} 中从位置 ${oldIndex} 移动到 ${newIndex}` + // ); // 重新排列画布对象 this.rearrangeCanvasObjects(); } @@ -2971,7 +2970,7 @@ export class LayerManager { // 重新排列画布对象 this.rearrangeCanvasObjects(); - console.log("使用LayerSort工具完成图层排序"); + // console.log("使用LayerSort工具完成图层排序"); } /** @@ -2979,7 +2978,7 @@ export class LayerManager { * 当图层顺序发生变化后调用此方法确保画布对象顺序正确 */ forceRebuildCanvasOrder() { - console.log("强制重建画布对象顺序"); + // console.log("强制重建画布对象顺序"); if (this.layerSort) { // 使用LayerSort的高级排序 @@ -3010,7 +3009,7 @@ export class LayerManager { return false; } - console.log(`开始批量重新排序 ${reorderOperations.length} 个图层`); + // console.log(`开始批量重新排序 ${reorderOperations.length} 个图层`); let allSuccessful = true; @@ -3042,7 +3041,7 @@ export class LayerManager { } if (allSuccessful) { - console.log("批量图层排序完成"); + // console.log("批量图层排序完成"); } else { console.warn("批量图层排序部分失败"); } @@ -3079,11 +3078,11 @@ export class LayerManager { // 执行命令 if (this.commandManager) { const result = await this.commandManager.execute(command); - result && console.log(`✅ 成功合并组图层: ${groupLayer.name}`); + // result && console.log(`✅ 成功合并组图层: ${groupLayer.name}`); return result; } else { const result = await command.execute(); - result && console.log(`✅ 成功合并组图层: ${groupLayer.name}`); + // result && console.log(`✅ 成功合并组图层: ${groupLayer.name}`); return result || []; } } @@ -3132,13 +3131,13 @@ export class LayerManager { if (this.commandManager) { const result = await this.commandManager.execute(command); if (result) { - console.log(`✅ 成功栅格化图层: ${targetLayer.name}`); + // console.log(`✅ 成功栅格化图层: ${targetLayer.name}`); } return result; } else { const result = await command.execute(); if (result) { - console.log(`✅ 成功栅格化图层: ${targetLayer.name}`); + // console.log(`✅ 成功栅格化图层: ${targetLayer.name}`); } return result; } @@ -3209,13 +3208,13 @@ export class LayerManager { if (this.commandManager) { const result = await this.commandManager.execute(command); if (result) { - console.log(`✅ 成功导出图层: ${targetLayer.name}`); + // console.log(`✅ 成功导出图层: ${targetLayer.name}`); } return result; } else { const result = await command.execute(); if (result) { - console.log(`✅ 成功导出图层: ${targetLayer.name}`); + // console.log(`✅ 成功导出图层: ${targetLayer.name}`); } return result; } @@ -3259,7 +3258,7 @@ export class LayerManager { // 执行命令 const result = await command.execute(false); if (result) { - console.log(`✅ 成功导出图层: ${targetLayer.name}`); + // console.log(`✅ 成功导出图层: ${targetLayer.name}`); } return result; } @@ -3294,12 +3293,12 @@ export class LayerManager { const isSginleObject = e.target === activeSelection?._objects?.[0]; if (e.target === activeSelection || isSginleObject) { hasMoved = false; // 重置移动状态 - console.log("🎯 开始移动组选择对象"); + // console.log("🎯 开始移动组选择对象"); // 记录遮罩初始位置 - console.log( - "🖼️ 记录遮罩初始位置", - `${layer.clippingMask.left || 0}, ${layer.clippingMask.top || 0}` - ); + // console.log( + // "🖼️ 记录遮罩初始位置", + // `${layer.clippingMask.left || 0}, ${layer.clippingMask.top || 0}` + // ); // 记录初始位置 initialLeft = isSginleObject ? e.target.left : activeSelection.left; initialTop = isSginleObject ? e.target.top : activeSelection.top; @@ -3366,12 +3365,12 @@ export class LayerManager { const isSginleObject = e.target === activeSelection?._objects?.[0]; if (isSginleObject) { // 如果是单个对象，不处理 - console.log("🚫 单个对象不处理移动完成"); + // console.log("🚫 单个对象不处理移动完成"); hasMoved = false; // 重置移动状态 return; } if ((target === activeSelection || isSginleObject) && hasMoved) { - console.log("✅ 组选择对象移动完成"); + // console.log("✅ 组选择对象移动完成"); // 计算最终移动距离 const deltaX = target.left - initialLeft; @@ -3410,7 +3409,7 @@ export class LayerManager { // 鼠标抬起事件处理 - 备用方案 const handleMouseUp = (e) => { if (hasMoved && this.canvas.getActiveObject() === activeSelection) { - console.log("🖱️ 鼠标抬起 - 备用移动完成处理"); + // console.log("🖱️ 鼠标抬起 - 备用移动完成处理"); handleModified(e); } }; @@ -3424,7 +3423,7 @@ export class LayerManager { this.canvas.off("selection:cleared", cleanup); this.canvas.off("selection:updated", cleanup); - console.log("🧹 清理组遮罩移动同步事件监听器"); + // console.log("🧹 清理组遮罩移动同步事件监听器"); }; // 绑定事件监听器 @@ -3437,7 +3436,7 @@ export class LayerManager { this.canvas.on("selection:cleared", cleanup); this.canvas.on("selection:updated", cleanup); - console.log("🎨 已设置组遮罩移动同步 - 使用 object:modified 事件"); + // console.log("🎨 已设置组遮罩移动同步 - 使用 object:modified 事件"); } /** diff --git a/src/component/Canvas/CanvasEditor/managers/ThumbnailManager.js b/src/component/Canvas/CanvasEditor/managers/ThumbnailManager.js index 2f6010fc..3c042817 100644 --- a/src/component/Canvas/CanvasEditor/managers/ThumbnailManager.js +++ b/src/component/Canvas/CanvasEditor/managers/ThumbnailManager.js @@ -27,7 +27,7 @@ export class ThumbnailManager { const { layer } = findLayerRecursively(this.layers.value, layerId); if (!fabricObjects || fabricObjects.length === 0) { - console.warn("⚠️ 无法生成缩略图：没有可栅格化的对象 返回空缩略图"); + // console.warn("⚠️ 无法生成缩略图：没有可栅格化的对象 返回空缩略图"); // 如果没有对象，返回默认缩略图 if (layer) { layer.thumbnailUrl = this.defaultThumbnail; // 更新图层对象的缩略图 @@ -123,7 +123,7 @@ export class ThumbnailManager { */ _collectLayersAndObjects(layerId) { if (!layerId) { - console.warn("⚠️ 无效的图层ID，无法收集对象"); + // console.warn("⚠️ 无效的图层ID，无法收集对象"); return []; } @@ -199,17 +199,17 @@ export class ThumbnailManager { // 提取排序后的对象 const objectsToRasterize = objectsWithZIndex.map((item) => item.object); - console.log( - `📊 收集到 ${layersToRasterize.length} 个图层，${objectsToRasterize.length} 个对象进行栅格化` - ); - console.log( - "🔢 对象z-index顺序:", - objectsWithZIndex.map((item) => ({ - id: item.object.id, - type: item.object.type, - zIndex: item.zIndex, - })) - ); + // console.log( + // `📊 收集到 ${layersToRasterize.length} 个图层，${objectsToRasterize.length} 个对象进行栅格化` + // ); + // console.log( + // "🔢 对象z-index顺序:", + // objectsWithZIndex.map((item) => ({ + // id: item.object.id, + // type: item.object.type, + // zIndex: item.zIndex, + // })) + // ); return objectsToRasterize; } diff --git a/src/component/Canvas/CanvasEditor/managers/ToolManager.js b/src/component/Canvas/CanvasEditor/managers/ToolManager.js index 3b34ec84..53fd8852 100644 --- a/src/component/Canvas/CanvasEditor/managers/ToolManager.js +++ b/src/component/Canvas/CanvasEditor/managers/ToolManager.js @@ -420,7 +420,7 @@ export class ToolManager { // 设置工具特定的状态 if (tool && typeof tool.setup === "function") { - console.log(`画布切换工具:${tool.name}(${toolId})`) + // console.log(`画布切换工具:${tool.name}(${toolId})`) this.canvas.toolId = toolId; tool.setup(); } @@ -695,7 +695,7 @@ export class ToolManager { // // 设置矩形选区模式 // // 这里需要具体的矩形选区工具实现 - console.log("矩形选区工具已激活"); + // console.log("矩形选区工具已激活"); if (this.canvasManager && this.canvasManager.selectionManager) { this.canvasManager.selectionManager.setCurrentTool( @@ -894,7 +894,7 @@ export class ToolManager { this._rasterizeLayerForLiquify(layerId); }, onCancel: () => { - console.log("用户取消了栅格化操作"); + // console.log("用户取消了栅格化操作"); // 用户取消，触发液化面板显示事件但不能液化 document.dispatchEvent( new CustomEvent("showLiquifyPanel", { @@ -1286,7 +1286,7 @@ export class ToolManager { */ showTextEditor(textObject, layer) { // 这个方法将在TextEditorPanel组件实现后调用 - console.log("显示文本编辑面板", textObject, layer); + // console.log("显示文本编辑面板", textObject, layer); // 将发出一个事件，让Vue组件捕获并显示编辑面板 document.dispatchEvent( new CustomEvent("showTextEditor", { @@ -1302,7 +1302,7 @@ export class ToolManager { */ hideTextEditor() { // 这个方法将在TextEditorPanel组件实现后调用 - console.log("隐藏文本编辑面板"); + // console.log("隐藏文本编辑面板"); // 将发出一个事件，让Vue组件捕获并隐藏编辑面板 document.dispatchEvent( new CustomEvent("hideTextEditor", { @@ -1323,7 +1323,7 @@ export class ToolManager { if (this.brushIndicator) { this.brushIndicator.dispose(); this.brushIndicator = null; - console.log("笔刷指示器已清理"); + // console.log("笔刷指示器已清理"); } // 移除文本编辑相关事件监听器 @@ -1348,7 +1348,7 @@ export class ToolManager { this.canvas.isDrawingMode = false; this.canvas.selection = false; - console.log("文本工具已激活"); + // console.log("文本工具已激活"); } /** @@ -1424,7 +1424,7 @@ export class ToolManager { // 切换到红色笔刷工具作为默认工具 this.setTool(OperationType.RED_BRUSH); - console.log("工具管理器已进入红绿图模式"); + // console.log("工具管理器已进入红绿图模式"); } /** @@ -1437,7 +1437,7 @@ export class ToolManager { // 切换回选择工具 this.setTool(OperationType.SELECT); - console.log("工具管理器已退出红绿图模式"); + // console.log("工具管理器已退出红绿图模式"); } /** @@ -1495,7 +1495,7 @@ export class ToolManager { // 更新指示器颜色 this.brushIndicator.updateColor(brushColor); - console.log(`笔刷指示器已启用，大小: ${brushSize}, 颜色: ${brushColor}`); + // console.log(`笔刷指示器已启用，大小: ${brushSize}, 颜色: ${brushColor}`); } /** @@ -1506,7 +1506,7 @@ export class ToolManager { if (!this.brushIndicator) return; this.brushIndicator.disable(); - console.log("笔刷指示器已禁用"); + // console.log("笔刷指示器已禁用"); } /** @@ -1517,7 +1517,7 @@ export class ToolManager { if (!this.brushIndicator) return; this.brushIndicator.updateSize(size); - console.log(`笔刷指示器大小已更新为: ${size}`); + // console.log(`笔刷指示器大小已更新为: ${size}`); } /** @@ -1528,7 +1528,7 @@ export class ToolManager { if (!this.brushIndicator) return; this.brushIndicator.updateColor(color); - console.log(`笔刷指示器颜色已更新为: ${color}`); + // console.log(`笔刷指示器颜色已更新为: ${color}`); } /** diff --git a/src/component/Canvas/CanvasEditor/managers/command/CommandManager.js b/src/component/Canvas/CanvasEditor/managers/command/CommandManager.js index c6984c9b..65fd54b4 100644 --- a/src/component/Canvas/CanvasEditor/managers/command/CommandManager.js +++ b/src/component/Canvas/CanvasEditor/managers/command/CommandManager.js @@ -299,7 +299,7 @@ export class CommandManager { this.undoStack = []; this.redoStack = []; this._notifyStateChange(); - console.log("📝 命令历史已清空"); + // console.log("📝 命令历史已清空"); } /** diff --git a/src/component/Canvas/CanvasEditor/managers/events/CanvasEventManager.js b/src/component/Canvas/CanvasEditor/managers/events/CanvasEventManager.js index 270c3003..8c318cf5 100644 --- a/src/component/Canvas/CanvasEditor/managers/events/CanvasEventManager.js +++ b/src/component/Canvas/CanvasEditor/managers/events/CanvasEventManager.js @@ -485,7 +485,7 @@ export class CanvasEventManager { // 调试信息 if (process.env.NODE_ENV === "development") { - console.log("iPad touchstart:", e.touches.length, "fingers"); + // console.log("iPad touchstart:", e.touches.length, "fingers"); } if (e.touches.length === 2) { @@ -500,11 +500,11 @@ export class CanvasEventManager { this.touchState.zoomCenter = { x: centerX, y: centerY }; if (process.env.NODE_ENV === "development") { - console.log("iPad双指缩放开始:", { - distance: lastTouchDistance, - zoom: lastZoom, - center: this.touchState.zoomCenter, - }); + // console.log("iPad双指缩放开始:", { + // distance: lastTouchDistance, + // zoom: lastZoom, + // center: this.touchState.zoomCenter, + // }); } e.preventDefault(); @@ -554,14 +554,14 @@ export class CanvasEventManager { const clampedZoom = Math.max(0.1, Math.min(5, newZoom)); if (process.env.NODE_ENV === "development") { - console.log("iPad双指缩放中:", { - currentDistance, - lastTouchDistance, - scale, - currentZoom, - newZoom, - clampedZoom, - }); + // console.log("iPad双指缩放中:", { + // currentDistance, + // lastTouchDistance, + // scale, + // currentZoom, + // newZoom, + // clampedZoom, + // }); } // 使用缩放中心点进行缩放 @@ -839,7 +839,7 @@ export class CanvasEventManager { const hasNewImage = !!fabricImage; if (!hasExistingObjects && !hasNewImage) { - console.log("没有对象需要合并"); + // console.log("没有对象需要合并"); return; } @@ -851,7 +851,7 @@ export class CanvasEventManager { // 执行高保真合并操作 try { - console.log(`开始合并图层 ${activeLayer.name} 中的对象为组...`); + // console.log(`开始合并图层 ${activeLayer.name} 中的对象为组...`); const command = await this.layerManager.LayerObjectsToGroup( activeLayer, @@ -869,7 +869,7 @@ export class CanvasEventManager { // 降级处理：如果合并失败，至少保证新图像能添加到图层 if (fabricImage && this.layerManager) { - console.log("执行降级处理：直接添加图像到图层"); + // console.log("执行降级处理：直接添加图像到图层"); this.layerManager.addObjectToLayer(fabricImage, activeLayer.id); } } @@ -1011,15 +1011,15 @@ export class CanvasEventManager { // 调试日志 - 仅在开发环境输出 if (process.env.NODE_ENV === "development") { - console.log("设备检测结果:", { - userAgent, - platform, - isMobile, - isTablet, - isDesktop, - hasTouchSupport, - maxTouchPoints: navigator.maxTouchPoints, - }); + // console.log("设备检测结果:", { + // userAgent, + // platform, + // isMobile, + // isTablet, + // isDesktop, + // hasTouchSupport, + // maxTouchPoints: navigator.maxTouchPoints, + // }); } return { diff --git a/src/component/Canvas/CanvasEditor/managers/events/KeyboardManager.js b/src/component/Canvas/CanvasEditor/managers/events/KeyboardManager.js index 8e1b9408..78e5493f 100644 --- a/src/component/Canvas/CanvasEditor/managers/events/KeyboardManager.js +++ b/src/component/Canvas/CanvasEditor/managers/events/KeyboardManager.js @@ -219,7 +219,7 @@ export class KeyboardManager { const text = event.clipboardData?.getData("text/plain") || ""; if(/^aida_copy_canvas_layer/.test(text)) return; const items = event.clipboardData?.items || []; - console.log(this); + // console.log(this); for (const item of items) { if (item.type.indexOf("text/plain") !== -1) { item.getAsString((text) => { @@ -249,7 +249,7 @@ export class KeyboardManager { this.container.addEventListener("touchcancel", this._handleTouchEnd); } - console.log(`键盘管理器已初始化，平台: ${this.platform}, 触摸设备: ${this.isTouchDevice}`); + // console.log(`键盘管理器已初始化，平台: ${this.platform}, 触摸设备: ${this.isTouchDevice}`); } /** @@ -437,35 +437,35 @@ export class KeyboardManager { case "copy": // 复制逻辑 - console.log("复制当前选中图层"); + // console.log("复制当前选中图层"); if(this.isRedGreenMode.value) return; this.layerManager.copyLayer(this.layerManager.activeLayerId.value); break; case "paste": // 粘贴逻辑 - console.log("粘贴"); + // console.log("粘贴"); if(this.isRedGreenMode.value) return; this.layerManager.pasteLayer(); break; case "cut": // 剪切逻辑 - console.log("剪切"); + // console.log("剪切"); if(this.isRedGreenMode.value) return; this.layerManager.cutLayer(this.layerManager.activeLayerId.value); break; case "delete": // 删除逻辑 - console.log("删除"); + // console.log("删除"); if(this.isRedGreenMode.value) return; this.layerManager.removeLayer(this.layerManager.activeLayerId.value); break; case "selectAll": // 全选逻辑 - console.log("全选"); + // console.log("全选"); if(this.isRedGreenMode.value) return; // 这里需要实现全选逻辑 TODO: 是否在选择模式下才可以全选？ if (this.layerManager) { @@ -475,7 +475,7 @@ export class KeyboardManager { case "clearSelection": // 清除选择逻辑 - console.log("清除选择"); + // console.log("清除选择"); // 这里需要实现清除选择逻辑 if (this.layerManager) { this.layerManager.clearSelection(); @@ -484,7 +484,7 @@ export class KeyboardManager { case "save": // 保存逻辑 - console.log("保存"); + // console.log("保存"); break; case "selectTool": @@ -591,7 +591,7 @@ export class KeyboardManager { case "contextMenu": // 上下文菜单（通常由右击或触控设备上的特定手势触发） - console.log("显示上下文菜单"); + // console.log("显示上下文菜单"); // 这里需要实现显示上下文菜单的逻辑 break; diff --git a/src/component/Canvas/CanvasEditor/managers/liquify/LiquifyStateManager.js b/src/component/Canvas/CanvasEditor/managers/liquify/LiquifyStateManager.js index a8a648de..63b9326d 100644 --- a/src/component/Canvas/CanvasEditor/managers/liquify/LiquifyStateManager.js +++ b/src/component/Canvas/CanvasEditor/managers/liquify/LiquifyStateManager.js @@ -30,7 +30,7 @@ export class LiquifyStateManager { // 设备性能检测 this.devicePerformance = this._detectDevicePerformance(); - console.log("🎯 液化状态管理器已初始化，设备性能等级:", this.devicePerformance); + // console.log("🎯 液化状态管理器已初始化，设备性能等级:", this.devicePerformance); } /** @@ -48,7 +48,7 @@ export class LiquifyStateManager { // 显示操作反馈 this._showOperationFeedback(); - console.log("🚀 开始液化操作"); + // console.log("🚀 开始液化操作"); } /** @@ -68,7 +68,7 @@ export class LiquifyStateManager { // 禁用不必要的画布功能 this._disableCanvasFeatures(); - console.log("🖱️ 开始拖拽操作"); + // console.log("🖱️ 开始拖拽操作"); } /** @@ -98,7 +98,7 @@ export class LiquifyStateManager { } } - console.log("✅ 结束拖拽操作"); + // console.log("✅ 结束拖拽操作"); } /** @@ -116,7 +116,7 @@ export class LiquifyStateManager { // 隐藏操作反馈 this._hideOperationFeedback(); - console.log(`⏱️ 液化操作完成，耗时: ${operationTime.toFixed(2)}ms`); + // console.log(`⏱️ 液化操作完成，耗时: ${operationTime.toFixed(2)}ms`); } /** @@ -158,11 +158,11 @@ export class LiquifyStateManager { // 根据性能数据动态调整设置 this._adaptivePerformanceOptimization(operationTime); - console.log( - `📊 记录性能指标: ${operationType}/${mode}, 耗时: ${operationTime.toFixed( - 2 - )}ms, 渲染模式: ${renderMode}` - ); + // console.log( + // `📊 记录性能指标: ${operationType}/${mode}, 耗时: ${operationTime.toFixed( + // 2 + // )}ms, 渲染模式: ${renderMode}` + // ); } /** @@ -179,7 +179,7 @@ export class LiquifyStateManager { const currentQuality = this.realtimeUpdater.config.imageQuality || 1.0; if (currentQuality > 0.7) { this.realtimeUpdater.setImageQuality(Math.max(0.7, currentQuality - 0.1)); - console.log("⚡ 自动降低图像质量以提升性能"); + // console.log("⚡ 自动降低图像质量以提升性能"); } // 增加节流时间 @@ -188,7 +188,7 @@ export class LiquifyStateManager { 33, this.realtimeUpdater.config.throttleTime + 8 ); - console.log("⏱️ 自动增加节流时间以提升性能"); + // console.log("⏱️ 自动增加节流时间以提升性能"); } } @@ -228,7 +228,7 @@ export class LiquifyStateManager { this._updateCursor("default"); this.cursorCache.clear(); - console.log("🧹 液化状态管理器已清理"); + // console.log("🧹 液化状态管理器已清理"); } // === 私有方法 === diff --git a/src/component/Canvas/CanvasEditor/utils/rasterizedImage.js b/src/component/Canvas/CanvasEditor/utils/rasterizedImage.js index e41409d3..e1d21b5d 100644 --- a/src/component/Canvas/CanvasEditor/utils/rasterizedImage.js +++ b/src/component/Canvas/CanvasEditor/utils/rasterizedImage.js @@ -22,7 +22,7 @@ export const createRasterizedImage = async ({ isGroupWithMask = false, // 是否为带遮罩的组图层 } = {}) => { try { - console.log(`📊 开始栅格化 ${fabricObjects.length} 个对象${maskObject ? "（带遮罩）" : ""}`); + // console.log(`📊 开始栅格化 ${fabricObjects.length} 个对象${maskObject ? "（带遮罩）" : ""}`); // 确保有对象需要栅格化 if (fabricObjects.length === 0) { @@ -36,7 +36,7 @@ export const createRasterizedImage = async ({ if (isThumbnail) scaleFactor = 0.2; // 缩略图使用较小的高清倍数 - console.log(`高清倍数: ${scaleFactor}, 当前缩放: ${currentZoom}`); + // console.log(`高清倍数: ${scaleFactor}, 当前缩放: ${currentZoom}`); // 如果有遮罩且保持原始质量，使用高质量的遮罩处理方法 if (maskObject && preserveOriginalQuality) { @@ -58,7 +58,7 @@ export const createRasterizedImage = async ({ } if (isReturenDataURL) { - console.log("✅ 带遮罩的栅格化图像创建成功，返回DataURL"); + // console.log("✅ 带遮罩的栅格化图像创建成功，返回DataURL"); return rasterizedImage; } @@ -77,7 +77,7 @@ export const createRasterizedImage = async ({ }, }); - console.log(`✅ 带遮罩的栅格化图像创建完成`); + // console.log(`✅ 带遮罩的栅格化图像创建完成`); return rasterizedImage; } @@ -101,7 +101,7 @@ export const createRasterizedImage = async ({ } if (isReturenDataURL) { - console.log("✅ 栅格化图像创建成功，返回DataURL"); + // console.log("✅ 栅格化图像创建成功，返回DataURL"); return rasterizedImage; } @@ -120,7 +120,7 @@ export const createRasterizedImage = async ({ }, }); - console.log(`✅ 栅格化图像创建完成`); + // console.log(`✅ 栅格化图像创建完成`); } return rasterizedImage; @@ -172,7 +172,7 @@ const createRasterizedImageWithGroup = async ({ // 获取组的绝对边界框 const groupBounds = group.getBoundingRect(true, true); - console.log("📏 组边界框:", groupBounds); + // console.log("📏 组边界框:", groupBounds); // 设置离屏画布尺寸，使用组的边界大小 const canvasWidth = Math.ceil(groupBounds.width * scaleFactor); @@ -184,7 +184,7 @@ const createRasterizedImageWithGroup = async ({ hasControls: false, }); - console.log(`🎨 离屏画布尺寸: ${canvasWidth}x${canvasHeight}, 缩放: ${scaleFactor}`); + // console.log(`🎨 离屏画布尺寸: ${canvasWidth}x${canvasHeight}, 缩放: ${scaleFactor}`); // 调整组的位置，让它位于画布的左上角 group.set({ @@ -266,11 +266,11 @@ const createRasterizedImageWithMask = async ({ isGroupWithMask, }) => { try { - console.log("🎭 使用遮罩创建栅格化图像"); + // console.log("🎭 使用遮罩创建栅格化图像"); // 获取遮罩的边界框，这将作为最终图像的边界 const maskBounds = maskObject.getBoundingRect(true, true); - console.log("📏 遮罩边界框:", maskBounds); + // console.log("📏 遮罩边界框:", maskBounds); // 克隆所有对象，并清除它们的遮罩，避免重复应用 const clonedObjects = []; @@ -308,7 +308,7 @@ const createRasterizedImageWithMask = async ({ height: canvasHeight, }); - console.log(`🎨 离屏画布尺寸: ${canvasWidth}x${canvasHeight}, 缩放: ${scaleFactor}`); + // console.log(`🎨 离屏画布尺寸: ${canvasWidth}x${canvasHeight}, 缩放: ${scaleFactor}`); // 调整对象位置，相对于遮罩边界重新定位 clonedObjects.forEach((obj) => { @@ -376,7 +376,7 @@ const createRasterizedImageWithMask = async ({ // 确保图像位置正确 fabricImage.setCoords(); - console.log("✅ 带遮罩的栅格化图像创建完成"); + // console.log("✅ 带遮罩的栅格化图像创建完成"); return fabricImage; } catch (error) { console.error("带遮罩的栅格化失败:", error); @@ -430,12 +430,12 @@ const createFabricImageFromDataURL = (dataURL) => { */ const applyMaskToCanvas = async (canvas, maskObject, bounds) => { if (!maskObject) { - console.log("没有遮罩对象，跳过遮罩应用"); + // console.log("没有遮罩对象，跳过遮罩应用"); return; } try { - console.log("🎭 应用遮罩到画布"); + // console.log("🎭 应用遮罩到画布"); // 克隆遮罩对象，避免影响原对象 const clonedMask = await cloneObjectAsync(maskObject); @@ -459,7 +459,7 @@ const applyMaskToCanvas = async (canvas, maskObject, bounds) => { // 将遮罩设置为画布的clipPath canvas.clipPath = clonedMask; - console.log("✅ 遮罩应用完成"); + // console.log("✅ 遮罩应用完成"); } catch (error) { console.error("应用遮罩失败:", error); } diff --git a/src/component/Canvas/CanvasEditor/utils/selectionToImage.js b/src/component/Canvas/CanvasEditor/utils/selectionToImage.js index 75e39218..1b775b41 100644 --- a/src/component/Canvas/CanvasEditor/utils/selectionToImage.js +++ b/src/component/Canvas/CanvasEditor/utils/selectionToImage.js @@ -24,7 +24,7 @@ export const createRasterizedImage = async ({ isEnhanceImg, // 是否是增强图片 } = {}) => { try { - console.log(`📊 开始栅格化 ${fabricObjects.length} 个对象`); + // console.log(`📊 开始栅格化 ${fabricObjects.length} 个对象`); // 确保有对象需要栅格化 if (fabricObjects.length === 0) { @@ -86,14 +86,14 @@ const createClippedObjects = async ({ isEnhanceImg, // 是否是增强图片 }) => { try { - console.log("🎯 使用新的图像遮罩裁剪方法创建对象"); + // console.log("🎯 使用新的图像遮罩裁剪方法创建对象"); // 使用优化后的边界计算，确保包含描边区域 const optimizedBounds = calculateOptimizedBounds( clippingObject, fabricObjects ); - console.log("📐 优化后的选区边界框:", optimizedBounds); + // console.log("📐 优化后的选区边界框:", optimizedBounds); // 获取羽化值 let featherAmount = 0; @@ -102,7 +102,7 @@ const createClippedObjects = async ({ typeof selectionManager.getFeatherAmount === "function" ) { featherAmount = selectionManager.getFeatherAmount(); - console.log(`🌟 应用羽化效果: ${featherAmount}px`); + // console.log(`🌟 应用羽化效果: ${featherAmount}px`); } // 方法1：如果只需要返回DataURL，使用画布裁剪方法 @@ -160,7 +160,7 @@ const createClippedObjects = async ({ // 更新坐标 fabricImage.setCoords(); - console.log("✅ 返回裁剪后的fabric对象，已恢复到优化后的原始大小和位置"); + // console.log("✅ 返回裁剪后的fabric对象，已恢复到优化后的原始大小和位置"); return fabricImage; } catch (error) { console.warn("创建裁剪对象失败:", error); @@ -181,7 +181,7 @@ const createClippedDataURLByCanvas = async ({ isEnhanceImg = false, // 是否是增强图片 }) => { try { - console.log("🖼️ 使用图像遮罩裁剪方法生成DataURL"); + // console.log("🖼️ 使用图像遮罩裁剪方法生成DataURL"); // 使用优化后的边界计算，确保包含描边区域 // const optimizedBounds = calculateOptimizedBounds( @@ -199,18 +199,18 @@ const createClippedDataURLByCanvas = async ({ const pixelRatio = window.devicePixelRatio || 1; const qualityMultiplier = !!isEnhanceImg ? Math.max(2, pixelRatio) : 1; - console.log("使用高分辨率以保证质量:" + isEnhanceImg, optimizedBounds); + // console.log("使用高分辨率以保证质量:" + isEnhanceImg, optimizedBounds); const canvasWidth = Math.ceil(optimizedBounds.width * qualityMultiplier); const canvasHeight = Math.ceil(optimizedBounds.height * qualityMultiplier); - console.log( - `📏 优化后画布尺寸: ${canvasWidth}x${canvasHeight} (质量倍数: ${qualityMultiplier})` - ); - console.log("🎯 边界框对比:", { - original: selectionBounds, - optimized: optimizedBounds, - }); + // console.log( + // `📏 优化后画布尺寸: ${canvasWidth}x${canvasHeight} (质量倍数: ${qualityMultiplier})` + // ); + // console.log("🎯 边界框对比:", { + // original: selectionBounds, + // optimized: optimizedBounds, + // }); // 步骤1: 先将路径转换为遮罩图像（支持羽化） const maskImageDataURL = @@ -242,7 +242,7 @@ const createClippedDataURLByCanvas = async ({ canvasHeight, }); - console.log("✅ 图像遮罩裁剪完成，生成DataURL"); + // console.log("✅ 图像遮罩裁剪完成，生成DataURL"); return clippedDataURL; } catch (error) { console.error("图像遮罩裁剪失败:", error); @@ -262,7 +262,7 @@ const createSimpleClone = async ({ format, }) => { try { - console.log("📋 创建简单克隆对象"); + // console.log("📋 创建简单克隆对象"); const clonedObjects = []; @@ -370,7 +370,7 @@ const renderObjectsToDataURL = async (objects, quality, format) => { */ const renderClippedObjectsToDataURL = async (clippedObjects) => { try { - console.log("🖼️ 渲染裁剪对象为DataURL"); + // console.log("🖼️ 渲染裁剪对象为DataURL"); // 计算所有裁剪对象的总边界框 let totalBounds = null; @@ -450,7 +450,7 @@ const renderClippedObjectsToDataURL = async (clippedObjects) => { // 清理临时画布 tempCanvas.dispose(); - console.log("✅ 裁剪对象渲染完成"); + // console.log("✅ 裁剪对象渲染完成"); return dataURL; } catch (error) { console.error("渲染裁剪对象失败:", error); @@ -472,7 +472,7 @@ const createLegacyRasterization = async ({ isCropByBg, // 是否根据背景裁剪 isEnhanceImg, // 是否是增强图片 }) => { - console.log("⚠️ 使用兼容的离屏渲染方法"); +// console.log("⚠️ 使用兼容的离屏渲染方法"); // 这里保留原有的离屏渲染逻辑作为备选方案 const currentZoom = canvas.getZoom?.() || 1; @@ -522,12 +522,12 @@ const calculateBounds = (fabricObjects) => { // 获取绝对边界框（原始大小和位置） const absoluteBound = obj.getBoundingRect(true, true); - console.log(`对象 ${obj.id || index} 边界框比较:`, { - relative: relativeBound, - absolute: absoluteBound, - scaleX: obj.scaleX, - scaleY: obj.scaleY, - }); + // console.log(`对象 ${obj.id || index} 边界框比较:`, { + // relative: relativeBound, + // absolute: absoluteBound, + // scaleX: obj.scaleX, + // scaleY: obj.scaleY, + // }); // 计算绝对边界框的累积范围 if (!absoluteBounds) { @@ -600,7 +600,7 @@ const createOffscreenRasterization = async ({ let renderBounds = absoluteBounds; if (clippingObject) { const clippingBounds = clippingObject.getBoundingRect(true, true); - console.log("🎯 使用裁剪对象边界框:", clippingBounds); + // console.log("🎯 使用裁剪对象边界框:", clippingBounds); renderBounds = clippingBounds; } @@ -613,9 +613,9 @@ const createOffscreenRasterization = async ({ height: canvasHeight, }); - console.log( - `🎨 离屏画布尺寸: ${canvasWidth}x${canvasHeight}, 缩放: ${scaleFactor}` - ); + // console.log( + // `🎨 离屏画布尺寸: ${canvasWidth}x${canvasHeight}, 缩放: ${scaleFactor}` + // ); // 克隆对象到离屏画布 const clonedObjects = []; @@ -786,7 +786,7 @@ const createMaskImageFromPath = async ({ qualityMultiplier, }) => { try { - console.log("🎭 创建路径遮罩图像"); + // console.log("🎭 创建路径遮罩图像"); // 创建专门用于渲染遮罩的画布 const maskCanvas = new fabric.StaticCanvas(); @@ -820,7 +820,7 @@ const createMaskImageFromPath = async ({ // 清理遮罩画布 maskCanvas.dispose(); - console.log("✅ 遮罩图像创建完成"); + // console.log("✅ 遮罩图像创建完成"); return maskDataURL; } catch (error) { console.error("创建遮罩图像失败:", error); @@ -841,7 +841,7 @@ const renderContentToImage = async ({ qualityMultiplier, }) => { try { - console.log("🖼️ 渲染内容图像"); + // console.log("🖼️ 渲染内容图像"); // 创建内容渲染画布 const contentCanvas = new fabric.StaticCanvas(); @@ -880,7 +880,6 @@ const renderContentToImage = async ({ // if(obj.globalCompositeOperation === "multiply"){ // clonedObj.clipPath = null; // } - console.log("==========", obj.id, obj.layerName); contentCanvas.add(clonedObj); } @@ -897,7 +896,7 @@ const renderContentToImage = async ({ // 清理内容画布 contentCanvas.dispose(); - console.log("✅ 内容图像渲染完成"); + // console.log("✅ 内容图像渲染完成"); return contentDataURL; } catch (error) { console.error("渲染内容图像失败:", error); @@ -920,7 +919,7 @@ const applyImageMask = async ({ canvasHeight, }) => { try { - console.log("🎯 应用图像遮罩"); + // console.log("🎯 应用图像遮罩"); return new Promise((resolve, reject) => { // 创建用于合成的Canvas元素 @@ -952,7 +951,7 @@ const applyImageMask = async ({ // 获取最终结果 const resultDataURL = compositeCanvas.toDataURL("image/png", 1.0); - console.log("✅ 图像遮罩应用完成"); + // console.log("✅ 图像遮罩应用完成"); resolve(resultDataURL); } catch (error) { console.error("合成图像失败:", error); @@ -994,7 +993,7 @@ const createAdvancedMaskImage = async ({ featherAmount = 0, }) => { try { - console.log(`🎭 创建高级遮罩图像 (羽化: ${featherAmount})`); + // console.log(`🎭 创建高级遮罩图像 (羽化: ${featherAmount})`); // 创建专门用于渲染遮罩的画布 const maskCanvas = new fabric.StaticCanvas(); @@ -1047,7 +1046,7 @@ const createAdvancedMaskImage = async ({ // 清理遮罩画布 maskCanvas.dispose(); - console.log("✅ 高级遮罩图像创建完成"); + // console.log("✅ 高级遮罩图像创建完成"); return maskDataURL; } catch (error) { console.error("创建高级遮罩图像失败:", error); @@ -1116,7 +1115,7 @@ const createSolidMaskPath = async ( qualityMultiplier ) => { try { - console.log("🔧 创建实体遮罩路径，处理描边转填充"); + // console.log("🔧 创建实体遮罩路径，处理描边转填充"); // 克隆原始对象 const maskPath = await cloneObjectAsync(clippingObject); @@ -1125,9 +1124,9 @@ const createSolidMaskPath = async ( const hasStroke = maskPath.stroke && maskPath.strokeWidth > 0; if (hasStroke) { - console.log( - `📏 检测到描边: ${maskPath.stroke}, 宽度: ${maskPath.strokeWidth}` - ); + // console.log( + // `📏 检测到描边: ${maskPath.stroke}, 宽度: ${maskPath.strokeWidth}` + // ); // 对于有描边的路径，我们需要更精确的处理 const strokeWidth = maskPath.strokeWidth; @@ -1182,7 +1181,7 @@ const createSolidMaskPath = async ( }); } - console.log(`✅ 描边已转换为填充，类型: ${maskPath.type}`); + // console.log(`✅ 描边已转换为填充，类型: ${maskPath.type}`); } else { // 没有描边，直接处理位置和缩放 maskPath.set({ @@ -1216,7 +1215,7 @@ const createSolidMaskPath = async ( */ const calculateOptimizedBounds = (clippingObject, fabricObjects) => { try { - console.log("📐 计算优化后的边界框"); + // console.log("📐 计算优化后的边界框"); // 获取裁剪对象的边界框（包含描边） const clippingBounds = clippingObject.getBoundingRect(true, true); @@ -1232,7 +1231,7 @@ const calculateOptimizedBounds = (clippingObject, fabricObjects) => { clippingBounds.width += strokeWidth; clippingBounds.height += strokeWidth; - console.log(`🖊️ 调整描边边界框，描边宽度: ${strokeWidth}`); + // console.log(`🖊️ 调整描边边界框，描边宽度: ${strokeWidth}`); } // 计算内容对象的边界框 @@ -1246,11 +1245,11 @@ const calculateOptimizedBounds = (clippingObject, fabricObjects) => { height: Math.max(1, clippingBounds.height), }; - console.log("✅ 边界框优化完成", { - original: clippingObject.getBoundingRect(true, true), - optimized: optimizedBounds, - hasStroke: !!(clippingObject.stroke && clippingObject.strokeWidth > 0), - }); + // console.log("✅ 边界框优化完成", { + // original: clippingObject.getBoundingRect(true, true), + // optimized: optimizedBounds, + // hasStroke: !!(clippingObject.stroke && clippingObject.strokeWidth > 0), + // }); return optimizedBounds; } catch (error) { diff --git a/src/component/Canvas/OverallCanvas/demo.vue b/src/component/Canvas/OverallCanvas/demo.vue index 9e5fd8e7..ac5429ae 100644 --- a/src/component/Canvas/OverallCanvas/demo.vue +++ b/src/component/Canvas/OverallCanvas/demo.vue @@ -137,7 +137,6 @@
str.replace(/(?:^|\.)(\d+)(?=\.|$)/g, "[#$1]").replace(/\[#/g, "["); const activeToken = ref("1"); - const list = ref([ - { - token: "1", - ifSingle: false, - level2Type: "Pattern", - designType: "Library", - path: "/src/assets/images/canvas/yinhua1.jpg", - location: [0, 0], - scale: [1, 1], - angle: 0, - name: "Print1", - priority: 1, - object: { - top: 0, - left: 0, - scaleX: 1, - scaleY: 1, - opacity: 1, - angle: 0, - flipX: false, - flipY: false, - blendMode: "multiply", - gapX: 10, - gapY: 20, - }, - }, - { - token: "2", - ifSingle: false, - level2Type: "Pattern", - designType: "Library", - path: "/src/assets/images/canvas/yinhua1.jpg", - location: [0, 0], - scale: [2, 2], - angle: -45, - name: "Print2", - priority: 1, - object: { - top: 450, - left: 300, - scaleX: 0.5, - scaleY: 0.5, - opacity: 1, - angle: 0, - flipX: false, - flipY: false, - blendMode: "multiply", - gapX: 0, - gapY: 0, - }, - }, - ]); + const list = ref([]); // 深拷贝 const deepCopy = (obj) => JSON.parse(JSON.stringify(obj)); const oldList = ref(deepCopy(list.value)); diff --git a/src/component/Canvas/OverallCanvas/index.vue b/src/component/Canvas/OverallCanvas/index.vue index b6461491..0a6fad00 100644 --- a/src/component/Canvas/OverallCanvas/index.vue +++ b/src/component/Canvas/OverallCanvas/index.vue @@ -3,8 +3,11 @@ @@ -408,13 +411,13 @@ :clothingMinIOPath="clothingMinIOPath" :clothingImageUrl="clothingImageUrl" :clothingImageUrl2="clothingImageUrlInit" - :otherData="otherData" :config="editorConfig" :clothing-image-opts="{ imageMode: 'contains', // 设置底图包含在画布内 }" @change-canvas="changeCanvas" @canvas-init="canvasInit" + @canvas-load-json-success="canvasLoadJsonSuccess" isFixedErasable showFixedLayer > diff --git a/src/component/Canvas/utils/TaskQueue.js b/src/component/Canvas/utils/TaskQueue.js new file mode 100644 index 00000000..f7c83a5a --- /dev/null +++ b/src/component/Canvas/utils/TaskQueue.js @@ -0,0 +1,28 @@ +export default class TaskQueue { + constructor() { + this.tasks = []; + this.running = false; + } + // 添加任务 + addTask(task) { + this.tasks.push(task); + // 执行任务 + this.executeTasks(); + } + // 执行任务 + async executeTasks() { + if (this.running) { + return; + } + this.running = true; + for (const task of this.tasks) { + await task(); + } + this.running = false; + this.clearTasks(); + } + // 清空任务队列 + clearTasks() { + this.tasks = []; + } +} \ No newline at end of file diff --git a/src/component/Detail/DesignDetail.vue b/src/component/Detail/DesignDetail.vue index c2f32f13..e288167e 100644 --- a/src/component/Detail/DesignDetail.vue +++ b/src/component/Detail/DesignDetail.vue @@ -189,8 +189,10 @@ export default defineComponent({ } watch(()=>detailData.selectDetail,async (newValue,oldValue)=>{ detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id) - if(newValue)await getSketchSize() - detailData.canvasKey += 1 + if(newValue?.path)await getSketchSize() + if(newValue?.id && oldValue?.id && (newValue.id != oldValue.id)){ + detailData.canvasKey += 1 + } // privewDetail(oldValue) },{immediate: true}) provide('getCanvasIfEdit',detailData.getCanvasIfEdit) @@ -329,14 +331,15 @@ export default defineComponent({ } const setClothes = async (list:any,str:string)=>{ let clothesList:any = [] - await nextTick() + await uploadElement() if(detailData.isEditPattern.value == 'editSketch')await detailDom.canvasBox.submitBase64Data().then((rv)=>{ detailData.selectDetail.sketchString = rv }) + if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail() + await detailDom.canvasBox.privewDetail() for(let i = 0;i0?{prints:detailData.selectDetail.newDetail?.print}:detailData.selectDetail.printObject || null } if(detailData.currentDetailType == 'element'){ - otherData.trims = detailData.selectDetail.newDetail?.element + otherData.trims = detailData.selectDetail.newDetail?.element?.length>0?{prints:detailData.selectDetail.newDetail?.element}:detailData.selectDetail.trims || null } } console.log(JSON.parse(JSON.stringify(otherData)),'=======',JSON.parse(JSON.stringify(detailData.selectDetail))) @@ -632,7 +635,6 @@ export default defineComponent({ if(detailData.isEditPattern.value == 'canvasEditor'){ // await detailDom.canvasBox.saveCanvas() const allInfo = await (detailDom.canvasBox as any).getCanvasElement() - console.log(allInfo,'allInfo') if(allInfo.trims?.length > 0){ // detailData.selectDetail.trims.prints = allInfo.trims let value = { @@ -650,7 +652,7 @@ export default defineComponent({ store.commit('DesignDetail/setNewDetail',value) } if(allInfo.color?.color?.rgba){ - let canvasColor = allInfo.color.color + let canvasColor = allInfo.color.color; let colorData:any = await getColorName(allInfo.color.color?.rgba) let value:any = { data:{ @@ -669,6 +671,7 @@ export default defineComponent({ if(canvasColor.gradient){ value.data.gradient = canvasColor.gradient } + console.log(value,'=======') store.commit('DesignDetail/setNewDetail',value) if(allInfo.color.color.gradient)detailData.selectDetail.color.gradient = allInfo.color.color.gradient if(detailData.currentDetailType == 'color'){ diff --git a/src/component/Detail/canvas/index.vue b/src/component/Detail/canvas/index.vue index abcbcaef..7f05281f 100644 --- a/src/component/Detail/canvas/index.vue +++ b/src/component/Detail/canvas/index.vue @@ -6,10 +6,10 @@
+ store.state.Workspace.projectPath !== route.fullPath), + hideCanvas: computed(()=>(store.state.Workspace.projectPath !== route.fullPath && props.isEditPattern)), otherData:computed(()=>({ canvasId: store.state.DesignDetail.selectDetail.canvasId, color: store.state.DesignDetail.selectDetail.color, @@ -182,6 +182,7 @@ export default defineComponent({ width:props.sketchSize.width, height:props.sketchSize.height, }).then((rv)=>{ + console.log(rv,'================') if(oldSelectDetail?.partialDesign)oldSelectDetail.partialDesign.partialDesignBase64 = rv }) //包含平铺图层 single+overall模式的图 @@ -213,7 +214,6 @@ export default defineComponent({ wH = [1,domHeight/imgHeight] // detailData.canvasConfig.width = img.width * wH[1] // detailData.canvasConfig.height = domHeight - console.log(detailData.canvasConfig,'===============') detailData.canvasConfig.width = img.width detailData.canvasConfig.height = img.height @@ -286,7 +286,7 @@ export default defineComponent({ }) } - const editSketchCanvasInit = (value:any)=>{ + const editSketchCanvasInit = async (value:any)=>{ detailData.canvasInstance = value detailData.getCanvasIfEdit.fun = getCanvasLength detailData.isShowMark = false @@ -343,9 +343,8 @@ export default defineComponent({ // } const canvasLoadJsonSuccess = async ()=>{ let otherData = await props.updateOtherLayers() - await updateOtherLayers(otherData) - await setUndivideLayer() + setUndivideLayer() } const setUndivideLayer = async ()=>{ await new Promise(async (resolve, reject) => { @@ -369,7 +368,6 @@ export default defineComponent({ width:props.sketchSize.width, height:props.sketchSize.height, }).then((rv)=>{ - console.log(rv,'======') detailData.selectDetail.undividedLayer = rv }) // } @@ -402,26 +400,28 @@ export default defineComponent({ const sessionCanvasList = sessionStorage.getItem('canvasList'); const canvasList = sessionCanvasList ? JSON.parse(sessionCanvasList) : [] let canvasIndex = canvasList.findIndex(item => item.id === detailData.selectDetail.id); - if(canvasIndex>1){ + if(canvasIndex>-1){ detailData.canvasJSON = canvasList[canvasIndex].canvasJSON - } - if(detailData.selectDetail.canvasId){ - detailData.isShowMark = true - await new Promise((resolve, reject) => { - let value = { - module:'designItemDetail', - id:detailData.selectDetail.canvasId, - } - Https.axiosPost(Https.httpUrls.exportSearch, value) - .then((rv) => { - detailData.canvasJSON = rv - resolve('') + }else{ + if(detailData.selectDetail.canvasId){ + detailData.isShowMark = true + await new Promise((resolve, reject) => { + let value = { + module:'designItemDetail', + id:detailData.selectDetail.canvasId, + } + Https.axiosPost(Https.httpUrls.exportSearch, value) + .then((rv) => { + detailData.canvasJSON = rv + resolve('') + }) + .catch((rv) => { + resolve(null) + }); }) - .catch((rv) => { - resolve(null) - }); - }) + } } + setCanvas(detailData.selectDetail.path).then(()=>{ detailData.canvasLoad = true }) diff --git a/src/component/Detail/detailLeft/colorBox/index.vue b/src/component/Detail/detailLeft/colorBox/index.vue index 667d4b1c..d278d1ce 100644 --- a/src/component/Detail/detailLeft/colorBox/index.vue +++ b/src/component/Detail/detailLeft/colorBox/index.vue @@ -124,11 +124,13 @@ export default defineComponent({ }) watch(()=>colorData.selectDetail.id,(newVal,oldVal)=>{ if(!newVal)return + console.log(12312) if(!colorData.colorList?.list?.[newVal]){ colorData.colorList.list[newVal] = [] }else{ return } + console.log(12312) let isNoSelect = false let pushIndex = 0 for (let index = 0; index < 9; index++) { @@ -142,9 +144,10 @@ export default defineComponent({ colorData.selectDetail.color.rgba?.r == color?.rgba?.r && colorData.selectDetail.color.rgba?.g == color?.rgba?.g && colorData.selectDetail.color.rgba?.b == color?.rgba?.b || - (JSON.stringify(colorData.selectDetail.color.gradient) == JSON.stringify(color?.gradient) && JSON.stringify(colorData.selectDetail.color.gradient)) + (JSON.stringify(colorData.selectDetail.color.gradient) == JSON.stringify(color?.gradient) && colorData.selectDetail.color.gradient) && colorData.selectDetail.color.rgba?.r ){ + console.log(123) isNoSelect = true colorData.selectColor = item colorData.colorList.index = index @@ -170,20 +173,21 @@ export default defineComponent({ colorData.colorList.list[newVal].push(item) } if(!isNoSelect){ - if(!colorData.selectDetail.color?.rgba?.r)return + let color = colorData.selectDetail.newDetail?.color?.rgba?.r?colorData.selectDetail.newDetail?.color:colorData.selectDetail.color + if(!color?.rgba?.r)return let item = { - hex:rgbaToHex([colorData.selectDetail.color.rgba.r,colorData.selectDetail.color.rgba.g,colorData.selectDetail.color.rgba.b]), - id:colorData.selectDetail.color.id, + hex:rgbaToHex([color.rgba.r,color.rgba.g,color.rgba.b]), + id:color.id, rgba:{ - r:colorData.selectDetail.color.rgba.r, - g:colorData.selectDetail.color.rgba.g, - b:colorData.selectDetail.color.rgba.b, + r:color.rgba.r, + g:color.rgba.g, + b:color.rgba.b, }, - tcx:colorData.selectDetail.color.tcx, - name:colorData.selectDetail.color.name, + tcx:color.tcx, + name:color.name, } as any - if(colorData.selectDetail.color.gradient){ - item.gradient = colorData.selectDetail.color.gradient + if(color.gradient){ + item.gradient = color.gradient } colorData.selectColor = item let num = pushIndex diff --git a/src/component/Detail/detailRight/editPrintElement.vue b/src/component/Detail/detailRight/editPrintElement.vue index 4b926521..a7ad09fb 100644 --- a/src/component/Detail/detailRight/editPrintElement.vue +++ b/src/component/Detail/detailRight/editPrintElement.vue @@ -110,7 +110,7 @@ -->
- +
@@ -207,10 +207,10 @@ export default defineComponent({ elList:[] as any, selectIndex:0, }) - - const setOveralSingle = ()=>{ + watch + const setOveralSingle = async ()=>{ - setItemPosition() + await setItemPosition() } const formatter = (value:any)=>{ return `${value}%`; @@ -373,6 +373,9 @@ export default defineComponent({ gapX: 0, gapY: 0, } + if(props.type == 'element'){ + item.object.blendMode = 'source-over' + } } if(item.ifSingle){ editPrintElementData.printStyleList[props.type].single.push(item) @@ -416,6 +419,8 @@ export default defineComponent({ arr = editPrintElementData.selectDetail.newDetail[editPrintElementData.currentDetailType] } if(arr && arr.length > 0){ + editPrintElementData.printStyleList[props.type].single = [] + editPrintElementData.printStyleList[props.type].overall = [] arr.forEach((item:any)=>{ if(!item.ifSingle){ editPrintElementData.stateOverallSingle = 'overall', @@ -467,8 +472,10 @@ export default defineComponent({ if(arr.length > 0){ editPrintElementData.imgDomIndex = 0 if(newVal == 'overall'){ + editPrintElementData.printStyleList[props.type].single = [] + editPrintElementData.printStyleList[props.type].overall = [] arr.forEach((item:any,index:number) => { - item.id_ = index + getItemPosition(item) }); } }else{ @@ -872,6 +879,8 @@ export default defineComponent({ } } else if (item.action === ACTIONS.SELECT) { overallSetIndex(obj) + } else if(item.action === ACTIONS.DELETE){ + navDelete(obj) } }) } @@ -1152,7 +1161,7 @@ export default defineComponent({ border-radius: 1rem; overflow: hidden; &.active{ - border: 2px solid #B4B4B4; + border: 2.5px solid #B4B4B4; } > img{ width: 100%; @@ -1222,7 +1231,7 @@ export default defineComponent({ top: 0; left: 0; pointer-events: none; - height: 100%; + width: 100%; } } .designOpenrtion_sketch_mask{ diff --git a/src/component/Detail/model/modelNav.vue b/src/component/Detail/model/modelNav.vue index f3112a41..4e9cd8cc 100644 --- a/src/component/Detail/model/modelNav.vue +++ b/src/component/Detail/model/modelNav.vue @@ -79,7 +79,7 @@ export default defineComponent({ detailData.selectDetail?.id && detailData?.getCanvasIfEdit?.fun&&detailData?.getCanvasIfEdit?.fun() > 0 ){ - resolve() + resolve(true) // Modal.confirm({ // title: t('collectionModal.jsContent6'), // icon: createVNode(ExclamationCircleOutlined), diff --git a/src/component/mainPage/signUp/index.vue b/src/component/mainPage/signUp/index.vue index 2aa07809..92dfc3e8 100644 --- a/src/component/mainPage/signUp/index.vue +++ b/src/component/mainPage/signUp/index.vue @@ -111,7 +111,7 @@ export default defineComponent({ type: 'personal', info: '您的AI时尚设计助手', price: 'HK$0', - detail: '自注册之日起 7 天内 · 50 个积分', + detail: '自注册之日起 5 天内 · 50 个积分', highlight: '', discounts: '9折优惠', detailList: [ @@ -190,7 +190,7 @@ export default defineComponent({ type: 'personal', info: '您的AI时尚设计助手', price: 'HK$0', - detail: '自注册之日起 7 天内 · 50 个积分', + detail: '自注册之日起 5 天内 · 50 个积分', highlight: '', discounts: '9折优惠', detailList: [ @@ -255,7 +255,7 @@ export default defineComponent({ type: 'personal', info: 'Your AI Fashion Design Assistant', price: 'HK$0', - detail: '7 days from sign-up · 50 credits', + detail: '5 days from sign-up · 50 credits', highlight: '', discounts: '10% off', detailList: [ @@ -334,7 +334,7 @@ export default defineComponent({ type: 'personal', info: 'Your AI Fashion Design Assistant', price: 'HK$0', - detail: '7 days from sign-up · 50 credits', + detail: '5 days from sign-up · 50 credits', highlight: '', discounts: '10% off', detailList: [