From f6556ec9a9a762e095e673c350cb3af802834149 Mon Sep 17 00:00:00 2001 From: X1627315083 <1627315083@qq.com> Date: Wed, 28 Jan 2026 17:10:58 +0800 Subject: [PATCH 01/11] fix --- src/component/Detail/DesignDetail.vue | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/component/Detail/DesignDetail.vue b/src/component/Detail/DesignDetail.vue index acb7e80b..a4f36f18 100644 --- a/src/component/Detail/DesignDetail.vue +++ b/src/component/Detail/DesignDetail.vue @@ -372,8 +372,13 @@ export default defineComponent({ color = list[i].color?.rgba?.r != null?`${list[i].color.rgba.r} ${list[i].color.rgba.g} ${list[i].color.rgba.b}`:'' gradient = list[i].gradient if((detailData.currentDetailType == 'sketch' && newData?.sketch) || detailData.isEditPattern.value == 'editSketch'){ - color = detailData.designDetail.clothes?.[0]?.color?.rgba?.r?`${detailData.designDetail.clothes?.[0].color.rgba.r} ${detailData.designDetail.clothes[0].color.rgba.g} ${detailData.designDetail.clothes[0].color.rgba.b}`:'' - gradient = detailData.designDetail.clothes?.[0]?.gradient || null + if(detailData.isEditPattern.value == 'editSketch'){ + color = detailData.selectDetail?.color?.rgba?.r != null?`${detailData.selectDetail.color.rgba.r} ${detailData.selectDetail.color.rgba.g} ${detailData.selectDetail.color.rgba.b}`:'' + gradient = detailData.selectDetail?.gradient || null + }else{ + color = detailData.designDetail.clothes?.[0]?.color?.rgba?.r?`${detailData.designDetail.clothes?.[0].color.rgba.r} ${detailData.designDetail.clothes[0].color.rgba.g} ${detailData.designDetail.clothes[0].color.rgba.b}`:'' + gradient = detailData.designDetail.clothes?.[0]?.gradient || null + } detailData.selectDetail.maskUrl = '' detailData.selectDetail.maskMinioUrl = '' } @@ -680,7 +685,7 @@ export default defineComponent({ let color = detailData.selectDetail.newDetail?.color // let colorData:any = await getColorName(color?.rgba) if(detailData.selectDetail.newDetail?.color){ - if(color.r){ + if(color.r != null){ color.rgba = {r:color.r,g:color.g,b:color.b,a:color.a} }else{ color.rgba = {} From 2d5d1b7a5e1d75c8da0d67cacb1f4e8fb274b68e Mon Sep 17 00:00:00 2001 From: X1627315083 <1627315083@qq.com> Date: Thu, 29 Jan 2026 09:55:15 +0800 Subject: [PATCH 02/11] =?UTF-8?q?=E5=88=A0=E9=99=A4=E8=A1=A3=E6=9C=8D?= =?UTF-8?q?=E6=97=B6=E5=80=99imgDom=E8=A6=81=E9=9A=8F=E7=9D=80=E5=8F=98?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/Detail/model/modelPosition.vue | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/component/Detail/model/modelPosition.vue b/src/component/Detail/model/modelPosition.vue index 904bd8fc..400b47ce 100644 --- a/src/component/Detail/model/modelPosition.vue +++ b/src/component/Detail/model/modelPosition.vue @@ -406,7 +406,12 @@ export default defineComponent({ selectItem.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id) initMoveableForSelected() },{immediate: true,}) - + watch(()=>detailData.frontBack.front.length,(newValue,oldValue)=>{ + if(selectItem.selectDetail?.id)selectItem.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == selectItem.selectDetail?.id) + setTimeout(()=>{ + initMoveableForSelected() + },100) + }) const setRevocation = async ()=>{ let frontBack = JSON.parse(JSON.stringify(detailData.frontBack)) let revocation:any = JSON.parse((await KeyValueDB.get("revocation") as any) || '[]') From 012f0ef1b58b74238e7532e8d070a1fc6c8f828c Mon Sep 17 00:00:00 2001 From: X1627315083 <1627315083@qq.com> Date: Thu, 29 Jan 2026 16:55:38 +0800 Subject: [PATCH 03/11] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=94=BB=E5=B8=83?= =?UTF-8?q?=E6=89=93=E5=BC=80=E5=8F=91=E5=B8=83=E5=90=8E=E4=BB=8D=E7=84=B6?= =?UTF-8?q?=E5=8F=AF=E4=BB=A5=E5=AF=B9=E7=94=BB=E5=B8=83=E9=87=8C=E9=9D=A2?= =?UTF-8?q?=E5=A4=8D=E5=88=B6=E5=86=85=E5=AE=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/home/design/tools.vue | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/component/home/design/tools.vue b/src/component/home/design/tools.vue index 69722c19..d058a40f 100644 --- a/src/component/home/design/tools.vue +++ b/src/component/home/design/tools.vue @@ -56,7 +56,7 @@ @changeCanvas="changeCanvas" @trigger-library="triggerLibrary" :canvasJSON="canvasJSON" - :hideCanvas="hideCanvas" + :hideCanvas="hideCanvas || !key" ref="editCanvas"> From 13024cdd9992e6c64b58f18f0829c811a15181ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E5=BF=97=E9=B9=8F?= <2916022834@qq.com> Date: Fri, 6 Feb 2026 13:07:06 +0800 Subject: [PATCH 10/11] =?UTF-8?q?=E7=94=BB=E5=B8=83loading?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/Canvas/CanvasEditor/index.vue | 3330 ++++++++--------- .../CanvasEditor/managers/CanvasManager.js | 6 +- .../CanvasEditor/managers/LayerManager.js | 8 +- .../CanvasEditor/managers/PartManager.js | 24 +- .../Canvas/CanvasEditor/utils/LayerSort.js | 41 +- .../Canvas/CanvasEditor/utils/objectHelper.js | 21 +- src/component/Canvas/canvasExample.vue | 1 + src/component/Detail/canvas/index.vue | 4 +- 8 files changed, 1709 insertions(+), 1726 deletions(-) diff --git a/src/component/Canvas/CanvasEditor/index.vue b/src/component/Canvas/CanvasEditor/index.vue index 53f4455b..882c556f 100644 --- a/src/component/Canvas/CanvasEditor/index.vue +++ b/src/component/Canvas/CanvasEditor/index.vue @@ -1,1739 +1,1717 @@ diff --git a/src/component/Canvas/CanvasEditor/managers/CanvasManager.js b/src/component/Canvas/CanvasEditor/managers/CanvasManager.js index b7583264..84fc497b 100644 --- a/src/component/Canvas/CanvasEditor/managers/CanvasManager.js +++ b/src/component/Canvas/CanvasEditor/managers/CanvasManager.js @@ -9,7 +9,6 @@ import { isGroupLayer, OperationType, OperationTypes, - findLayer, createLayer, LayerType, SpecialLayerId, @@ -20,7 +19,6 @@ import { AnimationManager } from "./animation/AnimationManager"; import { createCanvas } from "../utils/canvasFactory"; import { CanvasEventManager } from "./events/CanvasEventManager"; import CanvasConfig from "../config/canvasConfig"; -import { RedGreenModeManager } from "./RedGreenModeManager"; import { EraserStateManager } from "./EraserStateManager"; import { deepClone, @@ -1337,7 +1335,7 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer') } } loadJSON(json, calllBack) { - + this.canvas.loading.value = true; // 确保传入的json是字符串格式 if (typeof json === "object") { json = JSON.stringify(json); @@ -1509,7 +1507,6 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer') */ async createOtherLayers(otherData) { if (!otherData) return console.warn("otherData 为空不需要添加"); - this.canvas.loading.value = true; let resolve = ()=>{}; this.awaitCanvasRun = ()=>(new Promise((v) => resolve = v)) const otherData_ = JSON.parse(JSON.stringify(otherData)); @@ -1557,7 +1554,6 @@ backgroundObject.scaleY,'CanvasManager resetCanvasSizeByFixedLayer') console.log("==========创建其他图层成功"); resolve(); this.awaitCanvasRun = null; - this.canvas.loading.value = false; } // 设置画布对象的裁剪信息 diff --git a/src/component/Canvas/CanvasEditor/managers/LayerManager.js b/src/component/Canvas/CanvasEditor/managers/LayerManager.js index b0935346..ab64fa9f 100644 --- a/src/component/Canvas/CanvasEditor/managers/LayerManager.js +++ b/src/component/Canvas/CanvasEditor/managers/LayerManager.js @@ -1580,7 +1580,7 @@ export class LayerManager { /** * 排序图层，确保图层顺序: 普通图层 > 固定图层 > 背景图层 */ - sortLayers() { + async sortLayers() { // 对图层进行排序：背景图层在最底层（数组最后），固定图层在中间 this.layers.value.sort((a, b) => { // 如果a是背景图层，它应该排在后面（最底层） @@ -1604,17 +1604,17 @@ export class LayerManager { }); // 更新画布对象顺序 - this._rearrangeObjects(); + await this._rearrangeObjects(); } /** * 重新排列画布上的对象以匹配图层顺序 * @private */ - _rearrangeObjects() { + async _rearrangeObjects() { if (this.layerSort) { // 使用LayerSort的高级排序 - this.layerSort.rearrangeObjects(); + await this.layerSort.rearrangeObjects(); return; } diff --git a/src/component/Canvas/CanvasEditor/managers/PartManager.js b/src/component/Canvas/CanvasEditor/managers/PartManager.js index 8e4208b7..2cf19608 100644 --- a/src/component/Canvas/CanvasEditor/managers/PartManager.js +++ b/src/component/Canvas/CanvasEditor/managers/PartManager.js @@ -90,16 +90,17 @@ export class PartManager { if (toolId === OperationType.PART_ERASER) { this.setEraserTool(); - } else if (toolId === OperationType.PART || toolId === OperationType.PART_RECTANGLE) { - this.clearPointData(); - this.resetPartObject(); - } - if (toolId === OperationType.PART_ERASER || toolId === OperationType.PART_BRUSH) { - if (this.pointList.length > 0) { - this.clearPointData(); - this.resetPartObject(); - } - } + } + // else if (toolId === OperationType.PART || toolId === OperationType.PART_RECTANGLE) { + // this.clearPointData(); + // this.resetPartObject(); + // } + // if (toolId === OperationType.PART_ERASER || toolId === OperationType.PART_BRUSH) { + // if (this.pointList.length > 0) { + // this.clearPointData(); + // this.resetPartObject(); + // } + // } // 如果从非选区工具切换到选区工具，初始化事件 if (!wasActive && this.isActive) { @@ -380,7 +381,8 @@ export class PartManager { box: [...this.pointList], }); const image = await this.loadImageToObject(url); - const canvas = getObjectAlphaToCanvas(image, null, 0, this.rgba); + const data = this.partCanvas?.getContext("2d")?.getImageData(0, 0, this.partCanvas.width, this.partCanvas.height); + const canvas = getObjectAlphaToCanvas(image, data, 0, this.rgba, !!data); this.partDrawCommand(canvas); } /** 获取分隔后图片 */ diff --git a/src/component/Canvas/CanvasEditor/utils/LayerSort.js b/src/component/Canvas/CanvasEditor/utils/LayerSort.js index d7c16369..ad12bafe 100644 --- a/src/component/Canvas/CanvasEditor/utils/LayerSort.js +++ b/src/component/Canvas/CanvasEditor/utils/LayerSort.js @@ -30,27 +30,30 @@ export class LayerSort { if (canvasObjects.length === 0) return; // 使用画布渲染优化 - await optimizeCanvasRendering(this.canvas, () => { - // 计算每个对象应该在的 z-index 位置 - const objectZIndexMap = this.calculateObjectZIndexes(); + await new Promise((resolve) => { + optimizeCanvasRendering(this.canvas, () => { + // 计算每个对象应该在的 z-index 位置 + const objectZIndexMap = this.calculateObjectZIndexes(); - // 按照新的 z-index 排序对象 - const sortedObjects = canvasObjects - .map((obj) => ({ - object: obj, - targetZIndex: objectZIndexMap.get(obj.id) ?? -1, - })) - .filter((item) => item.targetZIndex >= 0) // 过滤掉无效对象 - .sort((a, b) => a.targetZIndex - b.targetZIndex); + // 按照新的 z-index 排序对象 + const sortedObjects = canvasObjects + .map((obj) => ({ + object: obj, + targetZIndex: objectZIndexMap.get(obj.id) ?? -1, + })) + .filter((item) => item.targetZIndex >= 0) // 过滤掉无效对象 + .sort((a, b) => a.targetZIndex - b.targetZIndex); - // 使用 fabric.js 的 moveTo 方法重新排序 - sortedObjects.forEach((item, index) => { - const currentIndex = this.canvas.getObjects().indexOf(item.object); - if (currentIndex !== index && currentIndex !== -1) { - // 将对象移动到正确的位置 - this.canvas.moveTo(item.object, index); - } - }); + // 使用 fabric.js 的 moveTo 方法重新排序 + sortedObjects.forEach((item, index) => { + const currentIndex = this.canvas.getObjects().indexOf(item.object); + if (currentIndex !== index && currentIndex !== -1) { + // 将对象移动到正确的位置 + this.canvas.moveTo(item.object, index); + } + }); + resolve(); + }); }); } diff --git a/src/component/Canvas/CanvasEditor/utils/objectHelper.js b/src/component/Canvas/CanvasEditor/utils/objectHelper.js index d52d02fc..7caa973d 100644 --- a/src/component/Canvas/CanvasEditor/utils/objectHelper.js +++ b/src/component/Canvas/CanvasEditor/utils/objectHelper.js @@ -65,9 +65,10 @@ export async function restoreFabricObject(serializedObject, canvas) { * @param {ImageData} revData - 相反的ImageData，白通道的相同位置是否为透明，revData为白色为透明，黑色为不透明 * @param {number} diff - 差值，默认 25 * @param {Object} rgba - 自定义 rgba 值，默认 { r: 255, g: 255, b: 255, a: 255 } + * @param {boolean} isMerge - 是否合并，true=合并revData，false=反转revData * @returns {HTMLCanvasElement|null} 包含黑白通道的画布，或 null 如果失败 */ -export function getObjectAlphaToCanvas(object, revData, diff = 30, rgba = { r: 255, g: 255, b: 255, a: 255 }) { +export function getObjectAlphaToCanvas(object, revData, diff = 30, rgba = { r: 255, g: 255, b: 255, a: 255 }, isMerge = false) { const image = object.getElement(); if (image.nodeName !== "IMG" && image.nodeName !== "CANVAS") { console.warn("对象不是图片"); @@ -93,18 +94,20 @@ export function getObjectAlphaToCanvas(object, revData, diff = 30, rgba = { r: 2 const revG = revData?.data[i + 1] || 0; const revB = revData?.data[i + 2] || 0; const revA = revData?.data[i + 3] || 0; + let isHave = false; if (r || g || b || a) { if (revR > diff || revG > diff || revB > diff || revA > diff) { - data.data[i + 0] = 0; - data.data[i + 1] = 0; - data.data[i + 2] = 0; - data.data[i + 3] = 0; + isHave = false; } else { - data.data[i + 0] = rgba.r; - data.data[i + 1] = rgba.g; - data.data[i + 2] = rgba.b; - data.data[i + 3] = rgba.a; + isHave = true; } + } + if (isMerge && (revR || revG || revB || revA)) isHave = true; + if (isHave) { + data.data[i + 0] = rgba.r; + data.data[i + 1] = rgba.g; + data.data[i + 2] = rgba.b; + data.data[i + 3] = rgba.a; } else { data.data[i + 0] = 0; data.data[i + 1] = 0; diff --git a/src/component/Canvas/canvasExample.vue b/src/component/Canvas/canvasExample.vue index 7a961666..513e2778 100644 --- a/src/component/Canvas/canvasExample.vue +++ b/src/component/Canvas/canvasExample.vue @@ -333,6 +333,7 @@ ]); const canvasLoadJsonSuccess = () => { console.log("画布加载JSON成功"); + return; canvasEditor.value?.updateOtherLayers({ color: { rgba: { r: 255, g: 0, b: 0, a: 1 } }, printObject: { diff --git a/src/component/Detail/canvas/index.vue b/src/component/Detail/canvas/index.vue index dde6d912..6023a4e6 100644 --- a/src/component/Detail/canvas/index.vue +++ b/src/component/Detail/canvas/index.vue @@ -51,9 +51,9 @@ -
+
From 1428f191dda118ce529404b0592281e27be0847b Mon Sep 17 00:00:00 2001 From: "X1627315083@163.com" <1627315083@qq.com> Date: Fri, 6 Feb 2026 14:17:46 +0800 Subject: [PATCH 11/11] fix --- .../Detail/detailRight/overallSetting/RepeatSetting.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/component/Detail/detailRight/overallSetting/RepeatSetting.vue b/src/component/Detail/detailRight/overallSetting/RepeatSetting.vue index 05a30feb..b7c6d5ab 100644 --- a/src/component/Detail/detailRight/overallSetting/RepeatSetting.vue +++ b/src/component/Detail/detailRight/overallSetting/RepeatSetting.vue @@ -25,7 +25,7 @@
Gap X Gap Y { // let scaleValue = props.object?.scale/10; // return props.object?.scale/10; - return props.object?.scale[0] * 100; + return (props.object?.scale[0] * 100).toFixed(0); }); const scalePrint = computed(() => { let index = sketchWH.value[0] > sketchWH.value[1]?0:1;