diff --git a/src/component/Detail/DesignDetail.vue b/src/component/Detail/DesignDetail.vue index e59834a6..73ce0ad1 100644 --- a/src/component/Detail/DesignDetail.vue +++ b/src/component/Detail/DesignDetail.vue @@ -772,7 +772,7 @@ export default defineComponent({ this.designShowPrview = num let setDesignItem:any = isMoible() ? this.$refs.setDesignItemMobile : this.$refs.setDesignItem if(this.designShowPrview == 3){ - setDesignItem.init() + setDesignItem.setImgSize() } // this.others = designItemDetail.others diff --git a/src/component/Detail/setDesignItem2.vue b/src/component/Detail/setDesignItem2.vue index d447fb83..4024855c 100644 --- a/src/component/Detail/setDesignItem2.vue +++ b/src/component/Detail/setDesignItem2.vue @@ -8,7 +8,9 @@ - +
+ +
{{ $t('LibraryPage.Reset') }}
OK
@@ -57,6 +59,16 @@ export default defineComponent({ } return num } + let computeZindex = (designItemDetail)=>{ + let arr = designItemDetail.clothes + arr.sort((a, b) => { + var a_num = a.priority; + var b_num = b.priority; + return a_num - b_num; + }); + designItemDetail.clothes = arr + return designItemDetail + } let setImgSize = async ()=>{ let designItemDetail = JSON.parse(JSON.stringify(store.state.DesignDetailModule.designItemDetail)) let front = [] @@ -68,6 +80,7 @@ export default defineComponent({ } }); let ratio = await setPostition(body.layersObject[0]?.imageUrl) + designItemDetail = computeZindex(designItemDetail) designItemDetail.clothes.forEach((v,index)=>{ for (let i = v.layersObject.length-1; i >= 0; i--) { v.layersObject[i].style = { @@ -115,9 +128,14 @@ export default defineComponent({ })) setCanvas(frontBack) } - const canvasDom = ref(null) let canvas = reactive({}) let setCanvas = (frontBack)=>{ + let canvasBox = document.querySelector('.design_compile_content .designOpenrtion_imgMask') + var canvasDom = document.createElement('canvas') + console.log(canvasDom); + canvasBox.innerHTML = ''; // 清空原有内容 + canvasBox.appendChild(canvas); + canvas = reactive(null) canvas = new fabric.Canvas(canvasDom.value, { backgroundColor: "rgba(255,255,255,1)", // fill: '#ffde7d', @@ -127,13 +145,16 @@ export default defineComponent({ isDrawingMode: false, // 开启绘图模式 }); canvas.clear(); + canvasFontBackMove = reactive({ + back:[], + front:[], + }) + console.log(canvas.getObjects()); let fontBackMove = [] canvas.on('selection:cleared', ()=>{ designShowIndex.value = -1 }) frontBack.back.forEach((item) => { - - console.log(item); if(!item.imageUrl){ return } @@ -164,6 +185,7 @@ export default defineComponent({ canvas.add(img); }); frontBack.front.forEach((item) => { + console.log(item); if(!item.imageUrl){ return } @@ -178,7 +200,6 @@ export default defineComponent({ canvas.add(img); canvasFontBackMove.back.forEach((backItem) => { if(backItem && backItem.id == item.id){ - console.log(backItem); img.on('moving', function() { // 计算第二个矩形应该移动的距离 // 更新第二个矩形的位置 @@ -210,14 +231,16 @@ export default defineComponent({ }); var objects = canvas.getObjects(); - console.log(objects); } let clothesOpen = (item,index)=>{ - setpitch(item,index) - designShowIndex.value = index + setCanvas(frontBack) + // setpitch(item,index) + // designShowIndex.value = index } let setpitch = (item,index)=>{ + console.log(canvas.discardActiveObject); + canvas.discardActiveObject(); // this.designItemDetail.clothes.forEach((item)=>{ // item.clothesOpen = false // }) @@ -247,7 +270,6 @@ export default defineComponent({ frontBack, setRevocation, frontBackOld, - canvasDom, canvasFontBackMove, setImgSize, clothesOpen,