调整画布布局

src/component/Detail/DesignDetailAlter.vue

@@ -430,12 +430,13 @@ export default defineComponent({
 					threshold:[.5]
 				})
 				ob.observe(el)
-				// this.currentPage = 1
+				// this.currentPage = +=1
 				// this.pageSize = 12
+				// currentPage
 				let this_ = binding.instance
 				function callback(entries, observer) {
 					entries.forEach((entry) => {
-						if (entry.isIntersecting) {
+						if (entry.isIntersecting && !this_.isShowLoading) {
 							this_.getLibraryList()
 						} else {
 						}
@@ -775,6 +776,7 @@ export default defineComponent({
 		},
 		//请求我的印花&&模型
 		getLibraryList(){
+            this.isShowLoading = true
 			let level2Type = ''
 			if(this.selectCode == 'Printboard' || this.selectCode == 'DesignElements'){
 				level2Type = this.designType
@@ -792,7 +794,6 @@ export default defineComponent({
                 pictureName:this.searchPictureName,
                 size:this.pageSize+this.clothesList.length,
             }
-            this.isShowLoading = true
             Https.axiosPost(Https.httpUrls.queryLibraryPage,data).then(
                 (rv) => {
 					if(this.selectCode == 'Sketchboard'){

src/component/Detail/DesignDetailEnd.vue

@@ -350,7 +350,7 @@ export default defineComponent({
 		},
 		setElemets(){
 			if(this.current.trims.prints && this.current.trims.prints.length == 0 && this.elementsList.length == 0)return message.info('请选择至少一张element')
-			let DesignElementsOperation = isMoible() ? this.$refs.DesignPrintMobile : this.$refs.DesignElementsOperation
+			let DesignElementsOperation = this.$refs.DesignElementsOperation
 			DesignElementsOperation.init()
 		},
 		//提交

src/component/Detail/DesignElements.vue

@@ -43,7 +43,7 @@
 								v-for="item,index in exhibitionElementsList" 
 								:key="item"
 								:style="[printStyleList?.[index]?.style]" 
-								@mousedown.stop="itemMoveMousedown(index,$event)"
+								@mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))"
 								class="modal_imgItem" 
 								ref="content" >
 								<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[index]?.transform?.rotateZ}deg)`}" class="designElements_imgItme" draggable="false"> 
@@ -52,11 +52,11 @@
 						<img :src="current?.undividedLayer?current.undividedLayer:current.path" alt="" class="designElements_sketch">
 						<!-- <img :src="current?.path" alt="" class="designElements_sketch"> -->
 						<div class="designElements_btn">
-							<ul v-for="item,index in printStyleList" :key="item" :class="{active:item?.designElementsBtn?item?.designElementsBtn:false}" class="designElements_Mousingle" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
+							<ul v-for="item,index in printStyleList" :key="item" :class="{active:item?.designElementsBtn?item?.designElementsBtn:false}" class="designElements_Mousingle" :style="item.style" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))">
-								<li class="designElements_btn_top" @mousedown.stop="itemSizeMousedown('top',$event)"></li>
+								<li class="designElements_btn_top" @mousedown.stop="itemSizeMousedown('top',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('top',getMousePosition($event,true))"></li>
-								<li class="designElements_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',$event)"></li>
+								<li class="designElements_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('bottom',getMousePosition($event,true))"></li>
-								<li class="designElements_btn_left" @mousedown.stop="itemSizeMousedown('left',$event)"></li>
+								<li class="designElements_btn_left" @mousedown.stop="itemSizeMousedown('left',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('left',getMousePosition($event,true))"></li>
-								<li class="designElements_btn_right" @mousedown.stop="itemSizeMousedown('right',$event)"></li>
+								<li class="designElements_btn_right" @mousedown.stop="itemSizeMousedown('right',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('right',getMousePosition($event,true))"></li>
 								<li class="designElements_rotote" v-rotote.stop="[index,item.transform]"></li>
 								<li class="designElements_delete" @click="deletePrint">
 									<img src="../../assets/images/homePage/cuowu.svg" alt="">
@@ -88,6 +88,7 @@ import { Https } from "@/tool/https";
 import { Modal,message } from 'ant-design-vue';
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import { useI18n } from "vue-i18n";
+import { getMousePosition } from "@/tool/mdEvent";
 export default defineComponent({
 	
     setup(prop) {
@@ -159,6 +160,7 @@ export default defineComponent({
 			currentFullBodyView,
 			designItemDetailTS,
 			body,
+			getMousePosition,
         };
     },
     data() {
@@ -171,8 +173,16 @@ export default defineComponent({
 		//操作旋转
 		rotote:{
 			mounted(el,value){
-				
+				let mousedown = function(event){
-				el.addEventListener('mousedown', (e) => {
+					let e = getMousePosition(event,false)
+					mouseDownOperation(e)
+				}
+
+				let touchstart = function(event){
+					let e = getMousePosition(event,true)
+					mouseDownOperation(e)
+				}
+				let mouseDownOperation  = (e) => {
 				let elParent = document.getElementsByClassName('designElements_modal')[0].getElementsByClassName('modal_imgItem')[value.instance.imgDomIndex]
 				let mouse = true;
 				let angle  = 0
@@ -185,12 +195,19 @@ export default defineComponent({
 				el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
 				// let scale = Number(elParent.firstElementChild.style.transform?.split('scale(')[1]?.split(')')[0])
 				// let rotateZ = Number(elParent.firstElementChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
-					e.stopPropagation()
 					mouse = true;
 					var info = el.getBoundingClientRect();
 					let eX = info.x + info.width / 2;
 					let eY = info.y + info.height / 2;
-					let mousemove = (e) => {
+					let mouseMove = function(event){
+						let e = getMousePosition(event,false)
+						mouseMoveOperation(e)
+					}
+					let touchmove = function(event){
+						let e = getMousePosition(event,true)
+						mouseMoveOperation(e)
+					}
+					let mouseMoveOperation = (e) => {
 						if (mouse) {
 							let X = eX 
 							let Y = eY
@@ -201,16 +218,24 @@ export default defineComponent({
 							el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
 						}
 					}
-					document.addEventListener('mousemove', mousemove);
+					// document.addEventListener('mousemove', mousemove);
 					// 添加鼠标松开事件监听器
 					let mouseup = () => {
 						value.instance.printStyleList[value.instance.imgDomIndex].transform.rotateZ = angle
 						mouse = false;
-						document.removeEventListener('mouseup',mouseup)
+						document.removeEventListener('mousemove',mouseMove)
-						document.removeEventListener('mousemove',mousemove)
+						document.removeEventListener('touchmove',touchmove)
+						document.removeEventListener('mouseup',mouseup) 
+						document.removeEventListener('touchend',mouseup) 
 					}
+					// document.addEventListener('mouseup', mouseup);
+					document.addEventListener('mousemove', mouseMove);
+					document.addEventListener('touchmove', touchmove);
 					document.addEventListener('mouseup', mouseup);
-				});
+					document.addEventListener('touchend', mouseup);
+				};
+				el.addEventListener('mousedown',mousedown)
+				el.addEventListener('touchstart',touchstart)
 			}
 
 			},
@@ -301,8 +326,12 @@ export default defineComponent({
 			let top = Number(this.printStyleList[index].style.top.replace(/px/g,''))
 			this.printStyleList[index].centers.left = imgDomWH.x+event.offsetX-left
 			this.printStyleList[index].centers.top = imgDomWH.y+event.offsetY-top
-			document.addEventListener("mouseup", this.mouseup);
+			// document.addEventListener("mouseup", this.mouseup);
-			document.addEventListener("mousemove", this.moveMousemove);
+			// document.addEventListener("mousemove", this.moveMousemove);
+			document.addEventListener('mousemove', this.mouseMove);
+			document.addEventListener('touchmove', this.touchmove);
+			document.addEventListener('mouseup', this.mouseup);
+			document.addEventListener('touchend', this.mouseup);
 		},
 		//设置尺寸
 		itemSizeMousedown(direction,event){
@@ -325,23 +354,42 @@ export default defineComponent({
 				this.printStyleList[this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
 			}
 			
-			document.addEventListener("mouseup", this.sizeMouseup);
+			// document.addEventListener("mouseup", this.sizeMouseup);
-			document.addEventListener("mousemove", this.sizeMousemove);
+			// document.addEventListener("mousemove", this.sizeMousemove);
+			document.addEventListener('mousemove', this.sizeMouseMove);
+			document.addEventListener('touchmove', this.sizeTouchmove);
+			document.addEventListener('mouseup', this.sizeMouseup);
+			document.addEventListener('touchend', this.sizeMouseup);
+		},
+		mouseMove(event){
+			let e = getMousePosition(event,false)
+			this.mouseMoveOperation(e)
+		},
+		touchmove(event){
+			let e = getMousePosition(event,true)
+			this.mouseMoveOperation(e)
 		},
 		//鼠标移动
-		moveMousemove(e) {
+		mouseMoveOperation(e) {
 			let imgDomWH = this.imgDom.getBoundingClientRect()
 			let parentNode = document.getElementsByClassName('designElements_modal')[0].getElementsByClassName("designElements_imgMask")[0]
 			parentNode = parentNode.getBoundingClientRect()
-			let x = (e.x - this.printStyleList[this.imgDomIndex].centers.left)+'px'
+			let x = (e.clientX - this.printStyleList[this.imgDomIndex].centers.left)+'px'
-			let y = ( e.y - this.printStyleList[this.imgDomIndex].centers.top)+'px'
+			let y = ( e.clientY - this.printStyleList[this.imgDomIndex].centers.top)+'px'
 			this.printStyleList[this.imgDomIndex].style.left = x
 			this.printStyleList[this.imgDomIndex].style.top = y
 			
 		
 		},
-
+		sizeMouseMove(event){
-		sizeMousemove(e) {
+			let e = getMousePosition(event,false)
+			this.sizeMouseMoveOperation(e)
+		},
+		sizeTouchmove(event){
+			let e = getMousePosition(event,true)
+			this.sizeMouseMoveOperation(e)
+		},
+		sizeMouseMoveOperation(e) {
 			let imgDomWH = this.imgDom.getBoundingClientRect()
 			let parentNode =this.imgDom.parentNode
 			let width = imgDomWH.width
@@ -351,27 +399,27 @@ export default defineComponent({
 			let w,h
 			//判断移动四个边
 			if(this.direction == 'right'){
-				w = (e.x - this.printStyleList[this.imgDomIndex].centers.left)
+				w = (e.clientX - this.printStyleList[this.imgDomIndex].centers.left)
-				h = (e.x - this.printStyleList[this.imgDomIndex].centers.left)*num
+				h = (e.clientX - this.printStyleList[this.imgDomIndex].centers.left)*num
 				width = w+'px'
 				height = w*num1+'px'
 			}else if(this.direction == 'top'){
 				this.printStyleList[this.imgDomIndex].style.top = 'auto'
 				// this.printStyleList[this.imgDomIndex].style.left = 'auto'
 				this.printStyleList[this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
-				w = (e.x - this.printStyleList[this.imgDomIndex].centers.left)*num
+				w = (e.clientX - this.printStyleList[this.imgDomIndex].centers.left)*num
-				h = (this.printStyleList[this.imgDomIndex].centers.top - e.y)
+				h = (this.printStyleList[this.imgDomIndex].centers.top - e.clientY)
 				
 				height = h+'px'
 				width = h*num+'px'
 			}else if(this.direction == 'bottom'){
-				h = (e.y - this.printStyleList[this.imgDomIndex].centers.top)
+				h = (e.clientY - this.printStyleList[this.imgDomIndex].centers.top)
 				height = h+'px'
 				width = h*num+'px'
 			}else if(this.direction == 'left'){
 				this.printStyleList[this.imgDomIndex].style.left = 'auto'
 				this.printStyleList[this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
-				w = (this.printStyleList[this.imgDomIndex].centers.left - e.x)
+				w = (this.printStyleList[this.imgDomIndex].centers.left - e.clientX)
 				width = w+'px'
 				height = w*num1+'px'
 			}
@@ -391,13 +439,21 @@ export default defineComponent({
 				width:this.imgDom.offsetWidth+'px',
 				zIndex:this.printZIndex
 			}
-			document.removeEventListener("mouseup", this.sizeMouseup);
+			// document.removeEventListener("mouseup", this.sizeMouseup);
-			document.removeEventListener("mousemove", this.sizeMousemove);
+			// document.removeEventListener("mousemove", this.sizeMousemove);
+			document.removeEventListener('mousemove',this.sizeMouseMove)
+			document.removeEventListener('touchmove',this.sizeTouchmove)
+			document.removeEventListener('mouseup',this.sizeMouseup) 
+			document.removeEventListener('touchend',this.sizeMouseup) 
 		},
 		mouseup(e) {
 
-			document.removeEventListener("mouseup", this.mouseup);
+			// document.removeEventListener("mouseup", this.mouseup);
-			document.removeEventListener("mousemove", this.moveMousemove);
+			// document.removeEventListener("mousemove", this.moveMousemove);
+			document.removeEventListener('mousemove',this.mouseMove)
+			document.removeEventListener('touchmove',this.touchmove)
+			document.removeEventListener('mouseup',this.mouseup) 
+			document.removeEventListener('touchend',this.mouseup) 
 		},
 		deletePrint(){
 			this.exhibitionElementsList.splice(this.imgDomIndex,1)

src/component/Detail/DesignElementsMobile.vue

@@ -43,7 +43,7 @@
 								v-for="item,index in exhibitionElementsList" 
 								:key="item"
 								:style="[printStyleList?.[index]?.style]" 
-								@touchstart.stop="itemMoveMousedown(index,$event)"
+								@touchstart.passive="itemMoveMousedown(index,$event)"
 								class="modal_imgItem" 
 								ref="content" >
 								<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[index]?.transform?.rotateZ}deg)`}" class="designElementsMobile_imgItme" draggable="false"> 
@@ -52,11 +52,11 @@
 						<!-- <img :src="current?.path" alt="" class="designElementsMobile_sketch"> -->
 						<img :src="current?.undividedLayer?current.undividedLayer:current.path" alt="" class="designElementsMobile_sketch">
 						<div class="designElementsMobile_btn">
-							<ul v-for="item,index in printStyleList" :key="item" :class="{active:item?.designElementsBtn?item?.designElementsBtn:false}" class="designElementsMobile_Mousingle" :style="item.style" @touchstart.stop="itemMoveMousedown(index,$event)">
+							<ul v-for="item,index in printStyleList" :key="item" :class="{active:item?.designElementsBtn?item?.designElementsBtn:false}" class="designElementsMobile_Mousingle" :style="item.style" @touchstart.passive="itemMoveMousedown(index,$event)">
-								<li class="designElementsMobile_btn_top" @touchstart.stop="itemSizeMousedown('top',$event)"></li>
+								<li class="designElementsMobile_btn_top" @touchstart.passive="itemSizeMousedown('top',$event)"></li>
-								<li class="designElementsMobile_btn_bottom" @touchstart.stop="itemSizeMousedown('bottom',$event)"></li>
+								<li class="designElementsMobile_btn_bottom" @touchstart.passive="itemSizeMousedown('bottom',$event)"></li>
-								<li class="designElementsMobile_btn_left" @touchstart.stop="itemSizeMousedown('left',$event)"></li>
+								<li class="designElementsMobile_btn_left" @touchstart.passive="itemSizeMousedown('left',$event)"></li>
-								<li class="designElementsMobile_btn_right" @touchstart.stop="itemSizeMousedown('right',$event)"></li>
+								<li class="designElementsMobile_btn_right" @touchstart.passive="itemSizeMousedown('right',$event)"></li>
 								<li class="designElementsMobile_rotote" v-rotote.stop="[index,item.transform]"></li>
 								<li class="designElementsMobile_delete" @click="deletePrint">
 									<img src="../../assets/images/homePage/cuowu.svg" alt="">

src/component/Detail/DesignPrintOperation.vue

@@ -90,7 +90,7 @@
 								:key="item"
 								v-if="overallSingle"
 								:style="[printStyleList[stateOverallSingle]?.[index]?.style]" 
-								@mousedown.stop="itemMoveMousedown(index,$event)"
+								@mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))"
 								class="modal_imgItem" 
 								ref="content" 
 								>
@@ -100,10 +100,10 @@
 						<img :src="operationCurrent?.undividedLayer?operationCurrent.undividedLayer:operationCurrent.path" alt="" class="designOpenrtion_sketch">
 						<div class="designOpenrtion_btn">
 							<ul v-if="overallSingle" v-for="item,index in printStyleList[stateOverallSingle]" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtion_Mousingle" :style="item.style" @mousedown.stop="itemMoveMousedown(index,$event)">
-								<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',$event)"></li>
+								<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('top',getMousePosition($event,true))"></li>
-								<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',$event)"></li>
+								<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('bottom',getMousePosition($event,true))"></li>
-								<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',$event)"></li>
+								<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('left',getMousePosition($event,true))"></li>
-								<li class="designOpenrtion_btn_right" @mousedown.stop="itemSizeMousedown('right',$event)"></li>
+								<li class="designOpenrtion_btn_right" @mousedown.stop="itemSizeMousedown('right',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('right',getMousePosition($event,true))"></li>
 								<li class="designOpenrtion_rotote" v-rotote.stop="[index,item.transform]"></li>
 								<li class="designOpenrtion_delete" @click.stop="deletePrint">
 									<img src="../../assets/images/homePage/cuowu.svg" alt="">
@@ -144,6 +144,8 @@ import { Modal,message } from 'ant-design-vue';
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 import { useI18n } from "vue-i18n";
 import { remove } from "jszip";
+import { getMousePosition } from "@/tool/mdEvent";
+
 export default defineComponent({
 	
     setup(prop) {
@@ -232,6 +234,7 @@ export default defineComponent({
 			currentFullBodyView,
 			designItemDetailTS,
 			body,
+			getMousePosition,
         };
     },
     data() {
@@ -244,8 +247,16 @@ export default defineComponent({
 		//操作旋转
 		rotote:{
 			mounted(el,value){
-				
+				let mousedown = function(event){
-				el.addEventListener('mousedown', (e) => {
+					let e = getMousePosition(event,false)
+					mouseDownOperation(e)
+				}
+
+				let touchstart = function(event){
+					let e = getMousePosition(event,true)
+					mouseDownOperation(e)
+				}
+				let mouseDownOperation =  (e) => {
 				let elParent = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName('modal_imgItem')[value.instance.imgDomIndex]
 				let mouse = true;
 				let angle  = 0
@@ -258,12 +269,19 @@ export default defineComponent({
 				el.style.transform = "translate(-50%, -50%)rotateZ("+ angle + "deg)"
 				// let scale = Number(elParent.firstElementChild.style.transform?.split('scale(')[1]?.split(')')[0])
 				// let rotateZ = Number(elParent.firstElementChild.style.transform?.split('rotateZ(')[1]?.split('deg')[0])
-					e.stopPropagation()
 					mouse = true;
 					var info = el.getBoundingClientRect();
 					let eX = info.x + info.width / 2;
 					let eY = info.y + info.height / 2;
-					let mousemove = (e) => {
+					let mouseMove = function(event){
+						let e = getMousePosition(event,false)
+						mouseMoveOperation(e)
+					}
+					let touchmove = function(event){
+						let e = getMousePosition(event,true)
+						mouseMoveOperation(e)
+					}
+					let mouseMoveOperation = (e) => {
 						if (mouse) {
 							let X = eX 
 							let Y = eY
@@ -281,11 +299,21 @@ export default defineComponent({
 					let mouseup = () => {
 						value.instance.printStyleList[value.instance.stateOverallSingle][value.instance.imgDomIndex].transform.rotateZ = angle
 						mouse = false;
-						document.removeEventListener('mouseup',mouseup)
+						// document.removeEventListener('mouseup',mouseup)
-						document.removeEventListener('mousemove',mousemove)
+						// document.removeEventListener('mousemove',mousemove)
+						document.removeEventListener('mousemove',mouseMove)
+						document.removeEventListener('touchmove',touchmove)
+						document.removeEventListener('mouseup',mouseup) 
+						document.removeEventListener('touchend',mouseup) 
 					}
+					// document.addEventListener('mouseup', mouseup);
+					document.addEventListener('mousemove', mouseMove);
+					document.addEventListener('touchmove', touchmove);
 					document.addEventListener('mouseup', mouseup);
-				});
+					document.addEventListener('touchend', mouseup);
+				}
+				el.addEventListener('mousedown',mousedown)
+				el.addEventListener('touchstart',touchstart)
 			}
 
 			},
@@ -462,8 +490,12 @@ export default defineComponent({
 			let top = Number(this.printStyleList[this.stateOverallSingle][index].style.top.replace(/px/g,''))
 			this.printStyleList[this.stateOverallSingle][index].centers.left = imgDomWH.x+event.offsetX-left
 			this.printStyleList[this.stateOverallSingle][index].centers.top = imgDomWH.y+event.offsetY-top
-			document.addEventListener("mouseup", this.mouseup);
+			// document.addEventListener("mouseup", this.mouseup);
-			document.addEventListener("mousemove", this.moveMousemove);
+			// document.addEventListener("mousemove", this.moveMousemove);
+			document.addEventListener('mousemove', this.mouseMove);
+			document.addEventListener('touchmove', this.touchmove);
+			document.addEventListener('mouseup', this.mouseup);
+			document.addEventListener('touchend', this.mouseup);
 		},
 		//设置尺寸
 		itemSizeMousedown(direction,event){
@@ -486,16 +518,28 @@ export default defineComponent({
 				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top = imgDomWH.y+event.offsetY+imgDomWH.height-li
 			}
 			
-			document.addEventListener("mouseup", this.sizeMouseup);
+			// document.addEventListener("mouseup", this.sizeMouseup);
-			document.addEventListener("mousemove", this.sizeMousemove);
+			// document.addEventListener("mousemove", this.sizeMousemove);
+			document.addEventListener('mousemove', this.sizeMouseMove);
+			document.addEventListener('touchmove', this.sizeTouchmove);
+			document.addEventListener('mouseup', this.sizeMouseup);
+			document.addEventListener('touchend', this.sizeMouseup);
+		},
+		mouseMove(event){
+			let e = getMousePosition(event,false)
+			this.mouseMoveOperation(e)
+		},
+		touchmove(event){
+			let e = getMousePosition(event,true)
+			this.mouseMoveOperation(e)
 		},
 		//鼠标移动
-		moveMousemove(e) {
+		mouseMoveOperation(e) {
 			let imgDomWH = this.imgDom.getBoundingClientRect()
 			let parentNode = document.getElementsByClassName('designOpenrtion_modal')[0].getElementsByClassName("designOpenrtion_imgMask")[0]
 			parentNode = parentNode.getBoundingClientRect()
-			let x = (e.x - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)+'px'
+			let x = (e.clientX - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)+'px'
-			let y = ( e.y - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top)+'px'
+			let y = ( e.clientY - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top)+'px'
 			this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = x
 			this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = y
 			if(!this.overallSingle){
@@ -514,8 +558,15 @@ export default defineComponent({
 			}
 		
 		},
-
+		sizeMouseMove(event){
-		sizeMousemove(e) {
+			let e = getMousePosition(event,false)
+			this.sizeMouseMoveOperation(e)
+		},
+		sizeTouchmove(event){
+			let e = getMousePosition(event,true)
+			this.sizeMouseMoveOperation(e)
+		},
+		sizeMouseMoveOperation(e) {
 			let imgDomWH = this.imgDom.getBoundingClientRect()
 			let parentNode =this.imgDom.parentNode
 			let width = imgDomWH.width
@@ -525,27 +576,27 @@ export default defineComponent({
 			let w,h
 			//判断移动四个边
 			if(this.direction == 'right'){
-				w = (e.x - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)
+				w = (e.clientX - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)
-				h = (e.x - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)*num
+				h = (e.clientX - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)*num
 				width = w+'px'
 				height = w*num1+'px'
 			}else if(this.direction == 'top'){
 				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.top = 'auto'
 				// this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = 'auto'
 				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.bottom = parentNode.offsetHeight -imgDomWH.height - this.imgDom.offsetTop+'px'
-				w = (e.x - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)*num
+				w = (e.clientX - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left)*num
-				h = (this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top - e.y)
+				h = (this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top - e.clientY)
 				
 				height = h+'px'
 				width = h*num+'px'
 			}else if(this.direction == 'bottom'){
-				h = (e.y - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top)
+				h = (e.clientY - this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.top)
 				height = h+'px'
 				width = h*num+'px'
 			}else if(this.direction == 'left'){
 				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.left = 'auto'
 				this.printStyleList[this.stateOverallSingle][this.imgDomIndex].style.right = parentNode.offsetWidth -imgDomWH.width - this.imgDom.offsetLeft+'px'
-				w = (this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left - e.x)
+				w = (this.printStyleList[this.stateOverallSingle][this.imgDomIndex].centers.left - e.clientX)
 				width = w+'px'
 				height = w*num1+'px'
 			}
@@ -565,13 +616,21 @@ export default defineComponent({
 				width:this.imgDom.offsetWidth+'px',
 				zIndex:this.printZIndex
 			}
-			document.removeEventListener("mouseup", this.sizeMouseup);
+			// document.removeEventListener("mouseup", this.sizeMouseup);
-			document.removeEventListener("mousemove", this.sizeMousemove);
+			// document.removeEventListener("mousemove", this.sizeMousemove);
+			document.removeEventListener('mousemove',this.sizeMouseMove)
+			document.removeEventListener('touchmove',this.sizeTouchmove)
+			document.removeEventListener('mouseup',this.sizeMouseup) 
+			document.removeEventListener('touchend',this.sizeMouseup)
 		},
 		mouseup(e) {
 
-			document.removeEventListener("mouseup", this.mouseup);
+			// document.removeEventListener("mouseup", this.mouseup);
-			document.removeEventListener("mousemove", this.moveMousemove);
+			// document.removeEventListener("mousemove", this.moveMousemove);
+			document.removeEventListener('mousemove',this.mouseMove)
+			document.removeEventListener('touchmove',this.touchmove)
+			document.removeEventListener('mouseup',this.mouseup) 
+			document.removeEventListener('touchend',this.mouseup)
 		},
 		deletePrint(){
 			this.exhibitionOpenrtionList[this.stateOverallSingle].splice(this.imgDomIndex,1)

src/component/Detail/DesignPrintOperationMobile.vue

@@ -93,7 +93,7 @@
 								:key="item"
 								v-if="overallSingle"
 								:style="[printStyleList[stateOverallSingle]?.[index]?.style]" 
-								@touchstart.stop="itemMoveMousedown(index,$event)"
+								@touchstart.passive="itemMoveMousedown(index,$event)"
 								class="modal_imgItem" 
 								ref="content" >
 								<img crossOrigin="anonymous" :src="item?.path" :style="{transform:`rotateZ(${printStyleList[index]?.transform?.rotateZ}deg)`}" class="designOpenrtionMobile_imgItme" draggable="false"> 
@@ -101,18 +101,18 @@
 						</div>
 						<img :src="operationCurrent?.undividedLayer?operationCurrent.undividedLayer:operationCurrent.path" alt="" class="designOpenrtionMobile_sketch">
 						<div class="designOpenrtionMobile_btn">
-							<ul v-if="overallSingle" v-for="item,index in printStyleList[stateOverallSingle]" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtionMobile_Mousingle" :style="item.style" @touchstart.stop="itemMoveMousedown(index,$event)">
+							<ul v-if="overallSingle" v-for="item,index in printStyleList[stateOverallSingle]" :key="item" :class="{active:item?.designOpenrtionBtn?item?.designOpenrtionBtn:false}" class="designOpenrtionMobile_Mousingle" :style="item.style" @touchstart.passive="itemMoveMousedown(index,$event)">
-								<li class="designOpenrtionMobile_btn_top" @touchstart.stop="itemSizeMousedown('top',$event)"></li>
+								<li class="designOpenrtionMobile_btn_top" @touchstart.passive="itemSizeMousedown('top',$event)"></li>
-								<li class="designOpenrtionMobile_btn_bottom" @touchstart.stop="itemSizeMousedown('bottom',$event)"></li>
+								<li class="designOpenrtionMobile_btn_bottom" @touchstart.passive="itemSizeMousedown('bottom',$event)"></li>
-								<li class="designOpenrtionMobile_btn_left" @touchstart.stop="itemSizeMousedown('left',$event)"></li>
+								<li class="designOpenrtionMobile_btn_left" @touchstart.passive="itemSizeMousedown('left',$event)"></li>
-								<li class="designOpenrtionMobile_btn_right" @touchstart.stop="itemSizeMousedown('right',$event)"></li>
+								<li class="designOpenrtionMobile_btn_right" @touchstart.passive="itemSizeMousedown('right',$event)"></li>
 								<li class="designOpenrtionMobile_rotote" v-rotote.stop="[index,item.transform]"></li>
 								<li class="designOpenrtionMobile__delete" @click="deletePrint">
 									<img src="../../assets/images/homePage/cuowu.svg" alt="">
 								</li>
 							</ul>
 							<div v-show="!overallSingle"></div>
-							<ul v-if="!overallSingle && printStyleList[stateOverallSingle][0]" class="designOpenrtionMobile_Mouoverall active" :style="'left:'+printStyleList[stateOverallSingle][0]?.style?.left+';top:'+printStyleList[stateOverallSingle][0]?.style?.top+';'" @touchstart.stop="itemMoveMousedown(0,$event)">
+							<ul v-if="!overallSingle && printStyleList[stateOverallSingle][0]" class="designOpenrtionMobile_Mouoverall active" :style="'left:'+printStyleList[stateOverallSingle][0]?.style?.left+';top:'+printStyleList[stateOverallSingle][0]?.style?.top+';'" @touchstart.passive="itemMoveMousedown(0,$event)">
 								<i class="fi fi-rr-arrows animtion1"></i>
 								<i class="fi fi-rr-arrows animtion2"></i>
 								<li class="designOpenrtionMobile_rotote" v-rotote.stop="[0,printStyleList[stateOverallSingle][0].transform]"></li>

src/component/Detail/addDetails.vue

@@ -21,7 +21,7 @@
 				<div>{{ $t('addDetails.AddDetails') }}</div>
 				<div class="modal_title_text_intro"></div>
 			</div>
-			<div class="exportCanvasBox_center">
+			<div class="addDetails_canvasCenter">
 				<div class="addDetails_center_btn addDetails_center_item" :class="{spread:spreadState}">
 					<!-- <div @click="setOperation('')" class="addDetails_center_btn_item">
 						<div>新增</div>
@@ -32,9 +32,13 @@
 					<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasState == 'pencil'}"></i>
 					<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}"></i>
 					<input type="range" v-show="canvasState != 'move'" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[canvasState]">
-					<div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div>
+					<!-- <div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div> -->
+				</div>
+				<div class="exportCanvasBox_center">
+					<div class="editFrontBack_pencilbtn" v-show="loadingShow" :style="pencilbtnStyle"></div>
 				</div>
 			</div>
+			
 			<div class="exportCanvasBox_submit" @click="setSubmit">
 				<div class="started_btn">
 					{{ $t('addDetails.submit') }}
@@ -44,9 +48,9 @@
 		</div>
 		<div></div>
     </a-modal>
-	<div class="mark_loading" v-show="loadingShow">
+	<!-- <div class="mark_loading" v-show="loadingShow">
 		<a-spin size="large" />
-	</div>
+	</div> -->
 </template>
 <script>
 import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
@@ -74,6 +78,14 @@ export default defineComponent({
 		let scale = 2;
 		let ratio = [1,1]
 		let exportWH = 512
+		let pencilbtnStyle = ref({
+			background:'',
+			width:0+'px',
+			height:0+'px',
+			display:'none',
+			left:0+'px',
+			top:0+'px',
+		})
 		let canvasBtn = reactive({
 			canvasState:'move',
 			canvasPencilWidth:{
@@ -91,35 +103,29 @@ export default defineComponent({
 		let canvasState = ref()//存放canvas操作
 		let keyDown = []//监听键盘的 keydown 和 keyup 事件
 		let init = (data,index)=>{
-			loadingShow.value = true
 			normalCanvasState.value = []
 			reverseCanvasState.value = []
             showPayOrder.value = true;
-			scale = 2;
 			ratio = [1,1]
 			exportWH = 512
 			nextTick(()=>{
 				let canvasBox = document.querySelector(".addDetails_modal .exportCanvasBox_center");
-				let height = canvasBox.offsetHeight;
+				let oldCanvasDom = canvasBox.querySelector('.canvas-container')
-				canvasBox.style.width = height+'px'
+				let oldCanvasDom1 =  canvasBox.querySelector('canvas')
-				canvasWH.value = height
 				var canvasDom = document.createElement("canvas");
 				document.addEventListener("keydown", canvasKeyDown);
 				document.addEventListener("keyup", canvasKeyUp);
-				
+				if(oldCanvasDom)oldCanvasDom.remove()
-
+				if(oldCanvasDom)loadingShow.value = false
-				let oldCanvasDom = canvasBox.querySelector('.canvas-container')
+				if(oldCanvasDom1)oldCanvasDom1.remove()
-				let oldCanvasDom1 =  canvasBox.querySelector('canvas')
-				if(oldCanvasDom){
-					oldCanvasDom.remove()
-				}
-				if(oldCanvasDom1){
-					oldCanvasDom1.remove()
-				}
 				canvasBox.appendChild(canvasDom);
 				let img = new Image();
 
 				img.onload = function(){
+					loadingShow.value = true
+					let height = canvasBox.offsetHeight;
+					canvasWH.value = height
+					canvasBox.style.width = height+'px'
 					let wScale = 1
 					let hScale = 1
 					if(img.width>img.height){
@@ -131,14 +137,13 @@ export default defineComponent({
 					}
 					ratio = [wScale,hScale]
 					canvas = new fabric.Canvas(canvasDom, {
-						backgroundColor: "#FFF",
 						width: canvasWH.value * wScale,
 						height: canvasWH.value * hScale,
 						isDrawingMode: false, // 开启绘图模式
 					});
 					scale = img.height/canvas.height
-					
 					JSchangeType(canvas,'init')
+					pencilbtnStyle.value.background = rgba
 					
 					fabric.Object.prototype.cornerSize = 10
 					fabric.Object.prototype.transparentCorners = false 
@@ -147,7 +152,10 @@ export default defineComponent({
 						// 设置背景图对象的宽度和高度与 canvas 相同
 						img.scaleToWidth(canvas.width);
 						img.scaleToHeight(canvas.height);
-						
+						img.set({
+							scaleX: canvas.width / img.width,
+							scaleY: canvas.height / img.height
+						});
 						// 将背景图添加到 canvas 的底层
 						canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
 						if(!fabric.Object.prototype.controls.deleteControl){
@@ -155,8 +163,8 @@ export default defineComponent({
 						}else{
 							fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
 						}
+						setPencilWidth()
 						updateCanvasState()
-						loadingShow.value = false
 					},{ crossOrigin: "Anonymous" });
 					// 鼠标抬起事件
 					canvas.on('mouse:up', function(event) {
@@ -167,7 +175,6 @@ export default defineComponent({
 
 					//画布上移动
 					canvas.on("mouse:move", event =>setCanvasMove(event));
-					canvas.add(brushIndicator)
 					setOperation('pencil')
 					img.remove()
 				}
@@ -199,48 +206,32 @@ export default defineComponent({
 			document.removeEventListener("keyup", canvasKeyUp);
 		}
 		let rgba = 'rgba(0, 0, 0, 1)'
-		let brushIndicator = new fabric.Circle({
-			radius:2,
-			fill: 'rgba(0, 0, 0, 0)',
-			stroke: '#000',
-			strokeWidth: 1,
-			originX: 'center',
-			originY: 'center',
-			visible :true,
-			// left: -100,
-			// top: -100,
-			erasable: false,
-		});
 
 		let setCanvasMove = (event)=>{
 			var pointer = canvas.getPointer(event.e);
 			if(canvas.isDrawingMode){
 				canvas.setCursor('none');
-				if(!canvas.contains(brushIndicator)){
-					canvas.add(brushIndicator)
-					brushIndicator.set({// left:0,
-						// top:0,
-						radius:(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])/2
-					})
-					canvas.bringToFront(brushIndicator);//设置优先级最高
-				}
-				// brushIndicator.fill = canvasPencilColor.value
-				brushIndicator.set({ left: pointer.x, top: pointer.y, visible: true,radius:(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])/2 });
 			}
+			let canvasBox = document.querySelector(".addDetails_canvasCenter .canvas-container");
+			const rect = canvasBox.getBoundingClientRect();
+			const parentRect = canvasBox.parentElement.getBoundingClientRect();
+			let parentX = rect.left - parentRect.left
+			let parentY = rect.top - parentRect.top
+			pencilbtnStyle.value.left = parentX + pointer.x+'px'
+			pencilbtnStyle.value.top =  parentY + pointer.y+'px'
 			canvas.requestRenderAll()
 		}
 		let setOperation = (str)=>{
 			canvasBtn.canvasState = str
 			if(str == 'move'){
 				setMove()
-				if(canvas.contains(brushIndicator))canvas.remove(brushIndicator)
+				pencilbtnStyle.value.display = `none`
 			}else if(str == 'pencil'){
 				setPencil()
-				if(!canvas.contains(brushIndicator))canvas.add(brushIndicator)
+				pencilbtnStyle.value.display = `block`
-				
 			}else if(str == 'eraser'){
 				setEraser()
-				if(!canvas.contains(brushIndicator))canvas.add(brushIndicator)
+				pencilbtnStyle.value.display = `block`
 			}
 		}
 		let setMove = ()=>{
@@ -252,17 +243,19 @@ export default defineComponent({
 			canvas.freeDrawingBrush = new fabric.PencilBrush(canvas,{});
 			canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
 			canvas.freeDrawingBrush.color = rgba
-			brushIndicator.set('fill',rgba)
+			pencilbtnStyle.value.background = rgba
 			canvas.freeDrawingBrush.isEraser = false
+			setPencilWidth()
 		}
 		let setEraser = ()=>{
 			canvas.isDrawingMode = true
 			let eraser = new fabric.EraserBrush(canvas)
             canvas.freeDrawingBrush = eraser
-			brushIndicator.set({fill: '#fff'});
 			canvas.requestRenderAll();
 			canvas.freeDrawingBrush.isEraser = true
+			pencilbtnStyle.value.background = `rgb(255,255,255)`
 			canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
+			setPencilWidth()
 		}
 		let deleteObj = ()=> {
 			// if(!canvas.getActiveObjects()){
@@ -284,13 +277,13 @@ export default defineComponent({
 			clearTimeout(setTimeOutWidth)
 			setTimeOutWidth = setTimeout(()=>{
 				canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])
+				pencilbtnStyle.value.height = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
+				pencilbtnStyle.value.width = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
 			},300)
 		}
 		let updateCanvasState = (str) =>{
 			if(str != 'mouseUp'){
-				canvas.remove(brushIndicator)
 			}
-			if(canvas.contains(brushIndicator))canvas.remove(brushIndicator)
 			const canvasAsJson = JSON.stringify(canvas.toJSON());
 			normalCanvasState.value.push(canvasAsJson);
 		}
@@ -312,9 +305,9 @@ export default defineComponent({
 		}
 		let setSubmit = ()=>{
 			var allObjects = canvas.getObjects('path');
-			if(allObjects.length == 0){
+			// if(allObjects.length == 0){
-				return message.info(t('addDetails.jsContent1'))
+			// 	return message.info(t('addDetails.jsContent1'))
-			}
+			// }
 			var canvasDom = document.createElement("canvas");
 			let exportCanvas = new fabric.Canvas(canvasDom, {
 				backgroundColor: "rgba(255, 255, 255,1)",
@@ -346,13 +339,18 @@ export default defineComponent({
 						}
 					)
 					exportCanvas.add(obj)
-					if(allObjects.length-1 == index){
+					// if(allObjects.length-1 == index){
-						let data = exportCanvas.toDataURL('jpg')
+					// 	let data = exportCanvas.toDataURL('jpg')
-						cancelDsign()
+					// 	cancelDsign()
-						clearCanvas()
+					// 	clearCanvas()
-						emit('setSloganData',data)
+					// 	emit('setSloganData',data)
-					}
+					// }
 				})
+				let data = exportCanvas.toDataURL('jpg')
+				cancelDsign()
+				clearCanvas()
+				emit('setSloganData',data)
+				
 				
 			})
 		}
@@ -367,6 +365,7 @@ export default defineComponent({
             showPayOrder,
 			loadingShow,
             t,
+			pencilbtnStyle,
 			...toRefs(canvasBtn),
 			init,
 			setOperation,
@@ -416,24 +415,20 @@ export default defineComponent({
 				padding: 1rem 0;
 			}
 		}
-		.exportCanvasBox_center{
+		.addDetails_center_btn{
-			height: 100%;
-			flex: 1;
-			position: relative;
-			margin: 0 auto;
-			overflow: hidden;
-			background: #e6e6e6;
-			// overflow: scroll;
-			.addDetails_center_btn{
 				z-index: 2;
-				left: 50%;
+				// left: 50%;
-				transform: translate(-50%,-135%);
+				// transform: translate(-50%,-135%);
-				transition: all .3s;
+				// transition: all .3s;
 				padding: 1rem 1.5rem;
-				// position: relative;
+				// transform: translate(-50%,0);
+				position: relative;
+				width: 100%;
+				flex-direction: row;
 				input{
-					width: 100%;
+					// width: 100%;
-					margin-top: 1rem;
+					// margin-top: 1rem;
+					flex: 1;
 				}
 				.icon-xiala{
 					position: absolute;	
@@ -470,18 +465,41 @@ export default defineComponent({
 					transform: translate(-50%,0);
 				}
 			}
+		.addDetails_canvasCenter{
+			flex: 1;
+			overflow: hidden;
+			display: flex;
+			flex-direction: column;
+			position: relative;
+			margin: 0 auto;
+		}
+		.exportCanvasBox_center{
+			height: 100%;
+			flex: 1;
+			position: relative;
+			overflow: hidden;
+			background: #e6e6e6;
+			// overflow: scroll;
 			.canvas-container{
 				left: 50%;
 				top: 50%;
 				transform: translate(-50%,-50%);
 			}
+			.editFrontBack_pencilbtn{
+				position: absolute;
+				z-index: 1;
+				border-radius: 50%;
+				border: 1px solid #000;
+				pointer-events: none;
+				transform: translate(-50%,-50%);
+			}
 		}
 		.exportCanvasBox_center:hover{
 			.addDetails_center_btn{
-				transform: translate(-50%,-101%);
+				// transform: translate(-50%,-101%);
-				&.spread{
+				// &.spread{
-					transform: translate(-50%,0);
+				// 	transform: translate(-50%,0);
-				}
+				// }
 			}
 		}
 	}

src/component/Detail/editFrontBack.vue

@@ -1,21 +1,24 @@
 <template>
 	<div class="editFrontBack_center">
+		<div class="editFrontBack_center_btn editFrontBack_center_item" :class="{spread:spreadState}">
+			<!-- <div @click="setOperation('')" class="editFrontBack_center_btn_item">
+				<div>新增</div>
+			</div> -->
+			<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
+			<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
+			<i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:canvasState == 'move'}"></i>
+			<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasState == 'pencil'}"></i>
+			<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}"></i>
+			<div class="editFrontBack_center_btn_colorRed" @click="setOperationColor('rgb(255,0,0)')" :class="{active:rgba == 'rgb(255,0,0)'}" title="front"></div>
+			<div class="editFrontBack_center_btn_colorGreen" @click="setOperationColor('rgb(0,255,0)')" :class="{active:rgba == 'rgb(0,255,0)'}" title="back"></div>
+			<input type="range" v-show="canvasState != 'move'" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[canvasState]">
+			<!-- <div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div> -->
+		</div>
 		<div class="exportCanvasBox_center">
-			<div class="editFrontBack_center_btn editFrontBack_center_item" :class="{spread:spreadState}">
+			<div class="editFrontBack_bgImg" v-show="loadingShow">
-				<!-- <div @click="setOperation('')" class="editFrontBack_center_btn_item">
+				<img :src="imgData?.undividedLayer" alt="">
-					<div>新增</div>
-				</div> -->
-				<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
-				<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
-				<i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:canvasState == 'move'}"></i>
-				<i class="icon iconfont icon-bianji" @click="setOperation('pencil')" :class="{active:canvasState == 'pencil'}"></i>
-				<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}"></i>
-				<div class="editFrontBack_center_btn_colorRed" @click="setOperationColor('rgb(255,0,0)')" :class="{active:rgba == 'rgb(255,0,0)'}" title="front"></div>
-				<div class="editFrontBack_center_btn_colorGreen" @click="setOperationColor('rgb(0,255,0)')" :class="{active:rgba == 'rgb(0,255,0)'}" title="back"></div>
-				<input type="range" v-show="canvasState != 'move'" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[canvasState]">
-				<div class="icon iconfont icon-xiala" :class="{btnRotate:spreadState}" @click="()=>spreadState = !spreadState"></div>
-				<div @click="setSubmit">保存</div>
 			</div>
+			<div class="editFrontBack_pencilbtn" v-show="loadingShow" :style="pencilbtnStyle"></div>
 		</div>
 	</div>
 </template>
@@ -45,6 +48,15 @@ export default defineComponent({
 		let ratio = [1,1]
 		let exportWH = 0
 		let imgDomIndex = 0
+		let imgData = ref()
+		let pencilbtnStyle = ref({
+			background:'',
+			width:0+'px',
+			height:0+'px',
+			display:'none',
+			left:0+'px',
+			top:0+'px',
+		})
 		// let a = computed(()=>{
 		// 	console.log(123);
 		// 	return props.patchData
@@ -71,27 +83,28 @@ export default defineComponent({
 		let canvasState = ref()//存放canvas操作
 		let keyDown = []//监听键盘的 keydown 和 keyup 事件
 		let init = (data,index)=>{
-			loadingShow.value = true
 			normalCanvasState.value = []
 			reverseCanvasState.value = []
 			ratio = [1,1]
+			imgData.value = data
 			nextTick(()=>{
-				let canvasBox = document.querySelector(".exportCanvasBox_center");
+				let canvasBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center");
-				let height = canvasBox.offsetHeight;
-				canvasBox.style.width = height+'px'
-				canvasWH.value = height
 				var canvasDom = document.createElement("canvas");
 				document.addEventListener("keydown", canvasKeyDown);
 				document.addEventListener("keyup", canvasKeyUp);
-				
-
 				let oldCanvasDom = canvasBox.querySelector('.canvas-container')
 				let oldCanvasDom1 =  canvasBox.querySelector('canvas')
 				if(oldCanvasDom)oldCanvasDom.remove()
+				if(oldCanvasDom)loadingShow.value = false
 				if(oldCanvasDom1)oldCanvasDom1.remove()
 				canvasBox.appendChild(canvasDom);
 				let img = new Image();
 				img.onload = function(){
+					loadingShow.value = true
+					let height = canvasBox.offsetHeight;
+					canvasWH.value = height
+					console.log(canvasBox.offsetHeight);
+					canvasBox.style.width = height+'px'
 					let wScale = 1
 					let hScale = 1
 					let styleWidth = Number(data.style.width.split('px')[0])
@@ -110,7 +123,8 @@ export default defineComponent({
 						isDrawingMode: false, // 开启绘图模式
 					});
 					JSchangeType(canvas,'init')
-					
+					console.log(rgba.value);
+					pencilbtnStyle.value.background = rgba.value
 					fabric.Object.prototype.cornerSize = 10
 					fabric.Object.prototype.transparentCorners = false 
 					exportUrl = data.maskUrl
@@ -136,7 +150,6 @@ export default defineComponent({
 						}
 						setPencilWidth()
 						updateCanvasState()
-						loadingShow.value = false
 					},{ crossOrigin: "Anonymous" });
 					// 鼠标抬起事件
 					canvas.on('mouse:up', function(event) {
@@ -147,11 +160,6 @@ export default defineComponent({
 					
 					//画布上移动
 					canvas.on("mouse:move", event =>setCanvasMove(event));
-					canvas.add(brushIndicator)
-					canvas.on("mouse:down", event=>brushIndicator.bringToFront());
-					canvas.on('object:added', function() {
-						brushIndicator.bringToFront();
-					});
 					setOperation('pencil')
 					createSetTimeSubmit()
 					img.remove()
@@ -180,64 +188,51 @@ export default defineComponent({
 		let setClone = ()=>{
 			// canvasBtn.canvasState = 'move'
 		    // canvasBtn.spreadState = false
-			let canvasBox = document.querySelector(".exportCanvasBox_center");
+			let canvasBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center");
 			let oldCanvasDom = canvasBox.querySelector('.canvas-container')
 			let oldCanvasDom1 =  canvasBox.querySelector('canvas')
 			if(oldCanvasDom)oldCanvasDom.remove()
 			if(oldCanvasDom1)oldCanvasDom1.remove()
+			loadingShow.value = false
 		}
 		let clearCanvas = ()=>{
 			document.removeEventListener("keydown", canvasKeyDown);
 			document.removeEventListener("keyup", canvasKeyUp);
 		}
 		let rgba = ref('rgb(255,0,0)')
-		let brushIndicator = new fabric.Circle({
-			radius:2,
-			fill: 'rgba(0, 0, 0, 0)',
-			stroke: '#000',
-			strokeWidth: 1,
-			originX: 'center',
-			originY: 'center',
-			visible :true,
-			// left: -100,
-			// top: -100,
-			erasable: false,
-		});
 
 		let setCanvasMove = (event)=>{
 			var pointer = canvas.getPointer(event.e);
 			if(canvas.isDrawingMode){
 				canvas.setCursor('none');
-				if(!canvas.contains(brushIndicator)){
+				// brushIndicator.set({ left: pointer.x, top: pointer.y, visible: true,radius:(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])/2 });
-					canvas.add(brushIndicator)
-					brushIndicator.set({// left:0,
-						// top:0,
-						radius:(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])/2
-					})
-					canvas.bringToFront(brushIndicator);//设置优先级最高
-				}
-				// brushIndicator.fill = canvasPencilColor.value
-				brushIndicator.set({ left: pointer.x, top: pointer.y, visible: true,radius:(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])/2 });
-				brushIndicator.bringToFront()
 			}
+			let canvasBox = document.querySelector(".editFrontBack_center .canvas-container");
+			const rect = canvasBox.getBoundingClientRect();
+			const parentRect = canvasBox.parentElement.getBoundingClientRect();
+			let parentX = rect.left - parentRect.left
+			let parentY = rect.top - parentRect.top
+			// brushIndicator.set({ left: x, top: y, visible: true,radius:(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])/2 });
+			pencilbtnStyle.value.left = parentX + pointer.x+'px'
+			pencilbtnStyle.value.top =  parentY + pointer.y+'px'
 			canvas.requestRenderAll()
 		}
 		let setOperation = (str)=>{
 			canvasBtn.canvasState = str
 			if(str == 'move'){
 				setMove()
-				if(canvas.contains(brushIndicator))canvas.remove(brushIndicator)
+				pencilbtnStyle.value.display = `none`
 			}else if(str == 'pencil'){
 				setPencil()
-				if(!canvas.contains(brushIndicator))canvas.add(brushIndicator)
+				pencilbtnStyle.value.display = `block`
 			}else if(str == 'eraser'){
 				setEraser()
-				rgba.value = ''
+				rgba.value = 'rgb(255,255,255)'
-				if(!canvas.contains(brushIndicator))canvas.add(brushIndicator)
+				pencilbtnStyle.value.display = `block`
 			}
 		}
 		let setOperationColor = (color)=>{
-			brushIndicator.set({fill: color});
+			pencilbtnStyle.value.background = color
 			rgba.value = color
 			canvas.freeDrawingBrush.color = color
 			setOperation('pencil')
@@ -250,18 +245,20 @@ export default defineComponent({
 			canvas.isDrawingMode = true//开启绘画模式
 			canvas.freeDrawingBrush = new fabric.PencilBrush(canvas,{});
 			canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
+			setPencilWidth()
 			canvas.freeDrawingBrush.color = rgba.value
-			brushIndicator.set('fill',rgba.value)
+			pencilbtnStyle.value.background = rgba.value
 			canvas.freeDrawingBrush.isEraser = false
 		}
 		let setEraser = ()=>{
 			canvas.isDrawingMode = true
 			let eraser = new fabric.EraserBrush(canvas)
             canvas.freeDrawingBrush = eraser
-			brushIndicator.set({fill: '#fff'});
+			pencilbtnStyle.value.background = `rgb(255,255,255)`
 			canvas.requestRenderAll();
 			canvas.freeDrawingBrush.isEraser = true
 			canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
+			setPencilWidth()
 		}
 		let deleteObj = ()=> {
 			// if(!canvas.getActiveObjects()){
@@ -283,6 +280,9 @@ export default defineComponent({
 			clearTimeout(setTimeOutWidth)
 			setTimeOutWidth = setTimeout(()=>{
 				canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])
+				pencilbtnStyle.value.height = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
+				pencilbtnStyle.value.width = canvasBtn.canvasPencilWidth[canvasBtn.canvasState]+'px'
+
 			},300)
 		}
 		let setTimeSubmit = null
@@ -294,11 +294,10 @@ export default defineComponent({
 		}
 		let updateCanvasState = (str) =>{
 			if(str != 'mouseUp'){
-				canvas.remove(brushIndicator)
+				// editFrontBackPencilbtn.value.style.display = 'none'
 			}else{
 				createSetTimeSubmit()
 			}
-			if(canvas.contains(brushIndicator))canvas.remove(brushIndicator)
 			const canvasAsJson = JSON.stringify(canvas.toJSON());
 			normalCanvasState.value.push(canvasAsJson);
 		}
@@ -364,7 +363,6 @@ export default defineComponent({
 					width: Math.round(exportWH * ratio[0]),
 					height: Math.round(exportWH * ratio[1]),
 				}
-				console.log(data);
 				segmentImage(mark,full,size).then((rv)=>{
 					// console.log(rv.targetFrontUrl,rv.targetBackUrl)
 					props.patchData.front[imgDomIndex].imageUrl = rv.targetFrontUrl
@@ -381,6 +379,8 @@ export default defineComponent({
         return {
             presentState,
 			loadingShow,
+			imgData,
+			pencilbtnStyle,
             t,
 			...toRefs(canvasBtn),
 			rgba,
@@ -432,6 +432,73 @@ export default defineComponent({
 			
 		}
 	}
+	.editFrontBack_center_btn{
+		z-index: 2;
+		left: 50%;
+		// transform: translate(-50%,-135%);
+		// transition: all .3s;
+		padding: 1rem 1.5rem;
+		transform: translate(-50%,0);
+		position: relative;
+		width: 100%;
+		flex-direction: row;
+		input{
+			// width: 100%;
+			flex: 1;
+		}
+		.icon-xiala{
+			position: absolute;	
+			width: 2rem;
+			bottom: 0;
+			transform: translate(-50%, 90%);
+			left: 50%;
+			width: 6rem;
+			background: #fff;
+			text-align: center;
+			cursor: pointer;
+			&.icon-xiala::before{
+				transition: all .3s;
+			}
+			&.btnRotate::before{
+				transform: rotate(180deg);
+				display: block;
+			}
+		}
+		.editFrontBack_center_btn_colorRed,.editFrontBack_center_btn_colorGreen{
+			width: 4rem;
+			height: 2rem;
+			border-radius: 4px;
+			margin: 0 .5rem;
+			cursor: pointer;
+			padding: .5rem 1;
+			&.active{
+				border: 2px solid;
+				border-radius: .4rem;
+			}
+		}
+		.editFrontBack_center_btn_colorRed{
+			background: rgba(255,0,0);
+		}
+		.editFrontBack_center_btn_colorGreen{
+			background: rgba(0,255,0);
+		}
+		i{
+			font-size: 2.5rem;
+			cursor: pointer;
+			width: 4rem;
+			height: 4rem;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			&.active{
+				border: 1px solid;
+				border-radius: .4rem;
+			}
+		}
+		&.spread{
+			transform: translate(-50%,0);
+		}
+	}
 	.exportCanvasBox_center{
 		height: 100%;
 		flex: 1;
@@ -440,75 +507,37 @@ export default defineComponent({
 		overflow: hidden;
 		background: #e6e6e6;
 		// overflow: scroll;
-		.editFrontBack_center_btn{
+		
-			z-index: 2;
-			left: 50%;
-			transform: translate(-50%,-135%);
-			transition: all .3s;
-			padding: 1rem 1.5rem;
-			// position: relative;
-			input{
-				width: 100%;
-				margin-top: 1rem;
-			}
-			.icon-xiala{
-				position: absolute;	
-				width: 2rem;
-				bottom: 0;
-				transform: translate(-50%, 90%);
-				left: 50%;
-				width: 6rem;
-				background: #fff;
-				text-align: center;
-				cursor: pointer;
-				&.icon-xiala::before{
-					transition: all .3s;
-				}
-				&.btnRotate::before{
-					transform: rotate(180deg);
-					display: block;
-				}
-			}
-			.editFrontBack_center_btn_colorRed,.editFrontBack_center_btn_colorGreen{
-				width: 4rem;
-				height: 2rem;
-				border-radius: 4px;
-				margin: 0 .5rem;
-				cursor: pointer;
-				padding: .5rem 1;
-				&.active{
-					border: 2px solid;
-					border-radius: .4rem;
-				}
-			}
-			.editFrontBack_center_btn_colorRed{
-				background: rgba(255,0,0);
-			}
-			.editFrontBack_center_btn_colorGreen{
-				background: rgba(0,255,0);
-			}
-			i{
-				font-size: 2.5rem;
-				cursor: pointer;
-				width: 4rem;
-				height: 4rem;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				&.active{
-					border: 1px solid;
-					border-radius: .4rem;
-				}
-			}
-			&.spread{
-				transform: translate(-50%,0);
-			}
-		}
 		:deep(.canvas-container){
 			left: 50%;
 			top: 50%;
 			transform: translate(-50%,-50%);
-			background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
+			opacity: .5;
+			// background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
+		}
+		.editFrontBack_bgImg{
+			position: absolute;
+			left: 50%;
+			top: 50%;
+			transform: translate(-50%,-50%);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 100%;
+			height: 100%;
+			img{
+				height: 100%;
+				width: 100%;
+				object-fit: contain;
+			}
+		}
+		.editFrontBack_pencilbtn{
+			position: absolute;
+			z-index: 1;
+			border-radius: 50%;
+			border: 1px solid #000;
+			pointer-events: none;
+			transform: translate(-50%,-50%);
 		}
 	}
 	.exportCanvasBox_center:hover{

src/component/Detail/setDesignItem.vue

@@ -28,10 +28,10 @@
 				</div>
 				<div class="designOpenrtion_btn">
 					<ul v-for="item,index in frontBack.front" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))">
-						<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',getMousePosition($event,false))" @touchstart.stop="itemSizeMousedown('top',getMousePosition($event,true))"></li>
+						<li class="designOpenrtion_btn_top" @mousedown.stop="itemSizeMousedown('top',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('top',getMousePosition($event,true))"></li>
-						<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',getMousePosition($event,false))" @touchstart.stop="itemSizeMousedown('bottom',getMousePosition($event,true))"></li>
+						<li class="designOpenrtion_btn_bottom" @mousedown.stop="itemSizeMousedown('bottom',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('bottom',getMousePosition($event,true))"></li>
-						<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',getMousePosition($event,false))" @touchstart.stop="itemSizeMousedown('left',getMousePosition($event,true))"></li>
+						<li class="designOpenrtion_btn_left" @mousedown.stop="itemSizeMousedown('left',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('left',getMousePosition($event,true))"></li>
-						<li class="designOpenrtion_btn_right" @mousedown.stop="itemSizeMousedown('right',getMousePosition($event,false))" @touchstart.stop="itemSizeMousedown('right',getMousePosition($event,true))"></li>
+						<li class="designOpenrtion_btn_right" @mousedown.stop="itemSizeMousedown('right',getMousePosition($event,false))" @touchstart.passive="itemSizeMousedown('right',getMousePosition($event,true))"></li>
 						<!-- <li class="designOpenrtion_rotote" v-rotote.stop="[index,item.transform]"></li> -->
 					</ul>
 				</div>

src/component/Detail/setDesignItemMobile.vue

@@ -25,10 +25,10 @@
 				</div>
 				<div class="designOpenrtion_btn">
 					<ul v-for="item,index in frontBack.front" :key="item" :class="{active:item.designOpenrtionBtn}" class="designOpenrtion_btn" :style="item.style" @touchstart.passive="itemMoveMousedown(index,$event)">
-						<li class="designOpenrtion_btn_top" @touchstart.stop="itemSizeMousedown('top',$event)"></li>
+						<li class="designOpenrtion_btn_top" @touchstart.passive="itemSizeMousedown('top',$event)"></li>
-						<li class="designOpenrtion_btn_bottom" @touchstart.stop="itemSizeMousedown('bottom',$event)"></li>
+						<li class="designOpenrtion_btn_bottom" @touchstart.passive="itemSizeMousedown('bottom',$event)"></li>
-						<li class="designOpenrtion_btn_left" @touchstart.stop="itemSizeMousedown('left',$event)"></li>
+						<li class="designOpenrtion_btn_left" @touchstart.passive="itemSizeMousedown('left',$event)"></li>
-						<li class="designOpenrtion_btn_right" @touchstart.stop="itemSizeMousedown('right',$event)"></li>
+						<li class="designOpenrtion_btn_right" @touchstart.passive="itemSizeMousedown('right',$event)"></li>
 						<!-- <li class="designOpenrtion_rotote" v-rotote.stop="[index,item.transform]"></li> -->
 					</ul>
 				</div>

src/component/HomePage/ExportModel.vue

@@ -56,7 +56,7 @@
 							<div v-if="item[0] && key == 'likeDesignCollectionList'" class="exportCanvasBox_intro">Selected Design</div>
 							<div v-if="item[0] && key == 'FinalizeImage'" class="exportCanvasBox_intro">Selected Product</div>
 							<div v-if="key == 'colorBoards'" class="exportCanvasBox_item_colorBor">
-								<div v-for="colorItem in item"  class="exportCanvasBox_item_color" :class="{active:colorItem.upScaleChecked}" draggable="true" @dragstart="onDragstart(key,colorItem)" @click="isMoible?setDragstart(key,colorItem):''">
+								<div v-for="colorItem in item"  class="exportCanvasBox_item_color" :class="{active:colorItem.upScaleChecked}" draggable="true" @dragstart="onDragstart(key,colorItem)" @click.stop="isMoible?setDragstart(key,colorItem):''">
 									<div class="color_content" v-if="colorItem.gradient" :style="{height:'10rem','background-image':colorItem?.gradient?`linear-gradient(${colorItem?.gradient.angle}deg,${setGradient(colorItem?.gradient)}`:'none'}"></div>
 									<div v-else>
 										<div class="exportCanvasBox_item_BGcolor" :style="{'background-color': 'rgb('+colorItem.rgbValue.r+','+colorItem.rgbValue.g+','+colorItem.rgbValue.b+')'}"></div>
@@ -73,7 +73,7 @@
 								:class="[key == 'disposeMoodboard'?'exportCanvasBox_item_dispose':'',imgItem?.upScaleChecked?'active':'']"
 								draggable
 								@dragstart="onDragstart(key,imgItem)"
-								@click="isMoible?setDragstart(key,imgItem):''"
+								@click.stop="isMoible?setDragstart(key,imgItem):''"
 							>
 								<div class="exportCanvasBox_img">
 									<img :src="key == 'likeDesignCollectionList'?imgItem?.designOutfitUrl:imgItem?.imgUrl" alt="" />
@@ -82,7 +82,84 @@
 						</div>
 					</div>
 				</div>
-                <div class="exportCanvasBox_left_tool exportCanvasBox_title">
+				<div class="exportCanvasBox_operation_bor_item exportCanvasBox_left_tool_item_column">
+					<label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
+						<div >{{ $t('exportModel.Color') }}</div>
+						<input type="color" @input="setPencilColor" v-model="canvasPencilColor">
+					</label>
+					<label v-show="operation != 'move'">
+						<div >{{ $t('exportModel.Size') }}:</div>
+						<input @change="setFontFamily" type="range" @input="setPencilWidth" min="3" max="50" v-model="canvasPencilWidth[operation]">
+					</label>
+					<label v-show="operation == 'pencil'">
+						<div >{{ $t('exportModel.Brushwork') }}:</div>
+						<a-select ref="select" class="label_select" size="small" v-model:value="brushworkValue"
+							style="flex: 1"
+							@change="brushworkChange"
+							>
+							<!-- v-model:value="brushwork" -->
+							<a-select-option class="label_select_item" v-for="item in brushList" :value="item.value">
+								<img :src="item.url" alt="">
+							</a-select-option>
+						</a-select>
+					</label>
+					<label v-show="operation == 'texture'" class="texture">
+						<div >{{ $t('exportModel.Texture') }}:</div>
+						<a-select ref="select" class="label_select" size="small" v-model:value="textureValue"
+							style="flex: 1"
+							@change="textureValueChange"
+							>
+							<!-- v-model:value="brushwork" -->
+							<a-select-option class="label_select_item" v-for="item in textureList" :value="item.value">
+								<img :src="item.url" alt="">
+							</a-select-option>
+						</a-select>
+					</label>
+					<label v-show="operation != 'pencil' && operation != 'eraser'&&operation != 'move'&&operation != 'text'&&operation != 'texture'&&operation != ''">
+						<div >{{ $t('exportModel.FillBack') }}:</div>
+						<div class="exportCanvasBox_left_tool_item leftAlign">
+							<i class="icon iconfont icon-tuceng1" @click="setOperationMode('fill')" :class="{active:operationMode == 'fill'}"></i>
+							<i class="icon iconfont icon-tuceng" @click="setOperationMode('border')" :class="{active:operationMode == 'border'}"></i>
+						</div>
+					</label>
+					<label v-show="operation === 'move'">
+						<div >{{ $t('exportModel.Layer') }}:</div>
+						<div class="exportCanvasBox_left_tool_item top">
+							<i class="icon iconfont icon-shangyiceng" @click="setLayerIndex('Front')"></i>
+							<i class="icon iconfont icon-shangyiceng2" @click="setLayerIndex('Forward')"></i>
+							<i class="icon iconfont icon-xiayiceng" @click="setLayerIndex('Backwards')"></i>
+							<i class="icon iconfont icon-shangyiceng1" @click="setLayerIndex('Back')"></i>
+						</div>
+					</label>
+					<!-- <label v-show="allSelectWidth > -1 && operation != 'move'">
+						<div >{{ $t('exportModel.Width') }}</div>
+						<input type="number" @input="setAllSelectWidth" v-model="allSelectWidth">
+					</label> -->
+					<label v-show="(operation == '' || operation == 'text' || textDataShow) && operation != 'move'">
+						<div>Font Family</div>
+						<a-select ref="select" class="label_select" size="small" v-model:value="fontFamily"
+							style="flex: 1"
+							@change="setFontFamily"
+							>
+							<!-- v-model:value="brushwork" -->
+							<a-select-option class="label_select_item" v-for="item in textFontFamilyList" :style="{'font-family':item.value}" :value="item.value">
+								{{item.name}}
+							</a-select-option>
+						</a-select>
+					</label>
+					<!-- <label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
+						<div >{{ $t('exportModel.Height') }}</div>
+						<input type="number" @input="setPencilColor" v-model="canvasPencilColor">
+					</label> -->
+				</div>
+				<!-- <div class="exportCanvasBox_title" @click.stop="setCloseNav('move')">
+					{{ $t('exportModel.More') }}
+				</div>
+				 -->
+            </div>
+			<!-- <div @click="toSvg">12312312312</div> -->
+			<div class="exportCanvasBox_center_box exportCanvasBox_left">
+				<div class="exportCanvasBox_left_tool exportCanvasBox_title">
 					<div class="exportCanvasBox_left_tool_item">
 						<i class="icon iconfont icon-chehui" @click="historyState('')"></i>
 						<i class="icon iconfont icon-fanchehui" @click="historyState('reverse')"></i>
@@ -90,11 +167,9 @@
 						<i class="icon iconfont icon-caizhi" @click="setOperation('texture')" :class="{active:operation == 'texture'}"></i>
 						<i class="icon iconfont icon-move" @click="setOperation('move')" :class="{active:operation == 'move'}"></i>
 						<i class="icon iconfont icon-xiangpi_huaban1" @click="setOperation('eraser')" :class="{active:operation == 'eraser'}"></i>
-						<i class="icon iconfont icon-xiala" :class="closeNav.tool?'icon-rotate':''"  @click.stop="setCloseNav('tool')"></i>
+						<!-- <i class="icon iconfont icon-xiala" :class="closeNav.tool?'icon-rotate':''"  @click.stop="setCloseNav('tool')"></i> -->
-					</div>
+
-					<div class="exportCanvasBox_left_tool exportCanvasBox_left_item" :class="{'closeNav' :closeNav.tool}">
+						<i class="icon iconfont icon-xian" @click="setOperation('fold')" :class="{active:operation == 'fold'}"></i>
-						<div class="exportCanvasBox_left_tool_item">
-							<i class="icon iconfont icon-xian" @click="setOperation('fold')" :class="{active:operation == 'fold'}"></i>
 							<i class="icon iconfont icon-checkbox-full" @click="setOperation('rect')" :class="{active:operation == 'rect'}"></i>
 							<!-- <i class="icon iconfont icon-zhixian" @click="setOperation('line')" :class="{active:operation == 'line'}"></i> -->
 							<!-- <i class="icon iconfont icon-circle" @click="setOperation('circle')" :class="{active:operation == 'circle'}"></i> -->
@@ -105,100 +180,29 @@
 								<input type="file" @change="uploadImage">
 							</label>
 							<i class="icon iconfont" @click="setOperation('text')" :class="{active:operation == 'text'}">T</i>
-						</div>
 					</div>
-				</div>
+					<!-- <div class="exportCanvasBox_left_tool exportCanvasBox_left_item" :class="{'closeNav' :closeNav.tool}">
-				<div class="exportCanvasBox_left_tool exportCanvasBox_operation" :class="{'closeNav' :closeNav.move}">
+						<div class="exportCanvasBox_left_tool_item">
-					
+							<i class="icon iconfont icon-xian" @click="setOperation('fold')" :class="{active:operation == 'fold'}"></i>
-					<div class="exportCanvasBox_operation_bor">
+							<i class="icon iconfont icon-checkbox-full" @click="setOperation('rect')" :class="{active:operation == 'rect'}"></i>
-						<div class="exportCanvasBox_operation_bor_btn">
+							<i class="icon iconfont icon-sanjiaoxing" @click="setOperation('triangle')" :class="{active:operation == 'triangle'}"></i>
-							<i class="icon iconfont icon-xiala" :class="closeNav.move?'icon-rotate':''"  @click.stop="setCloseNav('move')"></i>
+							<i class="icon iconfont icon-tx-fill-tuoyuanxing" @click="setOperation('ellipse')" :class="{active:operation == 'ellipse'}"></i>
+							<label class="uploadImage">
+								<i class="icon iconfont icon-shangchuantupian" ></i>
+								<input type="file" @change="uploadImage">
+							</label>
+							<i class="icon iconfont" @click="setOperation('text')" :class="{active:operation == 'text'}">T</i>
 						</div>
-						<div class="exportCanvasBox_operation_bor_item exportCanvasBox_left_tool_item_column">
+					</div> -->
-							<label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
-								<div >{{ $t('exportModel.Color') }}</div>
-								<input type="color" @input="setPencilColor" v-model="canvasPencilColor">
-							</label>
-							<label v-show="operation != 'move'">
-								<div >{{ $t('exportModel.Size') }}:</div>
-								<input @change="setFontFamily" type="range" @input="setPencilWidth" min="3" max="50" v-model="canvasPencilWidth[operation]">
-							</label>
-							<label v-show="operation == 'pencil'">
-								<div >{{ $t('exportModel.Brushwork') }}:</div>
-								<a-select ref="select" class="label_select" size="small" v-model:value="brushworkValue"
-									style="flex: 1"
-									@change="brushworkChange"
-									>
-									<!-- v-model:value="brushwork" -->
-									<a-select-option class="label_select_item" v-for="item in brushList" :value="item.value">
-										<img :src="item.url" alt="">
-									</a-select-option>
-								</a-select>
-							</label>
-							<label v-show="operation == 'texture'" class="texture">
-								<div >{{ $t('exportModel.Texture') }}:</div>
-								<a-select ref="select" class="label_select" size="small" v-model:value="textureValue"
-									style="flex: 1"
-									@change="textureValueChange"
-									>
-									<!-- v-model:value="brushwork" -->
-									<a-select-option class="label_select_item" v-for="item in textureList" :value="item.value">
-										<img :src="item.url" alt="">
-									</a-select-option>
-								</a-select>
-							</label>
-							<label v-show="operation != 'pencil' && operation != 'eraser'&&operation != 'move'&&operation != 'text'&&operation != 'texture'&&operation != ''">
-								<div >{{ $t('exportModel.FillBack') }}:</div>
-								<div class="exportCanvasBox_left_tool_item leftAlign">
-									<i class="icon iconfont icon-tuceng1" @click="setOperationMode('fill')" :class="{active:operationMode == 'fill'}"></i>
-									<i class="icon iconfont icon-tuceng" @click="setOperationMode('border')" :class="{active:operationMode == 'border'}"></i>
-								</div>
-							</label>
-							<label v-show="operation === 'move'">
-								<div >{{ $t('exportModel.Layer') }}:</div>
-								<div class="exportCanvasBox_left_tool_item">
-									<i class="icon iconfont icon-shangyiceng" @click="setLayerIndex('Front')"></i>
-									<i class="icon iconfont icon-shangyiceng2" @click="setLayerIndex('Forward')"></i>
-									<i class="icon iconfont icon-xiayiceng" @click="setLayerIndex('Backwards')"></i>
-									<i class="icon iconfont icon-shangyiceng1" @click="setLayerIndex('Back')"></i>
-								</div>
-							</label>
-							<label v-show="allSelectWidth > -1 && operation != 'move'">
-								<div >{{ $t('exportModel.Width') }}</div>
-								<input type="number" @input="setAllSelectWidth" v-model="allSelectWidth">
-							</label>
-							<label v-show="(operation == '' || operation == 'text' || textDataShow) && operation != 'move'">
-								<div>Font Family</div>
-								<a-select ref="select" class="label_select" size="small" v-model:value="fontFamily"
-									style="flex: 1"
-									@change="setFontFamily"
-									>
-									<!-- v-model:value="brushwork" -->
-									<a-select-option class="label_select_item" v-for="item in textFontFamilyList" :style="{'font-family':item.value}" :value="item.value">
-										{{item.name}}
-									</a-select-option>
-								</a-select>
-							</label>
-							<!-- <label v-show="operation != 'move' && operation != 'eraser' && operation != 'texture'">
-								<div >{{ $t('exportModel.Height') }}</div>
-								<input type="number" @input="setPencilColor" v-model="canvasPencilColor">
-							</label> -->
-						</div>
-					</div>
 				</div>
-				
+				<div class="exportCanvasBox_center">
-				
+					<div class="editFrontBack_pencilbtn" v-show="!isShowMark" :style="pencilbtnStyle"></div>
-				<!-- <div class="exportCanvasBox_title" @click.stop="setCloseNav('move')">
-					{{ $t('exportModel.More') }}
 				</div>
-				 -->
-            </div>
-			<!-- <div @click="toSvg">12312312312</div> -->
-            <div class="exportCanvasBox_center" :style="[isMoible?'overflow: hidden;':'']">
 			</div>
-			<div v-if="isMoible" class="exportCanvasBox_scroll">
+            
+			<!-- <div v-if="isMoible" class="exportCanvasBox_scroll">
 				<div></div>
-			</div>
+			</div> -->
 			<div class="exportCanvasBox_bottom">
 				
 				<div class="exportCanvasBox_left_btn Guide_1_38">
@@ -325,7 +329,14 @@ export default defineComponent({
             width: 400,
             height: 100,
         });
-		
+		let pencilbtnStyle = ref({
+			background:'',
+			width:0+'px',
+			height:0+'px',
+			display:'none',
+			left:0+'px',
+			top:0+'px',
+		})
 		let publish = ref()
 		// canvasWH.value.width = [window.innerWidth/2.4]
 		// canvasWH.value.width = canvasWH.value.width.map(num => Math.round(num / 100) * 100)[0];
@@ -372,12 +383,16 @@ export default defineComponent({
             nextTick().then(async () => {
 				let exportCanvasBoxCanvas = document.querySelector('.Export .exportCanvasBox_center')
 				canvasWH.value.width = exportCanvasBoxCanvas.offsetWidth - 10
-                
+                let canvasBox = document.querySelector(".Export .exportCanvasBox_center");
-                let canvasBox = document.querySelector(
+				let oldCanvasDom = canvasBox.querySelector('.canvas-container')
-                    ".Export .exportCanvasBox_center"
+				let oldCanvasDom1 =  canvasBox.querySelector('canvas')
-                );
+				var canvasDom = document.createElement("canvas");
-                canvasBox.innerHTML = ""; // 清空原有内容
+				document.addEventListener("keydown", setCanvasKeyDown);
-                var canvasDom = document.createElement("canvas");
+				document.addEventListener("keyup", clearCanvasKeyDown);
+				if(oldCanvasDom)oldCanvasDom.remove()
+				if(oldCanvasDom)loadingShow.value = false
+				if(oldCanvasDom1)oldCanvasDom1.remove()
+               
                 canvasBox.appendChild(canvasDom);
                 canvas = new fabric.Canvas(canvasDom, {
                     backgroundColor: "rgba(255, 255, 255)",
@@ -385,7 +400,6 @@ export default defineComponent({
                     height: canvasWH.value.height,
                     isDrawingMode: false, // 开启绘图模式
                 });
-				brushIndicator = createBrushIndicator()
 				canvasOnDrop()//开启鼠标到画布事件
 				if(!fabric.Object.prototype.controls.deleteControl){//设置元素删除
 					JSSetRemoveImage(deleteObject)
@@ -400,11 +414,11 @@ export default defineComponent({
 				//鼠标移动
 				// canvas.wrapperEl.onmouseover = setCanvasKeyDown;//document上添加按下和抬起事件
 				// canvas.wrapperEl.onmouseout  = clearCanvasKeyDown;//document上添加按下和抬起事件
-				canvas.on("mouse:over", event =>setCanvasKeyDown(event));//document上添加按下和抬起事件
+
-				canvas.on("mouse:out", clearCanvasKeyDown);//document上添加按下和抬起事件
+				// canvas.on("mouse:over", event =>setCanvasKeyDown(event));//document上添加按下和抬起事件
+				// canvas.on("mouse:out", clearCanvasKeyDown);//document上添加按下和抬起事件
 
 				canvas.on("mouse:move", event =>setCanvasMove(event));
-				canvas.on("mouse:out", event=>setCanvasOut(event));
 				canvas.on("mouse:down", event=>setCanvasDown(event));
 				canvas.on("mouse:up", event=>setCanvasUp(event));
 
@@ -424,6 +438,7 @@ export default defineComponent({
 				// });
 				initAligningGuidelines(canvas,true)
 				JSchangeType(canvas,'init')
+				pencilbtnStyle.value.background = '#fff'
 				fabric.Object.prototype.cornerSize = 10
 				fabric.Object.prototype.transparentCorners = false 
 				// setCanvasOperation()//设置监听添加修改画布元素，用来做撤回功能
@@ -1093,7 +1108,6 @@ export default defineComponent({
 				if(str == 'loadingCompleted'){
 					// reverseCanvasState.value.push(canvasAsJson);
 				}
-			if(canvas.contains(brushIndicator))canvas.remove(brushIndicator)
 			normalCanvasState.value.push(canvasAsJson);
 			if (isLoadCanvas) {
 				reverseCanvasState.value = []
@@ -1207,22 +1221,29 @@ export default defineComponent({
 			canvas.remove(polyLineBtn)
 			if(str == 'pencil'){
 				setPencil()
+				pencilbtnStyle.value.display = `block`
 			}else if(str == 'move'){
 				JSchangeType(canvas,'init')
 				initAligningGuidelines(canvas,true)
 				setMove()
+				pencilbtnStyle.value.display = `none`
 			}else if(str == 'texture'){
 				setTexture()
+				pencilbtnStyle.value.display = `block`
 			}else if(str == 'eraser'){
 				setEraser()
+				pencilbtnStyle.value.display = `block`
 			}else if(str == 'text'){
 				setMove()
 				setText()
 				JSchangeType(canvas,'init')
+				pencilbtnStyle.value.display = `none`
 			}else if(str){
+				pencilbtnStyle.value.display = `none`
 				canvas.forEachObject((obj) =>obj.selectable = false);
 				canvas.isDrawingMode = false
 			}
+			setPencilWidth()
 		}
 		let _setAllSelectTime = null
 		let setAllSelectWidth = ()=>{
@@ -1336,20 +1357,6 @@ export default defineComponent({
 			}
 
 		}
-		let createBrushIndicator = ()=>{
-			let cator = new fabric.Circle({
-				radius:(canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20)/2,
-				fill: '#fff',
-				stroke: '#000',
-				strokeWidth: 1,
-				originX: 'center',
-				originY: 'center',
-				visible :true,
-				erasable: false,
-			});
-			return cator
-		}
-		let brushIndicator 
 		let hexToRgba=(hex, alpha)=> {
 			const r = parseInt(hex.slice(1, 3), 16);
 			const g = parseInt(hex.slice(3, 5), 16);
@@ -1412,7 +1419,7 @@ export default defineComponent({
 			
             canvas.freeDrawingBrush = pencil
 			canvas.freeDrawingBrush.width = canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20;
-
+			
 			if(brushworkValue.value == 'RibbonBrush' || brushworkValue.value == 'LongfurBrush'){
 				canvas.freeDrawingBrush.width = 1;
 			}
@@ -1424,7 +1431,7 @@ export default defineComponent({
 				canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,1);
 			}
 
-			brushIndicator.set('fill',canvasPencilColor.value)
+			pencilbtnStyle.value.background = canvasPencilColor.value
 			canvas.freeDrawingBrush.isEraser = false
 
 		}
@@ -1437,7 +1444,7 @@ export default defineComponent({
 			canvas.isDrawingMode = true
 			let eraser = new fabric.EraserBrush(canvas)
             canvas.freeDrawingBrush = eraser
-			brushIndicator.set({fill: '#fff'});
+			pencilbtnStyle.value.background = '#fff'
 			canvas.requestRenderAll();
 			canvas.freeDrawingBrush.isEraser = true
 			canvas.freeDrawingBrush.width = canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20;
@@ -1516,7 +1523,7 @@ export default defineComponent({
 				if(canvas.freeDrawingBrush.isEraser){
 
 				}else{
-					brushIndicator.set({fill: canvasPencilColor.value});
+					pencilbtnStyle.value.background = canvasPencilColor.value
 				}
 				if(brushworkValue.value == 'Marking'){
 					canvas.freeDrawingBrush.color = hexToRgba(canvasPencilColor.value,.5);
@@ -1538,6 +1545,8 @@ export default defineComponent({
 				}else{
 					canvas.freeDrawingBrush.width = canvasPencilWidth.value[operation.value];
 				}
+				pencilbtnStyle.value.height = canvasPencilWidth.value[operation.value]+'px'
+				pencilbtnStyle.value.width = canvasPencilWidth.value[operation.value]+'px'
 				// setPencil()
 			},300)
 		}
@@ -1560,26 +1569,23 @@ export default defineComponent({
 			var pointer = canvas.getPointer(event.e);
 			if(canvas.isDrawingMode){
 				canvas.setCursor('none');
-				if(!canvas.contains(brushIndicator)){
-					canvas.add(brushIndicator)
-					canvas.bringToFront(brushIndicator);//设置优先级最高
-				}
-				// brushIndicator.fill = canvasPencilColor.value
-				brushIndicator.set({ left: pointer.x, top: pointer.y, visible: true,radius:(canvasPencilWidth.value[operation.value]?canvasPencilWidth.value[operation.value]:20)/2 });
 				
 			}else{
-				if(createPatterningIs){
+                if(createPatterningIs){
-					JScanvasMouseMove(operation.value,event,currentPatterning,downPoint,keyDown)
+                    JScanvasMouseMove(operation.value,event,currentPatterning,downPoint,keyDown)
-				}
+                }
-			}
+            }
+			let canvasBox = document.querySelector(".Export .canvas-container");
+			const rect = canvasBox.getBoundingClientRect();
+			const parentRect = canvasBox.parentElement.getBoundingClientRect();
+			let parentX = rect.left - parentRect.left
+			let parentY = rect.top - parentRect.top
+			pencilbtnStyle.value.left = parentX + pointer.x+'px'
+			pencilbtnStyle.value.top =  parentY + canvasBox.parentElement.scrollTop + pointer.y+'px'
 			canvas.requestRenderAll()
 		}
-		let setCanvasOut = (event)=>{
-			canvas.remove(brushIndicator)//鼠标移出删除绘画范围的圆形
-		}
 		//设置再画布上按下
 		let setCanvasDown = (event)=>{
-			// brushIndicator.set({fill: '#FFF',strokeWidth:0});
 			//设置移动端按下添加元素
 			
 			if(isMoible && present.upScaleChecked){
@@ -1663,7 +1669,7 @@ export default defineComponent({
 			upPoint = event.absolutePointer
 			if(canvas.isDrawingMode){
 				setTimeout(() => {
-					canvas.remove(brushIndicator)
+					// pencilbtnStyle.value.display = `none`
 					updateCanvasState()
 				}, 100);
 			}else{
@@ -1953,6 +1959,7 @@ export default defineComponent({
 			toSvg,
             showUpgradePlan,//当前弹窗是否打开
             canvasWH,//画布初始宽高
+			pencilbtnStyle,//笔触按钮
 			publish,//发布作品广场
 			credits,//积分 用来判断HD导出积分是否够用
             init,//首页点击导出后初始化
@@ -2030,54 +2037,55 @@ export default defineComponent({
 		}
 	},
     watch: {
-        'canvasWH.height':{
+        // 'canvasWH.height':{
-        	handler(newVal,oldVal){
+        // 	handler(newVal,oldVal){
-				if(!this.isMoible){
+		// 		if(!this.isMoible){
-					return
+		// 			return
-				}
+		// 		}
-				let canvasBox = document.querySelector('.exportCanvasBox .exportCanvasBox_center')
+		// 		return
-				let scrollBox = document.querySelector('.exportCanvasBox_scroll div')
+		// 		let canvasBox = document.querySelector('.exportCanvasBox .exportCanvasBox_center')
-				canvasBox.scroll({
+		// 		let scrollBox = document.querySelector('.exportCanvasBox_scroll div')
-					top: 0, // 纵向滚动距离
+		// 		canvasBox.scroll({
-					left: 0, // 横向滚动距离
+		// 			top: 0, // 纵向滚动距离
-				});
+		// 			left: 0, // 横向滚动距离
-				scrollBox.style.marginTop = 0+'px'
+		// 		});
-				let height = canvasBox.offsetHeight / (newVal / canvasBox.offsetHeight )
+		// 		scrollBox.style.marginTop = 0+'px'
-				scrollBox.style.height = height +'px'
+		// 		let height = canvasBox.offsetHeight / (newVal / canvasBox.offsetHeight )
-				let scale = (newVal - canvasBox.offsetHeight) / (canvasBox.offsetHeight - height)
+		// 		scrollBox.style.height = height +'px'
+		// 		let scale = (newVal - canvasBox.offsetHeight) / (canvasBox.offsetHeight - height)
 				
 
-				let mousedown = (event)=>{//按下
+		// 		let mousedown = (event)=>{//按下
-					let position = {
+		// 			let position = {
-						y:event.touches[0].screenY,
+		// 				y:event.touches[0].screenY,
-						top : scrollBox.style.marginTop?scrollBox.style.marginTop.split('px')[0]*1:0
+		// 				top : scrollBox.style.marginTop?scrollBox.style.marginTop.split('px')[0]*1:0
-					}
+		// 			}
-					// let top = 
+		// 			// let top = 
-					let scrollMousemove = (e)=>{
+		// 			let scrollMousemove = (e)=>{
-						let height = scrollBox.style.height.split('px')[0]*1
+		// 				let height = scrollBox.style.height.split('px')[0]*1
-						let offsetTop = position.top+e.touches[0].screenY - position.y
+		// 				let offsetTop = position.top+e.touches[0].screenY - position.y
-						offsetTop = offsetTop <= 0? 0 : offsetTop
+		// 				offsetTop = offsetTop <= 0? 0 : offsetTop
-						offsetTop = height+offsetTop >= canvasBox.offsetHeight? canvasBox.offsetHeight - height : offsetTop
+		// 				offsetTop = height+offsetTop >= canvasBox.offsetHeight? canvasBox.offsetHeight - height : offsetTop
-						scrollBox.style.marginTop = offsetTop+'px'
+		// 				scrollBox.style.marginTop = offsetTop+'px'
-						canvasBox.scroll({
+		// 				canvasBox.scroll({
-							top: offsetTop*scale, // 纵向滚动距离
+		// 					top: offsetTop*scale, // 纵向滚动距离
-							left: 0, // 横向滚动距离
+		// 					left: 0, // 横向滚动距离
-						});
+		// 				});
-					}
+		// 			}
-					let mouseup = ()=>{//抬起
+		// 			let mouseup = ()=>{//抬起
-						window.removeEventListener('touchmove',scrollMousemove)
+		// 				window.removeEventListener('touchmove',scrollMousemove)
-						scrollBox.removeEventListener('touchend',mouseup)
+		// 				scrollBox.removeEventListener('touchend',mouseup)
-					}
+		// 			}
-					window.addEventListener('touchmove',scrollMousemove)
+		// 			window.addEventListener('touchmove',scrollMousemove)
-					scrollBox.addEventListener('touchend',mouseup)
+		// 			scrollBox.addEventListener('touchend',mouseup)
-				}
+		// 		}
-				scrollBox.removeEventListener('touchstart',mousedown)
+		// 		scrollBox.removeEventListener('touchstart',mousedown)
-				scrollBox.addEventListener('touchstart',mousedown)
+		// 		scrollBox.addEventListener('touchstart',mousedown)
 				
 
 				
-        	}
+        // 	}
-        },
+        // },
     },
     mounted() {},
 
@@ -2108,7 +2116,7 @@ export default defineComponent({
         .exportCanvasBox_title {
             margin-bottom: .5rem;
             font-size: 1.8rem;
-            font-weight: 600;
+            // font-weight: 600;
 			// margin-top: 2rem;
 			padding-top: 2rem;
 			display: flex;
@@ -2119,6 +2127,7 @@ export default defineComponent({
 			background: #f9fafb;
 			z-index: 2;
 			align-items: flex-start;
+			margin: 0 2rem;
 			
         }
 		.exportCanvasBox_intro{
@@ -2131,12 +2140,17 @@ export default defineComponent({
         .exportCanvasBox_left {
 			width: 100%;
 			height: auto;
+			.exportCanvasBox_left_tool{
+				margin: 0;
+			}
 			label {
                 display: flex;
 				align-items: center;
-				width: 30%;
+				width: 23%;
                 div {
-                    width: 8rem;
+                    width: auto;
+					margin-right: 2rem;
+					white-space: nowrap;
                 }
                 input,select {
                     // width: 10em;
@@ -2176,12 +2190,18 @@ export default defineComponent({
 			flex-wrap: wrap;
 			align-items: flex-start;
 			position: relative;
+			flex-direction: row;
 			>label{
 				width: 20%;
 			}
 			.exportCanvasBox_title {
-				margin: 0 4rem;
+				// margin: 0 4rem;
 				position: relative;
+				.exportCanvasBox_left_tool_item{
+					display: flex;
+					flex-direction: column;
+					
+				}
 			}
             .exportCanvasBox_left_item{
 				overflow: hidden;
@@ -2199,61 +2219,7 @@ export default defineComponent({
 				top: 7rem;
 				position: absolute;
 			}
-			.exportCanvasBox_operation{
+			
-				left: auto;
-				right: 0;
-				z-index: 2;
-				position: absolute;
-				top: 7rem;
-				max-height: 30rem;
-				height: auto;
-				border: none;
-				background: none;
-				.exportCanvasBox_operation_bor_btn{
-					// transform: translateX(-100%);
-					// position: absolute;
-					border: 1px solid;
-					cursor: pointer;
-					width: 4rem;
-					height: 4rem;
-					background: #fff;
-					i{
-						width: 100%;
-						height: 100%;
-						display: flex;
-						align-items: center;
-						justify-content: center;
-						transform: rotate(90deg);
-						&.icon-rotate{
-							transform: rotate(270deg);
-						}
-					}
-				}
-				.exportCanvasBox_operation_bor{
-					overflow: hidden;
-					position: initial;
-					transform: translateX(calc(100% - 4rem));
-					display: block;
-					transition: all .3s;
-					border: none;
-					display: flex;
-					align-items: flex-start;
-					background: rgba(0, 0, 0, 0);
-					.exportCanvasBox_operation_bor_item{
-						background: #fff;
-						border: 1px solid;
-						width: 28rem;
-					}
-					label{
-						width: 100%;
-					}
-				}
-				&.closeNav{
-					.exportCanvasBox_operation_bor{
-					transform: translateX(0%);
-				}
-				}
-			}
             .exportCanvasBox_imgbor {
 				// height: auto;
 				width: 20rem;
@@ -2321,46 +2287,54 @@ export default defineComponent({
 					}
                 }
             }
-			.exportCanvasBox_left_tool{
+			.exportCanvasBox_operation_bor_item{
-			
+				flex: 1;
-				.exportCanvasBox_left_tool_item_column{
+				margin-left: 8rem;
-					flex-direction: column;
+				display: flex;
-					padding: 1rem;
+				label{
+					margin-right: 2rem;
+				}
+			}
+			.exportCanvasBox_left_tool_item{
+				display: flex;
+				flex: 1;
+				flex-wrap: wrap;
+				justify-content: space-between;
+				align-items: center;
+
+				flex-direction: row;
+				flex-wrap: nowrap;
+				&.leftAlign{
+					justify-content: flex-start;
+				}
+				&.leftAlign{
+					justify-content: flex-start;
 				}
-				.exportCanvasBox_left_tool_item{
-					display: flex;
-					flex: 1;
-					flex-wrap: wrap;
-					justify-content: space-between;
-					align-items: center;
-					&.leftAlign{
-						justify-content: flex-start;
-					}
 				
-					i{
+				i{
-						font-size: 2.5rem;
+					font-size: 2.5rem;
-						cursor: pointer;
+					cursor: pointer;
-						width: 4rem;
+					width: 4rem;
-						height: 4rem;
+					height: 4rem;
-						display: flex;
+					display: flex;
-						align-items: center;
+					align-items: center;
-						justify-content: center;
+					justify-content: center;
-						flex-shrink: 0;
+					flex-shrink: 0;
-						&.active{
+					&.active{
-							border: 1px solid;
+						border: 1px solid;
-							border-radius: .4rem;
+						border-radius: .4rem;
-						}
 					}
-					.uploadImage{
-						width: 4rem;
-						height: 4rem;
-						input{
-							height: 0;
-							border: none;
-						}
-					}
-					
 				}
+				.uploadImage{
+					width: 4rem;
+					height: 4rem;
+					input{
+						height: 0;
+						width: 0;
+						border: none;
+					}
+				}
+				
 			}
         }
 		.exportCanvasBox_bottom{
@@ -2393,10 +2367,44 @@ export default defineComponent({
 				}
 			}
 		}
+		.exportCanvasBox_center_box{
+			display: flex;
+			overflow: hidden;
+		}
         .exportCanvasBox_center {
 			flex: 1;
             height: 100%;
+            overflow-y: auto;
             overflow-x: hidden;
+			position: relative;
+			.editFrontBack_pencilbtn{
+				position: absolute;
+				z-index: 1;
+				border-radius: 50%;
+				border: 1px solid #000;
+				pointer-events: none;
+				transform: translate(-50%,-50%);
+			}
+			&.exportCanvasBox_center::-webkit-scrollbar-button:single-button{
+			}
+			&.exportCanvasBox_center::-webkit-scrollbar {
+				/* 竖轴的宽度 */
+				width: 2rem;
+				/* 横轴的高度 */
+				height: 1rem;
+				transition: all .3s;
+			}
+			/* 进度 */
+			&.exportCanvasBox_center::-webkit-scrollbar-thumb {
+				border-radius: 1rem;
+				background: #543087;
+			}
+			/* 轨道 */
+			&.exportCanvasBox_center::-webkit-scrollbar-track {
+				border-radius: 1rem;
+				background: rgba(84, 48, 135,.2);
+					// background: rgba(238, 238, 244, 0);
+			}
         }
 		.exportCanvasBox_scroll{
 			height: 100%;

src/component/HomePage/MoodboardUpload.vue

@@ -406,6 +406,12 @@ export default defineComponent({
                     this.store.state.UploadFilesModule.allBoardData
                         .disposeMoodboard
                 )
+            );
+			let moodboardPosition = JSON.parse(
+                JSON.stringify(
+                    this.store.state.UploadFilesModule.allBoardData
+                        .moodboardPosition
+                )
             );
 			let setboard = {
 				generate:[] as any,
@@ -425,6 +431,7 @@ export default defineComponent({
 			this.store.commit("setMoodboardMaterialFiles", setboard.material);
 			this.store.commit("setMoodboardFile", setboard.moodboard);
 			this.store.commit("setDisposeMoodboard", disposeMoodboard[0]);
+			this.store.commit("setDisposeMoodboardPosition",moodboardPosition);
 			this.fileList = setboard.moodboard
         },
 
@@ -449,81 +456,84 @@ export default defineComponent({
 			
         },
 		async layout(){
-			
 			if(this.loadingShow)return
-			this.loadingShow = true
+			await new Promise((resolve, reject) => {
-			this.store.commit("setDisposeMoodboard", []);
+				this.loadingShow = true
-			let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
+				this.store.commit("setDisposeMoodboard", []);
-			this.layoutList = arr
+				let arr = JSON.parse(JSON.stringify(this.store.state.UploadFilesModule.moodboard))
-			var random = Math.round(Math.random()*(this.moodb_[arr.length-1].length-1))
+				this.layoutList = arr
-			let moodb =  this.moodb_[arr.length-1][random]
+				var random = Math.round(Math.random()*(this.moodb_[arr.length-1].length-1))
-			if( moodb.filter((item,index)=> item == 'w2h1').length != 0  && arr.length > 4){
+				let moodb =  this.moodb_[arr.length-1][random]
-				this.flex_direction = true
+				if( moodb.filter((item,index)=> item == 'w2h1').length != 0  && arr.length > 4){
-			}else{
+					this.flex_direction = true
-				this.flex_direction = false
+				}else{
-			}
+					this.flex_direction = false
-			if(this.moodb_[arr.length-1].length != 1){
-				if(JSON.stringify(this.moodb_className) == JSON.stringify(this.moodb_[arr.length-1][random])){
-					this.loadingShow = false
-					this.layout()
-					return
 				}
-			}
+				if(this.moodb_[arr.length-1].length != 1){
-			this.edieShow = true
+					if(JSON.stringify(this.moodb_className) == JSON.stringify(this.moodb_[arr.length-1][random])){
-			if(this.moodb_[arr.length-1].length == 2){
-				this.moodb_className = this.moodb_[arr.length-1][0]
-			}else{
-				this.moodb_className = this.moodb_[arr.length-1][random]
-			}
-			this.layoutOpen = true
-			 //提交模板
-			// this.loadingShow = true
-			this.layoutList.forEach((v:any)=>{
-				v.setPitch = false
-			})
-			nextTick().then(()=>{
-				let layoutCentent = document.getElementById('modal_img')
-				domTurnImg(layoutCentent).then((rv)=>{
-					let file = rv
-					let param = new FormData(); 
-					param.append('inPin','0')
-					param.append('level1Type','Moodboard')
-					param.append('gender','')
-					param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
-					param.append('file',file);
-					let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
-					Https.axiosPost(Https.httpUrls.elementUpload,param,config)
-					.then((rv: any) => {
-							let img:any = rv
-							img.imgUrl = rv.url
-							img.resData = JSON.parse(JSON.stringify(img))
-							this.store.commit("setDisposeMoodboard", img);
-							let obj = {
-								imgStyle:[],
-								domStyle:[],
-								borStyle:[],
-								rototeStyle:[],
-								translateStyle:[],
-								angleTRStyle:[],
-								angleTLStyle:[],
-								angleBRStyle:[],
-								angleBLStyle:[],
-								class:this.moodb_className,
-							}
-							console.log(123123213);
-							
-							this.store.commit("setDisposeMoodboardPosition", obj);
-							this.loadingShow = false
-						}
-					).catch(rv=>{
 						this.loadingShow = false
-					})
+						this.layout()
-					if(this.driver__.driver){
+						return resolve('')
-						driverObj__.moveNext()
 					}
+				}
+				this.edieShow = true
+				if(this.moodb_[arr.length-1].length == 2){
+					this.moodb_className = this.moodb_[arr.length-1][0]
+				}else{
+					this.moodb_className = this.moodb_[arr.length-1][random]
+				}
+				this.layoutOpen = true
+				//提交模板
+				// this.loadingShow = true
+				this.layoutList.forEach((v:any)=>{
+					v.setPitch = false
 				})
-				
+				nextTick().then(()=>{
-			})			    
+					let layoutCentent = document.getElementById('modal_img')
+					let obj = {
+						imgStyle:[],
+						domStyle:[],
+						borStyle:[],
+						rototeStyle:[],
+						translateStyle:[],
+						angleTRStyle:[],
+						angleTLStyle:[],
+						angleBRStyle:[],
+						angleBLStyle:[],
+						class:this.moodb_className,
+					}
+					this.store.commit("setDisposeMoodboardPosition", obj);
+					let moodboardPosition = this.store.state.UploadFilesModule.moodboardPosition
+					domTurnImg(layoutCentent).then((rv)=>{
+						let file = rv
+						let param = new FormData(); 
+						param.append('inPin','0')
+						param.append('level1Type','Moodboard')
+						param.append('gender','')
+						param.append('moodboardPosition',JSON.stringify(moodboardPosition))
+						param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
+						param.append('file',file);
+						let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
+						Https.axiosPost(Https.httpUrls.elementUpload,param,config)
+						.then((rv: any) => {
+								let img:any = rv
+								img.imgUrl = rv.url
+								img.resData = JSON.parse(JSON.stringify(img))
+								this.store.commit("setDisposeMoodboard", img);
+								this.loadingShow = false
+								resolve('')
+							}
+						).catch(rv=>{
+							this.loadingShow = false
+						})
+						if(this.driver__.driver){
+							driverObj__.moveNext()
+						}
+					})
+					
+				})			
+			})
+			    
 		},
 		setmoodbClass(val:any){
 			this.moodb_className = val

src/component/HomePage/layout.vue

@@ -24,7 +24,7 @@
 					</div>
 				</div>
 				<div class="layout_nav">
-					<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @mousedown="setpitch(item,index)" @touchstart.stop="setpitch(item,index)">
+					<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @mousedown="setpitch(item,index)" @touchstart.passive="setpitch(item,index)">
 						<img :src="item.imgUrl">
 					</div>
 				</div>
@@ -143,8 +143,8 @@ export default defineComponent({
 		let layoutList:any = ref([])
 		const content:any = ref<HTMLElement | null>(null);
 		let loadingShow = ref(false)
-		let styleObj = computed(()=>{
+		let styleObj:any = computed(()=>{
-			return store.state.UploadFilesModule.disposeMoodboardPostition
+			return store.state.UploadFilesModule.moodboardPosition
 		})
 		let moodItemScale = ref(0)
 		let domObj = {
@@ -719,7 +719,7 @@ export default defineComponent({
 			})
 			this.layoutList = parentList
 			this.moodbList = this.moodb[parentList.length-1]
-			this.moodbClassName = this.styleObj.class?this.styleObj.class:[]
+			this.moodbClassName = this.styleObj?.class?this.styleObj?.class:[]
 			this.moodItemScale = this.layoutList[0].zoom*100
 
 			this.initDomStyle()
@@ -828,17 +828,21 @@ export default defineComponent({
         //提交模板
         submitTemplate() {
 			this.loadingShow = true
+			this.setIndex(this.styleObj.domStyle)//index统一排序设置值
+			this.store.commit("setDisposeMoodboardPosition", this.styleObj);
 			this.layoutList.forEach((v:any)=>{
 				v.setPitch = false
 			})
 			nextTick().then(async ()=>{
 				let layoutCentent = document.getElementById('layoutCentent')
+				let moodboardPosition = this.store.state.UploadFilesModule.moodboardPosition
 				domTurnImg(layoutCentent).then((rv)=>{
 					let file =rv
 					let param = new FormData(); 
 					param.append('inPin','0')
 					param.append('gender','')
 					param.append('level1Type','Moodboard')
+					param.append('moodboardPosition',moodboardPosition)
 					param.append('timeZone',Intl.DateTimeFormat().resolvedOptions().timeZone)
 					param.append('file',file);
 					let config:any = {headers:{'Content-Type':'multipart/form-data','Accept':'*/*'  }}
@@ -851,8 +855,6 @@ export default defineComponent({
 							this.store.commit("setDisposeMoodboard", rv);
 
 							this.setDomStyle()
-							this.setIndex(this.styleObj.domStyle)//index统一排序设置值
-							this.store.commit("setDisposeMoodboardPosition", this.styleObj);
 
 						}
 					).catch(rv=>{

src/component/HomePage/layoutMobile.vue

@@ -24,7 +24,7 @@
 					</div>
 				</div>
 				<div class="layoutMobile_nav">
-					<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @touchstart.stop="setpitch(item,index)">
+					<div v-for="item,index in layoutList" :key="item" :class="{active:item.setPitch}" @touchstart.passive="setpitch(item,index)">
 						<img :src="item.imgUrl">
 					</div>
 				</div>
@@ -141,7 +141,7 @@ export default defineComponent({
 		const content:any = ref<HTMLElement | null>(null);
 		let loadingShow = ref(false)
 		let styleObj = computed(()=>{
-			return store.state.UploadFilesModule.disposeMoodboardPostition
+			return store.state.UploadFilesModule.moodboardPosition
 		})
 		let moodItemScale = ref(0)
 		let domObj = {

src/component/LibraryPage/ModelPlacement.vue

@@ -62,12 +62,16 @@
 							</a-select> -->
 							<div>{{ sex.label }}</div>
 						</div>
-                        <div class="placement_point_item" v-for="(point,index) in pointList" :key="index"  >
+                        <div class="placement_point_item" v-for="(point,index) in pointList" :key="index"  @touchmove="touchmove($event)">
                             <div class="ponit_title">{{point.title}}</div>
                             <div class="point_list">
-                                <div class="point_item" v-for="item in point.pointList" :key="item.color" :style="{borderColor:item.color,visibility:item.show?'inherit':'hidden'}" @mousedown="AddDian(item)"><div class="point_block" :style="{background:item.color}"></div></div>
+                                <div class="point_item" v-for="item in point.pointList" :key="item.color" :style="{borderColor:item.color,visibility:item.show?'inherit':'hidden'}" @mousedown="AddDian(item)" @touchstart="AddDian(item)"><div class="point_block" :style="{background:item.color}"></div></div>
                             </div>
                         </div>
+						<div class="placement_point_item placement_point_scale">
+							<div class="cur_picture_opterate_item" @click="changeScale(-1)"><span class="operate_icon icon_font">-</span></div>
+							<div class="cur_picture_opterate_item" @click="changeScale(1)"><span class="operate_icon icon_font">+</span></div>
+						</div>
 						<div class="placement_point_item placement_point_item_btn">
 							<span class="started_btn" @click="setPoint">{{ $t('ModelPlacement.Point') }}</span>
 						</div>
@@ -89,7 +93,7 @@
                         <div class="img_content_block" ref="imgbox">
 							
 							<div :style="{width: imgBox.width+'px', height:imgBox.height +'px',top:imgBox.y+'px',left:imgBox.x+'px',position:'absolute'}">
-								<div :class="['ponit_click',isRemoveStatus?'remove_point_click':'']" v-show="!perviewUrl" v-for="(item,index) in locationList" :key="item" :style="{left:item.left+'px', top:item.top+'px',borderColor:item.color}" @mousedown="getMouseDown($event,item,index)"  @mousemove="startMove($event)">
+								<div :class="['ponit_click',isRemoveStatus?'remove_point_click':'']" v-show="!perviewUrl" v-for="(item,index) in locationList" :key="item" :style="{left:item.left+'px', top:item.top+'px',borderColor:item.color}" @mousedown="getMouseDown($event,item,index)" @touchstart="getMouseDown(getMousePosition($event),item,index)"  @mousemove="mouseMove($event)" @touchmove="touchmove($event)">
 									<div class="placement_add_point_content" :style="{background:item.color}" v-show="!isRemoveStatus"></div>
 									<div class="icon iconfont icon-guanbi" v-show="isRemoveStatus"></div>
 								</div>
@@ -142,6 +146,7 @@ import { VueCropper }  from "vue-cropper";
 import { useStore } from "vuex";
 import { Modal,message } from 'ant-design-vue';
 import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { getMousePosition } from "@/tool/mdEvent";
 import { useI18n } from 'vue-i18n';
 export default defineComponent({
 	components:{
@@ -184,7 +189,8 @@ export default defineComponent({
 			sexList,
 			cropperTime,
 
-			t
+			t,
+			getMousePosition
         }
     },
     data(){
@@ -271,7 +277,8 @@ export default defineComponent({
 
 					}
 					// imgBoxSize.style.backgroundImage = 'url('+require('@assets/images/library/lemaleBG.png')')'
-					imgBoxSize.addEventListener('mousemove',this.startMove)
+					imgBoxSize.addEventListener('mousemove',this.mouseMove)
+					imgBoxSize.addEventListener('touchmove',this.touchmove)
 					this.setImageSize()
 				})
             },800)
@@ -429,7 +436,14 @@ export default defineComponent({
         changeRemoveStatus(){
             this.isRemoveStatus = true
         },
-
+		mouseMove(event:any){
+			let e = getMousePosition(event,false)
+			this.startMove(e)
+		},
+		touchmove(event:any){
+			let e = getMousePosition(event,true)
+			this.startMove(e)
+		},
         startMove(event:any){
             if(this.isRemoveStatus){
                 return
@@ -452,6 +466,7 @@ export default defineComponent({
                     this.currentSign.left = event.clientX - this.imgBox.left - this.imgBox.x - this.moveOriginal.posX -12
                     this.currentSign.top =  event.clientY + scrollTop - this.imgBox.top - this.imgBox.y -this.moveOriginal.posY -12
                     document.addEventListener('mouseup', this.getMouseOver);
+                    document.addEventListener('touchend', this.getMouseOver);
                     this.$forceUpdate()
                     this.setBoundarySign()
 					
@@ -513,6 +528,9 @@ export default defineComponent({
             this.startDian = false
             this.currentSign = {}
             document.removeEventListener('mouseup', this.getMouseOver);
+			document.removeEventListener('touchend', this.getMouseOver);
+			document.removeEventListener('mousemove',this.mouseMove)
+			document.removeEventListener('touchmove',this.touchmove)
         },
 
         closeModal(){
@@ -601,7 +619,11 @@ export default defineComponent({
 			}
            
         },
-
+		changeScale(num:any) {
+            num = num || 1;
+            let cropper:any = this.$refs.cropper
+            cropper.changeScale(num);
+        },
         async confrimSubmit(){
             let param = {
                 libraryId:this.printObject.id,
@@ -945,6 +967,25 @@ export default defineComponent({
 					}
 					
                 }
+				.placement_point_scale{
+					justify-content: center;
+					border: 1px solid #9a9a9a;
+					border-radius: 1rem;
+					width: 40%;
+					margin: 0 auto;
+                    margin-bottom: 3rem;
+					div:nth-child(1){
+						border-right: 1px solid #9a9a9a;
+					}
+					div{
+						font-size: 2rem;
+						cursor: pointer;
+						width: 3rem;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+					}
+				}
             }
 
             .placement_content_operate_list{
@@ -1069,7 +1110,7 @@ export default defineComponent({
 					.vue-cropper{
 						.cropper-crop-box{
 							background: #fff;
-							
+							pointer-events: none;
 						}
 					}
                 }

src/store/uploadFile/uploadFile.ts

@@ -6,7 +6,7 @@ import GO from '@/tool/GO';
 interface UploadFiles{
 	moodboard:any,
 	disposeMoodboard:any,
-	disposeMoodboardPostition:any,
+	moodboardPosition:any,
     moodboardFiles:any,
 	moodboardGenerateFiles:any,
 	moodboardMaterialFiles:any,
@@ -30,7 +30,7 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
     state:{
 		moodboard:[],
 		disposeMoodboard:[],
-		disposeMoodboardPostition:{},
+		moodboardPosition:{},
         moodboardFiles:[],
 		moodboardGenerateFiles:[],
 		moodboardMaterialFiles:[],
@@ -60,7 +60,7 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
 			state.disposeMoodboard = [files]
         },
 		setDisposeMoodboardPosition(state,files){
-			state.disposeMoodboardPostition = files
+			state.moodboardPosition = files
         },
 		setMoodboardGenerateFiles(state,files){
 			state.moodboardGenerateFiles = files
@@ -203,7 +203,7 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
         setAllBoardData(state){
             state.allBoardData = {
 				disposeMoodboard:state.disposeMoodboard,
-				disposeMoodboardPostition:state.disposeMoodboardPostition,
+				moodboardPosition:state.moodboardPosition,
                 moodboardFiles:state.moodboard,
                 printboardFiles:state.printboard,
                 colorBoards:state.colorBoards,
@@ -235,7 +235,7 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
             state.marketingSketchFiles = []
             state.moodTemplateId = ''
 			state.disposeMoodboard = []
-			state.disposeMoodboardPostition = {}
+			state.moodboardPosition = {}
 			// state.showSketchboard = []
 			state.chooseIsDesign.value = true
         },
@@ -255,7 +255,7 @@ const UploadFilesModule : Module<UploadFiles,RootState> = {
         },
         clearMoodTemplateId(state){
 			state.disposeMoodboard = []
-			state.disposeMoodboardPostition = {}
+			state.moodboardPosition = {}
         },
     },
     actions:{

src/tool/mdEvent.js

@@ -7,6 +7,7 @@ const getMousePosition = (e,bor,dom) => {
 			offsetY: touch.clientY - e.target.getBoundingClientRect().top,
 			clientX:touch.clientX,
 			clientY:touch.clientY,
+			target:e.target,
 		}
 		if(dom){
 			event.offsetX = touch.clientX - dom.getBoundingClientRect().left
@@ -18,6 +19,7 @@ const getMousePosition = (e,bor,dom) => {
 			offsetY:e.offsetY,
 			clientX:e.clientX,
 			clientY:e.clientY,
+			target:e.target,
 		}
 	}
 	return event

src/tool/util.js

@@ -451,8 +451,6 @@ function segmentImage(markerImage,fullImage,size){
 		marker.onload = () => {
 			ctx1.drawImage(marker,0,0 ,size.width, size.height);
 			full.onload = () => {
-			console.log(full.height,size,full.width);
-
 				ctx2.drawImage(full,0,0, size.width, size.height);
 				segmentImageItem();
 			};

src/views/HomeMain.vue

@@ -375,7 +375,6 @@ export default defineComponent({
 		}
 	},
     mounted() {
-		console.log(this.store);
         let isTest = getCookie('isTest')//获取是否是试用用户
         this.isTest =JSON.parse(isTest)
         let isMurmur = getCookie('isMurmur')//获取是否是试用用户
@@ -719,7 +718,6 @@ export default defineComponent({
 				overflow: hidden;
 				z-index: 2;
 				left: 0;
-				background-color: #000;
 				border-radius: 50%;
 				cursor: pointer;
 				img{

src/views/HomeView/HomeView.vue

@@ -998,6 +998,7 @@ export default defineComponent({
 						name:data.collection.moodTemplateName,
 					}
 				}]:[],
+				moodboardPosition:data.collection.moodboardPosition?data.collection.moodboardPosition:{},
 				moodboardFiles: this.dealViewChooseData(
 					data.collection.moodBoards,"Moodboard"
 				),
@@ -1016,7 +1017,6 @@ export default defineComponent({
 				),
 				
 			};
-			// console.log(data);
 			this.store.commit("setAllBoardDataChoose", collectionData);
 			// this.store.commit('clearShowSketchboard')
 			this.store.commit("setShowSketchboard", data.collection.sketchBoards);

src/views/HomeView/library.vue

@@ -1099,7 +1099,8 @@ export default defineComponent({
 
         //给模特打点编辑
         placementClick(data:any){
-            let placementModal:any = isMoible() ? this.$refs.ModelPlacementMobile : this.$refs.ModelPlacement
+            // let placementModal:any = isMoible() ? this.$refs.ModelPlacementMobile : this.$refs.ModelPlacement
+            let placementModal:any = this.$refs.ModelPlacement
             placementModal.showPlacementModal(data,this.sex)
         },
 		setTextareaShow(){