fix

.env.dev

@@ -6,7 +6,7 @@ NODE_ENV = 'development'
 VUE_APP_BASE_URL = 'https://develop.api.aida.com.hk'
 # VUE_APP_BASE_URL = 'https://www.api.aida.com.hk'
 # 佩佩
-VUE_APP_BASE_URL = 'http://192.168.1.4:5567'
+# VUE_APP_BASE_URL = 'http://192.168.1.4:5567'
 # 海波
 # VUE_APP_BASE_URL = 'http://192.168.1.9:5567'
 

src/component/HomePage/ExportModel.vue

@@ -167,42 +167,36 @@
 						<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-xian" @click="setOperation('fold')" :class="{active:operation == 'fold'}"></i>
+						<label class="uploadImage">
-							<i class="icon iconfont icon-checkbox-full" @click="setOperation('rect')" :class="{active:operation == 'rect'}"></i>
+							<i class="fi fi-br-upload" ></i>
-							<!-- <i class="icon iconfont icon-zhixian" @click="setOperation('line')" :class="{active:operation == 'line'}"></i> -->
+							<input type="file" @change="uploadImage">
-							<!-- <i class="icon iconfont icon-circle" @click="setOperation('circle')" :class="{active:operation == 'circle'}"></i> -->
+						</label>
-							<i class="icon iconfont icon-sanjiaoxing" @click="setOperation('triangle')" :class="{active:operation == 'triangle'}"></i>
+						<i class="icon iconfont" @click="setOperation('text')" :class="{active:operation == 'text'}">T</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>
 						<i class="icon iconfont icon-IC-yehua" @click="setLiquefaction()"></i>
+						<!-- <i class="fi fi-rr-zoom-in" @click="setOperation('zoomIn')" :class="{active:operation == 'zoomIn'}"></i>
+						<i class="fi fi-rr-zoom-out" @click="setOperation('zoomOut')" :class="{active:operation == 'zoomOut'}"></i> -->
+						<i class="icon iconfont icon-xiala" :class="closeNav.tool?'icon-rotate-tool':''"  @click.stop="setCloseNav('tool')"></i>
 					</div>
-					<!-- <div class="exportCanvasBox_left_tool exportCanvasBox_left_item" :class="{'closeNav' :closeNav.tool}">
+					<div class="exportCanvasBox_left_tool exportCanvasBox_left_item" :class="{'closeNav' :closeNav.tool}">
-						<div class="exportCanvasBox_left_tool_item">
+						<div class="exportCanvasBox_left_tool_item exportCanvasBox_left_tool_item_more">
 							<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-checkbox-full" @click="setOperation('rect')" :class="{active:operation == 'rect'}"></i>
-							<i class="icon iconfont icon-sanjiaoxing" @click="setOperation('triangle')" :class="{active:operation == 'triangle'}"></i>
+						<!-- <i class="icon iconfont icon-zhixian" @click="setOperation('line')" :class="{active:operation == 'line'}"></i> -->
-							<i class="icon iconfont icon-tx-fill-tuoyuanxing" @click="setOperation('ellipse')" :class="{active:operation == 'ellipse'}"></i>
+						<!-- <i class="icon iconfont icon-circle" @click="setOperation('circle')" :class="{active:operation == 'circle'}"></i> -->
-							<label class="uploadImage">
+						<i class="icon iconfont icon-sanjiaoxing" @click="setOperation('triangle')" :class="{active:operation == 'triangle'}"></i>
-								<i class="icon iconfont icon-shangchuantupian" ></i>
+						<i class="icon iconfont icon-tx-fill-tuoyuanxing" @click="setOperation('ellipse')" :class="{active:operation == 'ellipse'}"></i>
-								<input type="file" @change="uploadImage">
-							</label>
-							<i class="icon iconfont" @click="setOperation('text')" :class="{active:operation == 'text'}">T</i>
 						</div>
-					</div> -->
+					</div>
 				</div>
 				<div class="exportCanvasBox_center">
 					<div class="editFrontBack_pencilbtn" v-show="!isShowMark" :style="pencilbtnStyle"></div>
-					<div>
+					<!-- <div>
 						<div>
 							<div></div>
 							<span>16:9</span>
 						</div>
-					</div>
+					</div> -->
 				</div>
 				<div class="exportCanvasBox_scroll">
 					<div></div>
@@ -337,7 +331,7 @@ export default defineComponent({
         // let canvasDom = ref()
         let canvasWH = ref({
             width: 400,
-            height: 100,
+            height: 0,
         });
 		let pencilbtnStyle = ref({
 			background:'',
@@ -368,7 +362,8 @@ export default defineComponent({
 			y: 0,
 			height: 0,
 		};
-		let sketchGrouping = 3; //sketch分组
+		let canvasScale = 1; //canvas放大缩小倍率
+		let sketchGrouping = 6; //sketch分组
 		let likeDesign = 4; //整体图分组
 		let disposeMoodboardShow = true;
 		let canvasState = ref()//存放canvas操作
@@ -391,50 +386,9 @@ export default defineComponent({
 				"likeDesignCollectionList",
 				productData.key,
 			];
-			// isShowMark.value = true
+			createCanvas()
-			nextTick(async ()=>{
-				let oldExportCanvas
-				let localCanvas = localStorage.getItem('canvasContent')
-				let localUserlikeGroupId = localStorage.getItem('userlikeGroupId')
-				let currentTime = localStorage.getItem('currentTime')
-				oldExportCanvas = await new Promise((resolve, reject) => {
-					if(localUserlikeGroupId == userlikeGroupId && (new Date().getTime() - currentTime < 21600000)){
-						Modal.confirm({
-							title: useI18.t('exportModel.jsContent8'),
-							okText: 'Yes',
-							cancelText: 'No',
-							mask:false,
-							centered:true,
-							onOk() {
-								localCanvas = localCanvas?JSON.parse(localCanvas):null
-								resolve(localCanvas)
-							},
-							onCancel(){
-								resolve(null)
-							}
-						});
-					}else{
-						resolve(null)
-					}
-				})
-				if(!oldExportCanvas){
-					let data = {
-						userLikeGroupId:userlikeGroupId
-					}
-					oldExportCanvas = await new Promise((resolve, reject) => {
-						Https.axiosPost(Https.httpUrls.exportSearch, data)
-						.then((rv) => {
-							resolve(rv)
-						})
-						.catch((rv) => {
-							resolve(null)
-						});
-					})
-				}
-				createCanvas(oldExportCanvas)
-			})
 		}
-		let setCanvasData = ()=>{
+		let setCanvasData = async (oldExportCanvas)=>{
 			let oldKey = "";
 			let margin = 20; //每个图形边距
 			let maxHeight = 0
@@ -451,114 +405,115 @@ export default defineComponent({
 				canvas.loadFromJSON(oldExportCanvas, () => {});
 				isShowMark.value = false
 			}else{
+				canvasWH.value.height = 500
+				canvas.setHeight(canvasWH.value.height);
 				isShowMark.value = false
+				await nextTick(async ()=>{
+					for (const item of contentKeyList) {
+						for (const key in allBoardData.value) {
+							if (item == key) {
+								//循环渲染顺序
+								let sketchGroupingItem = [];
+								if (
+									item == "moodboardFiles" &&
+									!disposeMoodboardShow
+								) {
+									continue;
+								}
+								for (const [allItemIndex, allItem,] of allBoardData.value[key].entries()) {
+									await new Promise(async (resolve, reject) => {
+										if(!allItem){
+											resolve()
+										}
+										maxHeight = position.y + position.height>maxHeight?position.y +position.height:maxHeight
+										if (key == "colorBoards") {
+											let rect = setGroup(allItem)
+											if (position.x + rect.width > canvasWH.value.width || oldKey != key) {
+												position.x = 0;
+												position.y = maxHeight;
+											}
+											let group = setCanvasColor(position.y,position.x,rect)
+											oldKey = key;
+											position.x += rect.width + margin;
+											position.height = group.height + margin;
+											resolve();
+										} else {
+											let itemCanvasImg = allItem.imgUrl;
+											if (key == "likeDesignCollectionList") {
 												
-				// await nextTick(async ()=>{
+												itemCanvasImg =
-				// 	for (const item of arr) {
+													allItem.designOutfitUrl;
-				// 		for (const key in allBoardData.value) {
+											}
-				// 			if (item == key) {
+											fabric.Image.fromURL(itemCanvasImg,(img) => {
-				// 				//循环渲染顺序
+												if(item == 'likeDesignCollectionList')imgWidth[item] = setImageWidth(key,img); 
-				// 				let sketchGroupingItem = [];
+												let scaleWH = imgWidth[item] / img.width; //计算放到画布上缩小倍率
-				// 				if (
+												if(key == "sketchboardFiles"){
-				// 					item == "moodboardFiles" &&
+													if(allItemIndex == 0){
-				// 					!disposeMoodboardShow
+														position.x = 0;
-				// 				) {
+														position.y = maxHeight;
-				// 					continue;
+													}
-				// 				}
+												}else{
-				// 				for (const [allItemIndex, allItem,] of allBoardData.value[key].entries()) {
+													if (position.x + img.width * scaleWH > canvasWH.value.width || oldKey != key) {
-				// 					await new Promise(async (resolve, reject) => {
+														position.x = 0;
-				// 						if(!allItem){
+														position.y = maxHeight;
-				// 							resolve()
+													}
-				// 						}
+												}
-				// 						maxHeight = position.y + position.height>maxHeight?position.y +position.height:maxHeight
+												setCanvasImage(img,key,position.x,position.y,allItem)//设置图片
-				// 						if (key == "colorBoards") {
+												position.height = img.height * scaleWH + margin;
-				// 							let rect = setGroup(allItem)
+												if (key == "sketchboardFiles") {
-				// 							if (position.x + rect.width > canvasWH.value.width || oldKey != key) {
+													if (sketchGroupingItem.length <sketchGrouping+1) {
-				// 								position.x = 0;
+														sketchGroupingItem.push(JSON.parse(JSON.stringify(position)));
-				// 								position.y = maxHeight;
+													}
-				// 							}
+													if (sketchGroupingItem.length >sketchGrouping) {
-				// 							let group = setCanvasColor(position.y,position.x,rect)
+														let sketchXyIndex = {
-				// 							oldKey = key;
+															maxIndex: 0,
-				// 							position.x += rect.width + margin;
+															maxNum: 0,
-				// 							position.height = group.height + margin;
+															minNum: 999999,
-				// 							resolve();
+															minIndex: 0,
-				// 						} else {
+														};
-				// 							let itemCanvasImg = allItem.imgUrl;
+														sketchGroupingItem.forEach(
-				// 							if (key == "likeDesignCollectionList") {
+															(sketchItem,sketchIndex) => {
+																if (sketchItem.y + sketchItem.height < sketchXyIndex.minNum) {
+																	sketchXyIndex.minNum = sketchItem.y + sketchItem.height
+																	sketchXyIndex.minIndex = sketchIndex;
+																}
+																if (sketchItem.y + sketchItem.height > sketchXyIndex.maxNum) {
+																	sketchXyIndex.maxNum = sketchItem.y + sketchItem.height
+																	sketchXyIndex.maxIndex = sketchIndex;
+																}
+															}
+														);
+														sketchGroupingItem[sketchXyIndex.minIndex].y = sketchXyIndex.minNum
+														// sketchGroupingItem[sketchXyIndex.maxIndex].y = sketchXyIndex.maxNum
+														if (allBoardData.value[key].length == allItemIndex + 1) {
+															maxHeight = sketchXyIndex.maxNum
+														} else {
+															position = sketchGroupingItem[sketchXyIndex.minIndex];
+														}
 													
-				// 								itemCanvasImg =
+													}
-				// 									allItem.designOutfitUrl;
+												}
-				// 							}
+												if(key == "sketchboardFiles" && sketchGroupingItem.length >sketchGrouping){
-				// 							fabric.Image.fromURL(itemCanvasImg,(img) => {
+													}else{
-				// 								if(item == 'likeDesignCollectionList')imgWidth[item] = setImageWidth(key,img); 
+														position.x += img.width * scaleWH + margin;
-				// 								let scaleWH = imgWidth[item] / img.width; //计算放到画布上缩小倍率
+													}
-				// 								if(key == "sketchboardFiles"){
+													img.lock_rotation = true;
-				// 									if(allItemIndex == 0){
+													oldKey = key;
-				// 										position.x = 0;
+													resolve()
-				// 										position.y = maxHeight;
+												canvas.add(img);
-				// 									}
-				// 								}else{
-				// 									if (position.x + img.width * scaleWH > canvasWH.value.width || oldKey != key) {
-				// 										position.x = 0;
-				// 										position.y = maxHeight;
-				// 									}
-				// 								}
-				// 								setCanvasImage(img,key,position.x,position.y,allItem)//设置图片
-				// 								position.height = img.height * scaleWH + margin;
-				// 								if (key == "sketchboardFiles") {
-				// 									if (sketchGroupingItem.length <3) {
-				// 										sketchGroupingItem.push(JSON.parse(JSON.stringify(position)));
-				// 									}
-				// 									if (sketchGroupingItem.length >2) {
-				// 										let sketchXyIndex = {
-				// 											maxIndex: 0,
-				// 											maxNum: 0,
-				// 											minNum: 999999,
-				// 											minIndex: 0,
-				// 										};
-				// 										sketchGroupingItem.forEach(
-				// 											(sketchItem,sketchIndex) => {
-				// 												if (sketchItem.y + sketchItem.height < sketchXyIndex.minNum) {
-				// 													sketchXyIndex.minNum = sketchItem.y + sketchItem.height
-				// 													sketchXyIndex.minIndex = sketchIndex;
-				// 												}
-				// 												if (sketchItem.y + sketchItem.height > sketchXyIndex.maxNum) {
-				// 													sketchXyIndex.maxNum = sketchItem.y + sketchItem.height
-				// 													sketchXyIndex.maxIndex = sketchIndex;
-				// 												}
-				// 											}
-				// 										);
-				// 										sketchGroupingItem[sketchXyIndex.minIndex].y = sketchXyIndex.minNum
-				// 										// sketchGroupingItem[sketchXyIndex.maxIndex].y = sketchXyIndex.maxNum
-				// 										if (allBoardData.value[key].length == allItemIndex + 1) {
-				// 											maxHeight = sketchXyIndex.maxNum
-				// 										} else {
-				// 											position = sketchGroupingItem[sketchXyIndex.minIndex];
-				// 										}
 												
-				// 									}
+											},{ crossOrigin: "Anonymous" });
-				// 								}
+										}
-				// 								if(key == "sketchboardFiles" && sketchGroupingItem.length >2){
+									});
-				// 									}else{
+								}
-				// 										position.x += img.width * scaleWH + margin;
+							}
-				// 									}
+						}
-				// 									img.lock_rotation = true;
+						if(position.y+position.height>canvasWH.value.height){
-				// 									oldKey = key;
+							canvasWH.value.height =  Math.floor(position.y+position.height)
-				// 									resolve()
+							canvas.setHeight(canvasWH.value.height);
-				// 								canvas.add(img);
+						}
-												
+					}
-				// 							},{ crossOrigin: "Anonymous" });
+				})
-				// 						}
-				// 					});
-				// 				}
-				// 			}
-				// 		}
-				// 		if(position.y+position.height>canvasWH.value.height){
-				// 			canvasWH.value.height =  Math.floor(position.y+position.height)
-				// 			canvas.setHeight(canvasWH.value.height);
-				// 		}
-				// 	}
-				// })
 				isShowMark.value = false
 			}
 			updateCanvasState('')//加载完成后记录一下
@@ -566,7 +521,6 @@ export default defineComponent({
         let createCanvas = (oldExportCanvas) => {
             showUpgradePlan.value = true;
 			clearTimeout(submitCanvasContent)
-			canvasWH.value.height = 100
 			normalCanvasState.value = []
 			reverseCanvasState.value = []
 			allBoardData.value.likeDesignCollectionList =
@@ -649,69 +603,47 @@ export default defineComponent({
 				if(driver__.value.driver){
 					driverObj__.moveNext()
 				}
-				
+				nextTick(async ()=>{
-				let canvasBoxDom = document.querySelector('.exportCanvasBox .exportCanvasBox_center')
+					let oldExportCanvas
-				let scrollBox = document.querySelector('.exportCanvasBox_scroll div')
+					let localCanvas = localStorage.getItem('canvasContent')
-				let height = canvasBox.offsetHeight / (canvasWH.value.height / canvasBox.offsetHeight )
+					let localUserlikeGroupId = localStorage.getItem('userlikeGroupId')
-				let scale = (canvasWH.value.height - canvasBoxDom.offsetHeight) / (canvasBoxDom.offsetHeight - height)
+					let currentTime = localStorage.getItem('currentTime')
-				let mouseDownOperation = (event)=>{//按下
+					oldExportCanvas = await new Promise((resolve, reject) => {
-					let position = {
+						if(localUserlikeGroupId == userlikeGroupId && (new Date().getTime() - currentTime < 21600000)){
-						y:event.screenY,
+							Modal.confirm({
-						top : scrollBox.style.marginTop?scrollBox.style.marginTop.split('px')[0]*1:0
+								title: useI18.t('exportModel.jsContent8'),
+								okText: 'Yes',
+								cancelText: 'No',
+								mask:false,
+								centered:true,
+								onOk() {
+									localCanvas = localCanvas?JSON.parse(localCanvas):null
+									resolve(localCanvas)
+								},
+								onCancel(){
+									resolve(null)
+								}
+							});
+						}else{
+							resolve(null)
+						}
+					})
+					if(!oldExportCanvas){
+						let data = {
+							userLikeGroupId:userlikeGroupId
+						}
+						oldExportCanvas = await new Promise((resolve, reject) => {
+							Https.axiosPost(Https.httpUrls.exportSearch, data)
+							.then((rv) => {
+								resolve(rv)
+							})
+							.catch((rv) => {
+								resolve(null)
+							});
+						})
 					}
-						// let top = 
+					setCanvasData(oldExportCanvas)
-					let scrollMousemove = (e)=>{
+				})
-						let height = scrollBox.style.height.split('px')[0]*1
-						let offsetTop = position.top+e.screenY - position.y
-						offsetTop = offsetTop <= 0? 0 : offsetTop
-						offsetTop = height+offsetTop >= canvasBoxDom.offsetHeight? canvasBoxDom.offsetHeight - height : offsetTop
-						scrollBox.style.marginTop = offsetTop+'px'
-						canvasBoxDom.scroll({
-							top: offsetTop*scale, // 纵向滚动距离
-							left: 0, // 横向滚动距离
-						});
-					}
-					let mouseMove = function(event){
-						let e = getMousePosition(event,false)
-						scrollMousemove(e)
-					}
-					let touchmove = function(event){
-						let e = getMousePosition(event,true)
-						scrollMousemove(e)
-					}
-					let mouseup = function(){
-						document.removeEventListener('mousemove',mouseMove)
-						document.removeEventListener('touchmove',touchmove)
-						document.removeEventListener('mouseup',mouseup) 
-						document.removeEventListener('touchend',mouseup) 
-						//移动端
-					}
-					document.addEventListener('mousemove', mouseMove);
-					document.addEventListener('touchmove', touchmove);
-					document.addEventListener('mouseup', mouseup);
-					document.addEventListener('touchend', mouseup);
-
-					// document.addEventListener('touchmove',scrollMousemove)
-					// scrollBox.addEventListener('touchend',mouseup)
-				}
-				canvasBoxDom.addEventListener('scroll', function() {
-					const scrollTop = canvasBoxDom.scrollTop;
-					scrollBox.style.marginTop = scrollTop/scale+'px'
-				});
-				let mousedown = function(event){
-					let e = getMousePosition(event,false)
-					mouseDownOperation(e)
-				}
-
-				let touchstart = function(event){
-					let e = getMousePosition(event,true)
-					mouseDownOperation(e)
-				}
-				scrollBox.addEventListener('mousedown',mousedown)
-				scrollBox.addEventListener('touchstart',touchstart)
-				// scrollBox.removeEventListener('touchstart',mousedown)
-				// scrollBox.addEventListener('touchstart',mousedown)
-				
             });
 			
         };
@@ -751,12 +683,16 @@ export default defineComponent({
 			) {
 				//如果是mood 需要判断用户是否点击layout
 				disposeMoodboardShow = false;
+
+				imgWidth = canvasWH.value.width / 2;
 			}
 			if(key == 'upImgFiles'){
-				imgWidth = canvasWH.value.width / 4;
+				imgWidth = canvasWH.value.width / 8;
+				// imgWidth = canvasWH.value.width / 4;
 			}
 			if (key == "printboardFiles") {
-				imgWidth = canvasWH.value.width / 8;
+				imgWidth = canvasWH.value.width / 14;
+				// imgWidth = canvasWH.value.width / 8;
 			}
 			if (key == "sketchboardFiles"||key == 'moodboardFiles'||key == 'FinalizeImage') {
 				imgWidth =
@@ -768,7 +704,7 @@ export default defineComponent({
 				if(img){
 					let imgObj = JSON.parse(JSON.stringify(img))
 					let height = imgObj.height
-					imgObj.height = canvasWH.value.width / 4 * 1.8
+					imgObj.height = canvasWH.value.width / 8 * 1.8
 					let heightScale = imgObj.height / height
 					imgWidth = imgObj.width * heightScale
 				}
@@ -990,6 +926,7 @@ export default defineComponent({
 						y: 0,
 						height: 0,
 					};
+					canvasWH.value.height = 0
 					operation.value = 'move'
 					operation.value = 'fill'
 				},
@@ -1337,6 +1274,9 @@ export default defineComponent({
 				setText()
 				JSchangeType(canvas,'init')
 				pencilbtnStyle.value.display = `none`
+			}else if(str == 'zoomIn' || str == 'zoomOut'){
+				pencilbtnStyle.value.display = `none`
+				canvas.forEachObject((obj) =>obj.selectable = false);
 			}else if(str){
 				pencilbtnStyle.value.display = `none`
 				canvas.forEachObject((obj) =>obj.selectable = false);
@@ -1692,10 +1632,35 @@ export default defineComponent({
 			pencilbtnStyle.value.top =  parentY + canvasBox.parentElement.scrollTop + pointer.y+'px'
 			canvas.requestRenderAll()
 		}
+		let setCanvasZoom = (opt)=>{
+			console.log(123);
+			
+			let zoom = canvas.getZoom() // 获取画布当前缩放值
+			let num = -100
+			if(operation.value == 'zoomOut') num = 100
+
+			zoom *= 0.999 ** num
+			if (zoom > 20) zoom = 20
+			if (zoom < 0.01) zoom = 0.01
+			
+			// console.log(zoom);
+			canvas.zoomToPoint(
+				{ // 关键点
+				x: opt.e.offsetX,
+				y: opt.e.offsetY
+				},
+				zoom
+			)
+			opt.e.preventDefault()
+			opt.e.stopPropagation()
+		}
 		//设置再画布上按下
 		let setCanvasDown = (event)=>{
 			//设置移动端按下添加元素
-			
+			if(operation.value == 'zoomIn' || operation.value == 'zoomOut'){
+				setCanvasZoom(event)
+				return
+			}
 			if(isMoible && present.upScaleChecked){
 				present.upScaleChecked = false
 				present = {}
@@ -2179,6 +2144,7 @@ export default defineComponent({
     watch: {
         'canvasWH.height':{
         	handler(newVal,oldVal){
+				
 				let canvasBox = document.querySelector('.exportCanvasBox .exportCanvasBox_center')
 				let scrollBox = document.querySelector('.exportCanvasBox_scroll div')
 				if(!canvasBox || !scrollBox)return
@@ -2189,6 +2155,66 @@ export default defineComponent({
 				scrollBox.style.marginTop = 0+'px'
 				let height = canvasBox.offsetHeight / (newVal / canvasBox.offsetHeight )
 				scrollBox.style.height = height +'px'
+				if(oldVal != 0)return
+				let canvasBoxDom = document.querySelector('.exportCanvasBox .exportCanvasBox_center')
+				let scale = (newVal - canvasBoxDom.offsetHeight) / (canvasBoxDom.offsetHeight - height)
+				let mouseDownOperation = (event)=>{//按下
+					let position = {
+						y:event.screenY,
+						top : scrollBox.style.marginTop?scrollBox.style.marginTop.split('px')[0]*1:0
+					}
+						// let top = 
+					let scrollMousemove = (e)=>{
+						let height = scrollBox.style.height.split('px')[0]*1
+						let offsetTop = position.top+e.screenY - position.y
+						offsetTop = offsetTop <= 0? 0 : offsetTop
+						offsetTop = height+offsetTop >= canvasBoxDom.offsetHeight? canvasBoxDom.offsetHeight - height : offsetTop
+						scrollBox.style.marginTop = offsetTop+'px'
+						canvasBoxDom.scroll({
+							top: offsetTop*scale, // 纵向滚动距离
+							left: 0, // 横向滚动距离
+						});
+					}
+					let mouseMove = function(event){
+						let e = getMousePosition(event,false)
+						scrollMousemove(e)
+					}
+					let touchmove = function(event){
+						let e = getMousePosition(event,true)
+						scrollMousemove(e)
+					}
+					let mouseup = function(){
+						document.removeEventListener('mousemove',mouseMove)
+						document.removeEventListener('touchmove',touchmove)
+						document.removeEventListener('mouseup',mouseup) 
+						document.removeEventListener('touchend',mouseup) 
+						//移动端
+					}
+					document.addEventListener('mousemove', mouseMove);
+					document.addEventListener('touchmove', touchmove);
+					document.addEventListener('mouseup', mouseup);
+					document.addEventListener('touchend', mouseup);
+
+					// document.addEventListener('touchmove',scrollMousemove)
+					// scrollBox.addEventListener('touchend',mouseup)
+				}
+				canvasBoxDom.addEventListener('scroll', ()=> {
+					let height = canvasBox.offsetHeight / (this.canvasWH.height / canvasBox.offsetHeight )
+					let scale = (this.canvasWH.height - canvasBoxDom.offsetHeight) / (canvasBoxDom.offsetHeight - height)
+					const scrollTop = canvasBoxDom.scrollTop;
+					scrollBox.style.marginTop = scrollTop/scale+'px'
+				});
+				let mousedown = function(event){
+					let e = getMousePosition(event,false)
+					mouseDownOperation(e)
+				}
+
+				let touchstart = function(event){
+					let e = getMousePosition(event,true)
+					mouseDownOperation(e)
+				}
+				scrollBox.addEventListener('mousedown',mousedown)
+				scrollBox.addEventListener('touchstart',touchstart)
         	}
         },
     },
@@ -2213,6 +2239,7 @@ export default defineComponent({
 	.icon-rotate{
 		transform: rotate(-180deg);
 	}
+	
     .exportCanvasBox {
         flex: 1;
         overflow-x: hidden;
@@ -2281,6 +2308,15 @@ export default defineComponent({
 					}
 				}
 			}
+			.exportCanvasBox_left_item{
+				width: 20rem;
+				.exportCanvasBox_title{
+					.exportCanvasBox_left_tool_item{
+						display: flex;
+					}
+				}
+				
+			}
 			.exportCanvasBox_left_item.closeNav{
 				// max-height: 1000rem;
 				// height: auto;
@@ -2309,6 +2345,12 @@ export default defineComponent({
 					flex-direction: column;
 					
 				}
+				.exportCanvasBox_left_tool_item_more{
+					flex-wrap: wrap;
+					flex-direction: row;
+					justify-content: flex-start;
+					padding: 1rem;
+				}
 			}
             .exportCanvasBox_left_item{
 				overflow: hidden;
@@ -2326,6 +2368,11 @@ export default defineComponent({
 				top: 7rem;
 				position: absolute;
 			}
+			.exportCanvasBox_left_item.exportCanvasBox_left_tool{
+				top: 100%;
+				transform: translateY(-110%);
+				left: 100%;
+			}
 			
             .exportCanvasBox_imgbor {
 				// height: auto;
@@ -2337,9 +2384,11 @@ export default defineComponent({
                 .exportCanvasBox_allItem {
                     display: flex;
                     flex-wrap: wrap;
-					justify-content: space-between;
+					// justify-content: space-between;
+					justify-content: flex-start;
                     .exportCanvasBox_item {
                         text-align: center;
+						margin-right: 1rem;
 						.exportCanvasBox_img{
 							position: relative;
 							margin-bottom: 2rem;
@@ -2453,6 +2502,12 @@ export default defineComponent({
 						border-radius: .4rem;
 					}
 				}
+				.icon-xiala{
+					transform: rotate(-90deg);
+					&.icon-rotate-tool{
+						transform: rotate(90deg);
+					}
+				}
 				.uploadImage{
 					width: 4rem;
 					height: 4rem;

src/component/HomePage/scaleImage.vue

@@ -441,7 +441,7 @@ export default defineComponent({
 </script>
 <style>
 .scaleImage_modal{
-	overflow: initial !important;
+	overflow: visible !important;
 }
 </style>
 <style lang="less" scoped>

src/component/modules/generalMiniCanvas.vue

@@ -46,7 +46,7 @@
 			</div>
 			
 		</div>
-		<div class="exportCanvasBox_submit" @click="setSubmit">
+		<div class="exportCanvasBox_submit" @click="setSubmit(false)">
 			<div class="started_btn">
 				{{ $t('addDetails.submit') }}
 			</div>
@@ -207,7 +207,6 @@ export default defineComponent({
 						}
 					});
 					canvas.on('mouse:wheel', opt => {
-						
 						const delta = opt.e.deltaY // 滚轮，向上滚一下是 -100，向下滚一下是 100
 						let zoom = canvas.getZoom() // 获取画布当前缩放值
 						zoom *= 0.999 ** delta