diff --git a/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/RepeatSetting.vue b/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/RepeatSetting.vue index e8ad87ca..fd59a643 100644 --- a/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/RepeatSetting.vue +++ b/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/RepeatSetting.vue @@ -32,8 +32,8 @@ is-input :tipFormatter="(v) => `${v}px`" :value="gapX" - @input="(e) => emit('inputFill_Gap', e, gapY)" - @change="(e) => emit('changeFill_Gap', e, gapY)" + @input="(e) => emit('inputFillGap', e, gapY)" + @change="(e) => emit('changeFillGap', e, gapY)" />
@@ -45,8 +45,8 @@ is-input :tipFormatter="(v) => `${v}px`" :value="gapY" - @input="(e) => emit('inputFill_Gap', gapX, e)" - @change="(e) => emit('changeFill_Gap', gapX, e)" + @input="(e) => emit('inputFillGap', gapX, e)" + @change="(e) => emit('changeFillGap', gapX, e)" />
@@ -109,8 +109,8 @@ "changeFillOffset", "inputFillScale", "changeFillScale", - "inputFill_Gap", - "changeFill_Gap", + "inputFillGap", + "changeFillGap", ]); const inputFillScale = (e) => { const scale = e / 100; diff --git a/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/index.vue b/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/index.vue index 2ac1bfc6..fea8cf41 100644 --- a/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/index.vue +++ b/src/component/Canvas/CanvasEditor/components/SelectMenuPanel/index.vue @@ -155,11 +155,11 @@ @changeFillScale=" (e) => changeFillScale(e, v) " - @inputFill_Gap=" - (x, y) => inputFill_Gap(x, y, v) + @inputFillGap=" + (x, y) => inputFillGap(x, y, v) " - @changeFill_Gap=" - (x, y) => changeFill_Gap(x, y, v) + @changeFillGap=" + (x, y) => changeFillGap(x, y, v) " /> @@ -484,7 +484,7 @@ props.commandManager.execute(cmd); }; // 改变填充间隙 - const inputFill_Gap = (gapX, gapY, obj) => { + const inputFillGap = (gapX, gapY, obj) => { const cmd = new FillRepeatGapChangeCommand({ canvas: props.canvas, layers: layers, @@ -497,7 +497,7 @@ }); cmd.execute(); }; - const changeFill_Gap = (gapX, gapY, obj) => { + const changeFillGap = (gapX, gapY, obj) => { if (obj.oldFill_) { obj.fill_ = { ...obj.oldFill_ }; delete obj.oldFill_; diff --git a/src/component/Canvas/CanvasEditor/index.vue b/src/component/Canvas/CanvasEditor/index.vue index 021dfbe1..7c6efd7c 100644 --- a/src/component/Canvas/CanvasEditor/index.vue +++ b/src/component/Canvas/CanvasEditor/index.vue @@ -139,7 +139,7 @@ const props = defineProps({ default: false, // 是否隐藏画布-隐藏关闭部分功能 }, }); - +console.log("config",props.config) const loading = ref(false); // 引用和状态 const canvasRef = ref(null); diff --git a/src/component/Canvas/CanvasEditor/managers/CanvasManager.js b/src/component/Canvas/CanvasEditor/managers/CanvasManager.js index 426188ee..bf7ea1a6 100644 --- a/src/component/Canvas/CanvasEditor/managers/CanvasManager.js +++ b/src/component/Canvas/CanvasEditor/managers/CanvasManager.js @@ -449,7 +449,28 @@ export class CanvasManager { // // 重新渲染画布使变更生效 // this.canvas.renderAll(); } - + // 重置画布大小参照固定图层 + async resetCanvasSizeByFixedLayer(){ + // 重置画布大小为固定图层的大小 + const fixedLayerObj = this.getFixedLayerObject(); + const backgroundObject = this.getBackgroundLayerObject(); + if (!fixedLayerObj || !backgroundObject) return + const fwidth = fixedLayerObj.width * fixedLayerObj.scaleX + const fheight = fixedLayerObj.height * fixedLayerObj.scaleY + const bwidth = backgroundObject.width * backgroundObject.scaleX + const bheight = backgroundObject.height * backgroundObject.scaleY + if(Math.abs(fwidth/bwidth - fheight/bheight) < 0.1) return; + this.canvasWidth.value = fwidth + this.canvasHeight.value = fheight + backgroundObject.set({ + width: this.canvasWidth.value, + height: this.canvasHeight.value, + }) + this.canvas?.clipPath?.set?.({ + width: this.canvasWidth.value, + height: this.canvasHeight.value, + }) +} /** * 重置视图变换，使元素回到原始位置 * @private @@ -1369,6 +1390,7 @@ export class CanvasManager { // 重置画布数据 await this.setCanvasSize(this.canvas.width, this.canvas.height); await this.centerBackgroundLayer(this.canvas.width, this.canvas.height); + await this.resetCanvasSizeByFixedLayer(); // 重新构建对象关系 // restoreObjectLayerAssociations(this.layers.value, this.canvas.getObjects()); // 验证图层关联关系 - 稳定后可以注释 diff --git a/src/component/Detail/DesignDetail.vue b/src/component/Detail/DesignDetail.vue index 21f3f9af..c240ac61 100644 --- a/src/component/Detail/DesignDetail.vue +++ b/src/component/Detail/DesignDetail.vue @@ -101,7 +101,7 @@
- +
@@ -63,8 +64,8 @@ @inputFillOffset="inputFillOffset" @inputFillScale="inputFillScale" :sketchPath="selectDetail.path" - @inputFill_Gap=" - (x, y) => inputFill_Gap(x, y)" + @inputFillGap=" + (x, y) => inputFillGap(x, y)" />
@@ -110,7 +111,7 @@ -->
- +
@@ -207,7 +208,6 @@ export default defineComponent({ elList:[] as any, selectIndex:0, }) - watch const setOveralSingle = async ()=>{ await setItemPosition() @@ -263,7 +263,7 @@ export default defineComponent({ setItemPosition() store.commit('DesignDetail/setCurrentPrintElement',null) } - const previewDetailPrintData = ()=>{ + const previewDetailPrintData = (id:any = editPrintElementData.selectDetail?.id)=>{ let data:any = [] let index = 1 let setData = (item:any,index:number)=>{ @@ -310,7 +310,8 @@ export default defineComponent({ }) let value = { data, - str:props.type + str:props.type, + id:id, } store.commit('DesignDetail/setNewDetail',value) } @@ -453,9 +454,10 @@ export default defineComponent({ addPrintELement(newVal) } }) - watch(()=>((editPrintElementData.selectDetail?.id)),(newVal)=>{ + watch(()=>((editPrintElementData.selectDetail?.id)),(newVal,oldVal)=>{ if(!newVal)return - editPrintElementData.isSketchLoad = false, + if(oldVal)previewDetailPrintData(oldVal) + editPrintElementData.isSketchLoad = false editPrintElementData.printStyleList[props.type] = { single:[], overall:[], @@ -920,7 +922,6 @@ export default defineComponent({ } const inputFillScale = (scale:any)=>{ let arr = editPrintElementData.printStyleList[props.type].overall - console.log(arr,scale,editPrintElementData.imgDomIndex) arr[editPrintElementData.imgDomIndex].scale = [scale,scale] editPrintElementDom.pingpuRef.updataList([ { @@ -931,7 +932,7 @@ export default defineComponent({ }, ]); } - const inputFill_Gap = (x:any,y:any)=>{ + const inputFillGap = (x:any,y:any)=>{ let arr = editPrintElementData.printStyleList[props.type].overall arr[editPrintElementData.imgDomIndex].object.gapX = x arr[editPrintElementData.imgDomIndex].object.gapY = y @@ -991,7 +992,7 @@ export default defineComponent({ inputFillAngle, inputFillOffset, inputFillScale, - inputFill_Gap, + inputFillGap, overallSetIndex, } }, diff --git a/src/component/Detail/detailRight/overallSetting/RepeatSetting.vue b/src/component/Detail/detailRight/overallSetting/RepeatSetting.vue index 02434fab..a16ce2ae 100644 --- a/src/component/Detail/detailRight/overallSetting/RepeatSetting.vue +++ b/src/component/Detail/detailRight/overallSetting/RepeatSetting.vue @@ -32,8 +32,8 @@ is-input :tipFormatter="(v) => `${v}px`" :value="gapX" - @input="(e) => emit('inputFill_Gap', e, gapY)" - @change="(e) => emit('changeFill_Gap', e, gapY)" + @input="(e) => emit('inputFillGap', e, gapY)" + @change="(e) => emit('changeFillGap', e, gapY)" />

@@ -46,8 +46,8 @@ is-input :tipFormatter="(v) => `${v}px`" :value="gapY" - @input="(e) => emit('inputFill_Gap', gapX, e)" - @change="(e) => emit('changeFill_Gap', gapX, e)" + @input="(e) => emit('inputFillGap', gapX, e)" + @change="(e) => emit('changeFillGap', gapX, e)" />

@@ -115,8 +115,8 @@ "changeFillOffset", "inputFillScale", "changeFillScale", - "inputFill_Gap", - "changeFill_Gap", + "inputFillGap", + "changeFillGap", ]); const inputFillScale = (e) => { const scale = e / 100; 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..f667dc7e 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){ }, @@ -135,28 +125,32 @@ const DesignDetail : Module = { // if(item.id == state.selectDetail.id){ // } // }); + let select = state.selectDetail + if(value.id){ + select = state.designDetail.clothes.find((item:any) => item.id == value.id) + } let {data} = value let str = value.str || state.currentDetailType - if(!state.selectDetail)return - if(!state.selectDetail.newDetail){ - state.selectDetail.newDetail = {} + if(!select)return + if(!select.newDetail){ + select.newDetail = {} } if(str == 'sketch'){ - state.selectDetail.newDetail[str] = data + select.newDetail[str] = data }else if(str == 'color'){ - state.selectDetail.newDetail[str] = data + select.newDetail[str] = data }else if(str == 'print'){ - state.selectDetail.newDetail[str] = data + select.newDetail[str] = data }else if(str == 'element'){ - state.selectDetail.newDetail[str] = data + select.newDetail[str] = data }else if(str == 'models'){ // if(!state.designDetail.newModel)state.designDetail.newModel={} state.designDetail.newModel = JSON.parse(JSON.stringify(data)) }else{ - if(!state.selectDetail.newDetail[str])state.selectDetail.newDetail[str] = [] - const foundObjects = state.selectDetail.newDetail[str].filter((item:any) => item.id === data.id); + if(!select.newDetail[str])select.newDetail[str] = [] + const foundObjects = select.newDetail[str].filter((item:any) => item.id === data.id); if(foundObjects.length == 0){ - state.selectDetail.newDetail[str].push(data) + select.newDetail[str].push(data) } } }, @@ -226,21 +220,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 +243,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 +262,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 +307,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 +344,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){ diff --git a/src/views/AwardPage/apply.vue b/src/views/AwardPage/apply.vue index 9783f3b2..36a7998d 100644 --- a/src/views/AwardPage/apply.vue +++ b/src/views/AwardPage/apply.vue @@ -312,7 +312,7 @@ import type { Rule } from 'ant-design-vue/es/form' import { message } from 'ant-design-vue' import type { UploadChangeParam } from 'ant-design-vue' - import VerifycationCodeInput from './components/verificationCodeInput.vue' + import VerifycationCodeInput from './components/VerificationCodeInput.vue' import { Https } from '@/tool/https' import UploadStatus from './components/UploadStatus.vue'