From 3f15a51aac1290720144a4ac140d306ec0c54748 Mon Sep 17 00:00:00 2001 From: X1627315083 <1627315083@qq.com> Date: Thu, 22 Feb 2024 15:50:02 +0800 Subject: [PATCH] fix --- src/component/Detail/setDesignItem2.vue | 40 +++++++++++++++---------- 1 file changed, 24 insertions(+), 16 deletions(-) diff --git a/src/component/Detail/setDesignItem2.vue b/src/component/Detail/setDesignItem2.vue index 29617821..b1c1cc96 100644 --- a/src/component/Detail/setDesignItem2.vue +++ b/src/component/Detail/setDesignItem2.vue @@ -38,10 +38,10 @@ export default defineComponent({ let designShowIndex = reactive({value:-1}) let frontBack = reactive({}) let frontBackOld = reactive({}) - let canvasFontBackMove = reactive({ + let canvasFontBackMove = { back:[], front:[], - }) + } let setPostition = async (url) =>{ let img = await loadImage(url) @@ -71,6 +71,7 @@ export default defineComponent({ } let setImgSize = async ()=>{ let designItemDetail = JSON.parse(JSON.stringify(store.state.DesignDetailModule.designItemDetail)) + let front = [] let back = [] let body @@ -135,7 +136,6 @@ export default defineComponent({ // console.log(canvasBox); canvasBox.innerHTML = ''; // 清空原有内容 canvasBox.appendChild(canvasDom); - canvas = reactive(null) canvas = new fabric.Canvas(canvasDom, { backgroundColor: "rgba(255,255,255,1)", // fill: '#ffde7d', @@ -145,12 +145,20 @@ export default defineComponent({ isDrawingMode: false, // 开启绘图模式 }); canvas.clear(); - canvasFontBackMove = reactive({ + canvasFontBackMove = { back:[], front:[], - }) - console.log(canvas.getObjects()); + } let fontBackMove = [] + canvas.on('selection:created', (e)=> { + console.log(3213123123); + // console.log(canvas.getActiveObject()); + // // if() + // console.log(frontBack.front.find(person => person.id === canvas.getActiveObject().id)); + // designShowIndex.value = + + }); + // selection:updated canvas.on('selection:cleared', ()=>{ designShowIndex.value = -1 }) @@ -185,7 +193,6 @@ export default defineComponent({ canvas.add(img); }); frontBack.front.forEach((item) => { - console.log(item); if(!item.imageUrl){ return } @@ -197,6 +204,7 @@ export default defineComponent({ scaleY: Number(item.style.height.match(/\d+(\.\d+)?/)[0])/img.height, // selectable: false }); + img.id = item.id canvas.add(img); canvasFontBackMove.back.forEach((backItem) => { if(backItem && backItem.id == item.id){ @@ -229,23 +237,20 @@ export default defineComponent({ canvasFontBackMove.front.push({id:item.id,img:img}) }); }); - var objects = canvas.getObjects(); } let clothesOpen = (item,index)=>{ - setCanvas(frontBack) - // setpitch(item,index) - // designShowIndex.value = index + setpitch(item,index) + designShowIndex.value = index } let setpitch = (item,index)=>{ - console.log(canvas.discardActiveObject); + console.log(123); canvas.discardActiveObject(); // this.designItemDetail.clothes.forEach((item)=>{ // item.clothesOpen = false // }) // this.designItemDetail.clothes[index].clothesOpen = true - // console.log(canvas.getActiveObject()); for (const iterator in canvasFontBackMove) { canvasFontBackMove[iterator].forEach((canvasItem,canvasIndex) => { if(canvasItem.id == item.id){ @@ -262,6 +267,10 @@ export default defineComponent({ } // canvas.setDepth(object1, canvas.getObjects().indexOf(object2) + 1); } + let imgClear = ()=>{ + frontBack = JSON.parse(JSON.stringify(frontBackOld)) + setCanvas(frontBack) + } return { designItemDetail, current, @@ -273,6 +282,7 @@ export default defineComponent({ canvasFontBackMove, setImgSize, clothesOpen, + imgClear, }; }, data() { @@ -354,9 +364,7 @@ export default defineComponent({ // })) // this.setCanvas(this.frontBack) // }, - imgClear(){ - this.frontBack = JSON.parse(JSON.stringify(this.frontBackOld)) - }, + //按比设置单件衣服宽高位置 async setPostition(url){