From 25ad9799f8e709fc5d7a1ee55c0ea15868844dec Mon Sep 17 00:00:00 2001 From: X1627315083 <1627315083@qq.com> Date: Tue, 20 Jan 2026 13:49:34 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9sketch=E6=88=96=E8=80=85?= =?UTF-8?q?=E5=88=87=E6=8D=A2sketch=20bug=E4=BF=AE=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/Detail/DesignDetail.vue | 136 +++++++++++------- src/component/Detail/canvas/index.vue | 19 ++- src/component/Detail/model/index.vue | 6 +- src/component/Detail/model/modelPosition.vue | 4 +- src/store/Detail/designDetail.ts | 140 ++++++------------- 5 files changed, 144 insertions(+), 161 deletions(-) diff --git a/src/component/Detail/DesignDetail.vue b/src/component/Detail/DesignDetail.vue index 21f3f9af..f7afaf1b 100644 --- a/src/component/Detail/DesignDetail.vue +++ b/src/component/Detail/DesignDetail.vue @@ -161,7 +161,7 @@ export default defineComponent({ isEditPattern:{ value:'' as any, },// 是否编辑图案 - canvasKey:0, + canvasKey:computed(()=>store.state.DesignDetail.canvasKey), singleOveral:{ value:'overall' }, @@ -191,7 +191,7 @@ export default defineComponent({ detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id) if(newValue?.path)await getSketchSize() if(newValue?.id && oldValue?.id && (newValue.id != oldValue.id)){ - detailData.canvasKey += 1 + store.commit('DesignDetail/changeCanvasKey') } // privewDetail(oldValue) },{immediate: true}) @@ -336,9 +336,11 @@ export default defineComponent({ detailData.selectDetail.sketchString = rv }) if(detailDom.detailRight?.privewDetail)await (detailDom.detailRight as any).privewDetail() - let otherData = await updateOtherLayers('single') - await detailDom.canvasBox.updateOtherLayers(otherData) - await detailDom.canvasBox.privewDetail() + if(detailDom.canvasBox && (detailData.currentDetailType != 'sketch' || detailData.isEditPattern.value == 'canvasEditor')){ + let otherData = await updateOtherLayers('single') + await detailDom.canvasBox.updateOtherLayers(otherData) + await detailDom.canvasBox.privewDetail() + } for(let i = 0;i{ // return - let workspace = store.state.Workspace.probjects - if(!detailData?.selectDetail?.path && !detailData?.selectDetail?.newDetail?.sketch?.minIOPath)return - let clothes:any - if(detailData.currentDetailType == 'models'){ - clothes = await setClothes(detailData.designDetail.clothes,str) - }else{ - clothes = await setClothes([detailData.selectDetail],str) - } - let data = { - designItemId:detailData.designDetail.designItemId, - designSingleItemDTOList:clothes, - isPreview:str == 'sub'?false:true, - // ifSubmit:designItemDetail.isPreview, - gender:workspace?.sex, - sketchString:'', - modelId:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.id:detailData.designDetail.oldModel?detailData.designDetail.oldModel.id:'', - modelType:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.type:detailData.designDetail.oldModel?detailData.designDetail.oldModel.type:'', - designType:detailData.selectDetail.id?'merge':'default', - timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone, - processId:userDetail.value.userId, - probjectId:store.state.Workspace.probjects.id, - } - detailData.loadingShow = true - Https.axiosPost(Https.httpUrls.designSingle, data).then((rv)=>{ - let value = { - currentType : JSON.parse(JSON.stringify(detailData.currentDetailType)), - rv:rv, - fun:setRevocation + await new Promise(async (resolve, reject) => { + let workspace = store.state.Workspace.probjects + if(!detailData?.selectDetail?.path && !detailData?.selectDetail?.newDetail?.sketch?.minIOPath)return + let clothes:any + if(detailData.currentDetailType == 'models'){ + clothes = await setClothes(detailData.designDetail.clothes,str) + }else{ + clothes = await setClothes([detailData.selectDetail],str) } - if(detailData?.designDetail?.newModel)detailData.designDetail.oldModel = JSON.parse(JSON.stringify(detailData.designDetail.newModel)) - // delete detailData.designDetail.newModel - detailData.selectDetail.sketchString = null - store.commit('DesignDetail/setPraeview',value) - detailData.loadingShow = false - canvasReload() - // setRevocation() - }).catch(res=>{ - detailData.loadingShow = false - }); + let isDefault = detailData.selectDetail.sketchString || (!detailData.selectDetail.id || (detailData.selectDetail?.newDetail?.sketch && detailData.currentDetailType == 'sketch')) + let data = { + designItemId:detailData.designDetail.designItemId, + designSingleItemDTOList:clothes, + isPreview:str == 'sub'?false:true, + // ifSubmit:designItemDetail.isPreview, + gender:workspace?.sex, + sketchString:'', + modelId:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.id:detailData.designDetail.oldModel?detailData.designDetail.oldModel.id:'', + modelType:(detailData.currentDetailType == 'models' && detailData.designDetail.newModel)?detailData.designDetail.newModel.type:detailData.designDetail.oldModel?detailData.designDetail.oldModel.type:'', + designType:isDefault?'default':'merge', + timeZone:Intl.DateTimeFormat().resolvedOptions().timeZone, + processId:userDetail.value.userId, + probjectId:store.state.Workspace.probjects.id, + } + await Https.axiosPost(Https.httpUrls.designSingle, data).then(async (rv)=>{ + let value = { + currentType : JSON.parse(JSON.stringify(detailData.currentDetailType)), + rv:rv, + fun:setRevocation + } + if(detailData?.designDetail?.newModel)detailData.designDetail.oldModel = JSON.parse(JSON.stringify(detailData.designDetail.newModel)) + + // delete detailData.designDetail.newModel + let el:any = document.querySelector('.molepositon .perview_img') + let scale = 0 + await new Promise(async (resolve, reject) => { + const img = new Image(); + img.src = detailData.frontBack.body.path; + img.onload = () => { + scale = el.parentNode.offsetWidth / img.width; + resolve(true) + }; + }) + value.scale = scale + store.commit('DesignDetail/setPraeview',value) + store.commit('DesignDetail/changeCanvasKey') + // console.log(detailData.selectDetail) + // if(detailData.selectDetail.sketchString || (detailData.selectDetail?.newDetail?.sketch && detailData.currentDetailType == 'sketch')){ + // detailData.canvasKey += 1 + // } + detailData.selectDetail.sketchString = null + resolve(true) + canvasReload() + // setRevocation() + }).catch(res=>{ + resolve(true) + }); + }) + } const submit = async ()=>{ let workspace = store.state.Workspace.probjects @@ -505,9 +526,16 @@ export default defineComponent({ }); } const previwe = async ()=>{ + detailData.loadingShow = true if((detailData.currentDetailType == 'sketch' && !detailData.isEditPattern.value) || detailData.isEditPattern.value == 'editSketch'){ - let data = getSubmitData('preview') - store.dispatch('DesignDetail/setSubmit',data) + await getSubmitData('preview') + await getSketchSize() + detailDom.canvasBox.changeSketchUpdateFrontBack = async ()=>{ + await detailDom.canvasBox.privewDetail() + detailDom?.model?.updateRect() + await upDateFrontBackSketch() + detailData.loadingShow = false + } }else{ //走画布合成图片并且直接分割 if(detailData.isEditPattern.value !== 'canvasEditor'){ @@ -516,6 +544,13 @@ export default defineComponent({ await detailDom.canvasBox.updateOtherLayers(otherData) } await detailDom.canvasBox.privewDetail() + await upDateFrontBackSketch() + saveCanvasJSONToSession() + detailData.loadingShow = false + } + } + const upDateFrontBackSketch = async ()=>{//更新模特身上的分割图 + await new Promise(async(resolve, reject) => { let img = new Image() img.onload = ()=>{ let partialDesign = detailData.selectDetail.partialDesign.partialDesignBase64 || detailData.selectDetail.partialDesign.partialDesignPath @@ -534,11 +569,11 @@ export default defineComponent({ front.imageUrl = rv.targetFrontUrl back.imageUrl = rv.targetBackUrl store.commit('DesignDetail/canvasPreviewUpdata',{type:detailData.isEditPattern.value?'all':detailData.currentDetailType,callBack:setRevocation}) + resolve() }) } img.src = detailData.selectDetail.path - saveCanvasJSONToSession() - } + }) } const saveCanvasJSONToSession = ()=>{ let canvasJSON = detailDom.canvasBox.getCanvasJSON() @@ -631,7 +666,6 @@ export default defineComponent({ 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))) return otherData } const uploadElement = async ()=>{//取出画布数据更新到detail @@ -674,7 +708,6 @@ 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'){ @@ -687,7 +720,6 @@ export default defineComponent({ if(detailData.isEditPattern.value){ await detailDom.canvasBox.saveCanvas() } - detailData.canvasKey += 1 } const sketchSysToLibrary = ()=>{//系统sketch添加到library更新library coverRevocation() @@ -711,7 +743,7 @@ export default defineComponent({ onBeforeUnmount(()=>{ sessionStorage.removeItem('oppositeRevocation') sessionStorage.removeItem('revocation') - store.commit('DesignDetail/clearDesignDetail') + store.commit('DesignDetail/clearDetailData') }) diff --git a/src/component/Detail/canvas/index.vue b/src/component/Detail/canvas/index.vue index 7f05281f..c12db8f2 100644 --- a/src/component/Detail/canvas/index.vue +++ b/src/component/Detail/canvas/index.vue @@ -123,6 +123,7 @@ export default defineComponent({ printObject: store.state.DesignDetail.selectDetail.printObject, trims: store.state.DesignDetail.selectDetail.trims, })), + changeSketchUpdateFrontBack:null as any,//切换sketch后是否需要合成图片进行风格 }) watch(()=>detailData.selectDetail,(newValue,oldValue)=>{ detailData.imgDomIndex = detailData.frontBack.front.findIndex((item:any)=>item.id == newValue.id) @@ -177,22 +178,16 @@ export default defineComponent({ const privewDetail = async (oldSelectDetail = detailData.selectDetail)=>{ // if(!detailDom.editCanvas)return return new Promise(async (res,reject)=>{ + console.log(detailDom.editCanvas) await detailDom.editCanvas.exportImage({ isContainFixed:true, width:props.sketchSize.width, height:props.sketchSize.height, }).then((rv)=>{ - console.log(rv,'================') + console.log(rv,'================',props.sketchSize) if(oldSelectDetail?.partialDesign)oldSelectDetail.partialDesign.partialDesignBase64 = rv }) - //包含平铺图层 single+overall模式的图 - // await detailDom.editCanvas.exportImage({isContainFixed:true,isPrintTrimsNoRepeat:true,isPrintTrimsRepeat:true,isContainNormalLayer:false}).then((rv)=>{ - // oldSelectDetail.undividedLayerWithSinglePrint = rv - // }) - //不包含平铺图层overall模式的图 - // await detailDom.editCanvas.exportImage({isContainFixed:true,isPrintTrimsNoRepeat:false,isPrintTrimsRepeat:true,isContainNormalLayer:false}).then((rv)=>{ - // oldSelectDetail.undividedLayer = rv - // }) + await setUndivideLayer() res('') }) @@ -344,6 +339,11 @@ export default defineComponent({ const canvasLoadJsonSuccess = async ()=>{ let otherData = await props.updateOtherLayers() await updateOtherLayers(otherData) + + if(detailData.changeSketchUpdateFrontBack){ + await detailData.changeSketchUpdateFrontBack() + detailData.changeSketchUpdateFrontBack = null + } setUndivideLayer() } const setUndivideLayer = async ()=>{ @@ -421,7 +421,6 @@ export default defineComponent({ }) } } - setCanvas(detailData.selectDetail.path).then(()=>{ detailData.canvasLoad = true }) diff --git a/src/component/Detail/model/index.vue b/src/component/Detail/model/index.vue index 363d91c6..70d7ef28 100644 --- a/src/component/Detail/model/index.vue +++ b/src/component/Detail/model/index.vue @@ -128,7 +128,10 @@ export default defineComponent({ getDetailListDom.position?.updataPosition?.() getDetailListDom.modelNav?.setItemPosition?.() getDetailListDom.position?.updateRect?.() - },500) + },200) + } + const updateRect = ()=>{ + getDetailListDom.position?.updateRect?.() } const setBack = ()=>{ showDesignImgDetail(getDetailListData.isEditPattern.value) @@ -156,6 +159,7 @@ export default defineComponent({ oppositeRevocation, mousedownDesignImg, setBack, + updateRect, } }, diff --git a/src/component/Detail/model/modelPosition.vue b/src/component/Detail/model/modelPosition.vue index 076e115c..c606f961 100644 --- a/src/component/Detail/model/modelPosition.vue +++ b/src/component/Detail/model/modelPosition.vue @@ -155,8 +155,8 @@ export default defineComponent({ }; const updateRect = ()=>{ setTimeout(() => { - moveableInstance.value.updateRect() - }, 500); + if(moveableInstance.value)moveableInstance.value.updateRect() + }, 200); } const initMoveableForSelected = () => { // 销毁旧的实例 diff --git a/src/store/Detail/designDetail.ts b/src/store/Detail/designDetail.ts index 4c92a6c7..90c1f70c 100644 --- a/src/store/Detail/designDetail.ts +++ b/src/store/Detail/designDetail.ts @@ -12,6 +12,7 @@ interface DesignDetail{ //值都有 sketch，color,print,element currentDetailType:any, currentPrintElement:any, + canvasKey:any, } const DesignDetail : Module = { @@ -28,6 +29,7 @@ const DesignDetail : Module = { printZIndex:-1, currentDetailType:'', currentPrintElement:null, + canvasKey:0, }, mutations:{ clearDetailData(state){ @@ -42,6 +44,7 @@ const DesignDetail : Module = { state.printZIndex = -1 state.currentDetailType = '' state.currentPrintElement = null + state.canvasKey = 0 }, setDesignDetail(state,data){ if(data.others.length > 0 && data.others[0].type == "Body"){ @@ -63,7 +66,6 @@ const DesignDetail : Module = { } } v?.printObject?.prints?.forEach((item:any) => { - console.log(item.object) if(isJSONString(item.object)){ item.object = JSON.parse(item.object) } @@ -115,18 +117,6 @@ const DesignDetail : Module = { } }); }, - clearDesignDetail(state){ - state.designDetail = null - state.designPreviewData = {} - state.frontBack = { - front:[], - back:[], - body:{}, - } - state.selectDetail = null - state.currentDetailType = '' - state.printZIndex = -1 - }, addDesign(state,data){ }, @@ -226,21 +216,22 @@ const DesignDetail : Module = { }); state.selectDetail = data }, + changeCanvasKey(state){ + state.canvasKey+=1 + }, canvasPreviewUpdata(state,{type,callBack}){ - console.log(state.selectDetail,type) // state.selectDetail.newDetail?.print?.forEach((item:any) => { // state.selectDetail.printObject.prints = [] // state.selectDetail.printObject.push({ // }) // }); - if(type == 'print' || type == 'all')state.selectDetail.printObject.prints = state.selectDetail.newDetail?.print - if(type == 'color' || type == 'all')state.selectDetail.color = { + if((type == 'print' || type == 'all') && state.selectDetail.newDetail?.print)state.selectDetail.printObject.prints = state.selectDetail.newDetail?.print + if((type == 'color' || type == 'all') && state.selectDetail.newDetail?.color?.rgba)state.selectDetail.color = { ...state.selectDetail.newDetail?.color, ...state.selectDetail.newDetail?.color?.rgba, ...state.selectDetail.newDetail?.color?.hsv, } - console.log(state.selectDetail,type,state.selectDetail.newDetail) - if(type == 'element' || type == 'all')state.selectDetail.trims.prints = state.selectDetail.newDetail?.element + if((type == 'element' || type == 'all') && state.selectDetail.newDetail?.element)state.selectDetail.trims.prints = state.selectDetail.newDetail?.element if(type == 'all'){ state.selectDetail.newDetail = {} }else{ @@ -248,7 +239,7 @@ const DesignDetail : Module = { } callBack() }, - async setPraeview(state,value){//preview + setPraeview(state,value){//preview let data = value?.rv || value let currentType = value?.currentType if(state.designDetail.oldModel?.url)state.frontBack.body.path = state.designDetail.oldModel.url @@ -267,50 +258,41 @@ const DesignDetail : Module = { }else{ id_ = item.id } - let el:any = document.querySelector('.molepositon .perview_img') - await new Promise((resolve, reject) => { - if(!state.frontBack?.body?.path){ - resolve('') + if(state.frontBack?.body?.path){ + let scale:any = value.scale + if(state.selectDetail?.newDetail?.sketch?.id && !state.selectDetail.id){ + state.frontBack.front.push({id:state.selectDetail.newDetail?.sketch?.id}) + state.frontBack.back.push({id:state.selectDetail.newDetail?.sketch?.id}) } - const img = new Image(); - img.src = state.frontBack.body.path; - img.onload = () => { - let scale:any = el.parentNode.offsetWidth / img.width; - if(state.selectDetail?.newDetail?.sketch?.id && !state.selectDetail.id){ - state.frontBack.front.push({id:state.selectDetail.newDetail?.sketch?.id}) - state.frontBack.back.push({id:state.selectDetail.newDetail?.sketch?.id}) - } - state.frontBack.front.forEach((v:any,index:any)=>{ - if(v.id == id_){ - for (let i = item.layersObject.length-1; i >= 0; i--) { - item.layersObject[i].style = { - top:item.layersObject[i].position?.[0] * scale + 'px', - left:item.layersObject[i].position?.[1] * scale + 'px', - width:item.layersObject[i].imageSize?.[0] * scale + 'px', - height:item.layersObject[i].imageSize?.[1] * scale + 'px', - zIndex:v?.style?.zIndex?v.style.zIndex:v.priority?v.priority:state.frontBack.front.length, - transform:`rotate(${item.layersObject?.[i]?.rotate || 0}deg) scaleX(${item.layersObject[i].transpose?.[0] || 1}) scaleY(${item.layersObject[i].transpose?.[1] || 1})`, - } - item.layersObject[i].centers={ - left:0, - top:0, - } - item.layersObject[i].designOpenrtionBtn = false - if(item.layersObject[i].imageCategory.indexOf("back") == -1){ - state.frontBack.front[index] = item.layersObject[i] - // state.frontBack.front[index].style.zIndex = v.priority - state.frontBack.front[index].id = item.id - }else{ - state.frontBack.back[index] = item.layersObject[i] - // state.frontBack.back[index].style.zIndex = v.priority - state.frontBack.back[index].id = item.id - } + state.frontBack.front.forEach((v:any,index:any)=>{ + if(v.id == id_){ + for (let i = item.layersObject.length-1; i >= 0; i--) { + item.layersObject[i].style = { + top:item.layersObject[i].position?.[0] * scale + 'px', + left:item.layersObject[i].position?.[1] * scale + 'px', + width:item.layersObject[i].imageSize?.[0] * scale + 'px', + height:item.layersObject[i].imageSize?.[1] * scale + 'px', + zIndex:v?.style?.zIndex?v.style.zIndex:v.priority?v.priority:state.frontBack.front.length, + transform:`rotate(${item.layersObject?.[i]?.rotate || 0}deg) scaleX(${item.layersObject[i].transpose?.[0] || 1}) scaleY(${item.layersObject[i].transpose?.[1] || 1})`, + } + item.layersObject[i].centers={ + left:0, + top:0, + } + item.layersObject[i].designOpenrtionBtn = false + if(item.layersObject[i].imageCategory.indexOf("back") == -1){ + state.frontBack.front[index] = item.layersObject[i] + // state.frontBack.front[index].style.zIndex = v.priority + state.frontBack.front[index].id = item.id + }else{ + state.frontBack.back[index] = item.layersObject[i] + // state.frontBack.back[index].style.zIndex = v.priority + state.frontBack.back[index].id = item.id } } - }) - resolve('') - }; - }) + } + }) + } let uploadDetail = (detailItem)=>{ detailItem.change = item.change if(detailItem?.newDetail?.color && currentType != 'color'){ @@ -321,6 +303,7 @@ const DesignDetail : Module = { detailItem.partialDesign = item.partialDesign } detailItem.designType = item.designType + detailItem.canvasId = item.canvasId detailItem.layersObject = item.layersObject detailItem.path = item.path detailItem.minIOPath = item.minIOPath @@ -357,44 +340,9 @@ const DesignDetail : Module = { }else{ uploadDetail(state.selectDetail) } - - if(state.currentDetailType != 'models'){ - // state.selectDetail.change = item.change - // if(state.selectDetail?.newDetail?.color && currentType != 'color'){ - // state.selectDetail.color = state.selectDetail?.newDetail?.color - // state.selectDetail.newDetail.color = null - // } - // if(item.partialDesign){ - // state.selectDetail.partialDesign = item.partialDesign - // } - // state.selectDetail.designType = item.designType - // state.selectDetail.layersObject = item.layersObject - // state.selectDetail.path = item.path - // state.selectDetail.minIOPath = item.minIOPath - // state.selectDetail.scale = [1,1] - // state.selectDetail.offset = [0,0] - // state.selectDetail.printObject = item.printObject - // state.selectDetail.trims = item.trims - // state.selectDetail.type = item.type - // state.selectDetail.maskMinioUrl = item.layersObject?.[0]?.maskMinioUrl - // state.selectDetail.maskUrl = item.layersObject?.[0]?.maskUrl - // state.selectDetail.color = { - // ...item.color, - // rgba:{ - // r:item.color?.r, - // g:item.color?.g, - // b:item.color?.b, - // }, - // gradient:item.gradient, - // } - // if(state.selectDetail.newDetail?.sketch?.id && !state.selectDetail.id){ - // state.designDetail.clothes.push(state.selectDetail) - // } - // state.selectDetail.id = item.id - // if(currentType)if(state.selectDetail.newDetail?.[currentType] && currentType != 'color')delete state.selectDetail.newDetail[currentType] - } } if(value.fun)value.fun() + }, // setDesignItemOthers(state,data){