fix

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)
-			// setpitch(item,index)
+			designShowIndex.value = 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){