修改画布布局

2024-10-10 11:32:49 +08:00
parent 982bbee122
commit 03a85a3642
20 changed files with 272 additions and 143 deletions
--- a/src/component/modules/generalMiniCanvas.vue
+++ b/src/component/modules/generalMiniCanvas.vue
@@ -10,18 +10,40 @@
 				<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>
+				<!-- <i class="icon iconfont icon-IC-yehua" @click="setOperation('liquidation')"></i> -->
 				<i class="icon iconfont icon-IC-yehua" @click="setLiquefaction()"></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>
-			<div class="exportCanvasBox_center_box">
-				<div class="exportCanvasBox_center">
-					<!-- <div class="editFrontBack_bgImg" v-show="loadingShow">
-						<img :src="imgData?.undividedLayer" alt="">
-					</div> -->
+			<div class="exportCanvasBox_center_data">
+				<div class="generalMiniCanvas_input generalMiniCanvas_item" :class="{spread:spreadState}">
+					<div class="generalMiniCanvas_input_item" v-show="(canvasState != 'move' && canvasState != 'liquidation')">
+						<span>{{ $t('exportModel.Size') }}</span>
+						<input type="range" @input="setPencilWidth" min="1" max="50" v-model="canvasPencilWidth[canvasState]">
+					</div>
+					<div class="generalMiniCanvas_input_item" v-show="canvasState == 'liquidation'">
+						<span>{{ $t('exportModel.Size') }}</span>{{ canvasPencilWidth.routes }}
+						<input type="range" @change="routesChange('routes')" min="1" max="100" v-model="canvasPencilWidth.routes">
+					</div>
+					<div class="generalMiniCanvas_input_item" v-show="canvasState == 'liquidation'">
+						<span>{{ $t('exportModel.density') }}</span>
+						<input type="range" @change="routesChange('density')" min="1" max="100" v-model="canvasPencilWidth.density">
+					</div>
+					<div class="generalMiniCanvas_input_item" v-show="(canvasState != 'move' && canvasState != 'liquidation')">
+						<span>{{ $t('exportModel.Color') }}</span>
+						<input type="color" @input="setPencilColor" v-model="canvasPencilColor">
+					</div>
+					
+				</div>
+				<div class="exportCanvasBox_center_box">
+					<div class="exportCanvasBox_center">
+						
+					</div>
+					<!-- <div v-show="arrows.show" class="moveDom" :style="arrows.domStyle"></div>
+					<div v-show="arrows.show" class="jiantouDom" :style="arrows.jiantouStyle"> </div> -->
+					<div class="editFrontBack_pencilbtn" v-show="loadingShow" :style="pencilbtnStyle"></div>
 				</div>
-				<div class="editFrontBack_pencilbtn" v-show="loadingShow" :style="pencilbtnStyle"></div>
 			</div>
+			
 		</div>
 		<div class="exportCanvasBox_submit" @click="setSubmit">
 			<div class="started_btn">
@@ -88,10 +110,26 @@ export default defineComponent({
 			canvasPencilWidth:{
 				pencil:20,
 				eraser:20,
+				routes:30,
+				density:30,
 			},
+			canvasPencilColor:'#000000',
 			spreadState:false,
 		})
 		let canvasWH = ref(0);
+		let arrows = ref({
+			show:false,
+			domStyle:{
+				left:0,
+				top:0,
+				width:0,
+				height:0,
+			},
+			jiantouStyle:{
+				height:'1px',
+				transform:`translateY(-100%) rotate(${90}deg)`,
+			}
+		})
 		watch(
 		() => props.imgUrl,  
 		(newValue, oldValue) => {
@@ -139,7 +177,7 @@ export default defineComponent({
 						height:canvasWH.value * hScale,
 					})
 					scale = img.height/canvas.height
-					pencilbtnStyle.value.background = rgba
+					pencilbtnStyle.value.background = canvasBtn.canvasPencilColor
 					
 					fabric.Object.prototype.cornerSize = 10
 					fabric.Object.prototype.transparentCorners = false 
@@ -219,7 +257,6 @@ export default defineComponent({
 			document.removeEventListener("keydown", canvasKeyDown);
 			document.removeEventListener("keyup", canvasKeyUp);
 		}
-		let rgba = 'rgba(0, 0, 0, 1)'
 		let mouseMove = (event)=>{
 			let e = getMousePosition(event,false)
 			setCanvasMove(e)
@@ -250,6 +287,8 @@ export default defineComponent({
 			}else if(str == 'eraser'){
 				setEraser()
 				pencilbtnStyle.value.display = `block`
+			}else if(str == 'liquidation'){
+				canvas.isDrawingMode = false
 			}
 		}
 		let setMove = ()=>{
@@ -260,8 +299,8 @@ export default defineComponent({
 			canvas.isDrawingMode = true//开启绘画模式
 			canvas.freeDrawingBrush = new fabric.PencilBrush(canvas,{});
 			canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
-			canvas.freeDrawingBrush.color = rgba
-			pencilbtnStyle.value.background = rgba
+			canvas.freeDrawingBrush.color = canvasBtn.canvasPencilColor
+			pencilbtnStyle.value.background = canvasBtn.canvasPencilColor
 			canvas.freeDrawingBrush.isEraser = false
 			setPencilWidth()
 		}
@@ -290,15 +329,44 @@ export default defineComponent({
 				canvas.FX_DURATION = 300
 			})
 		}
-		let setTimeOutWidth
+		let setTimeOut = {
+		    pencilWidth:null,
+			color:null,
+		}
 		let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
-			clearTimeout(setTimeOutWidth)
-			setTimeOutWidth = setTimeout(()=>{
+			clearTimeout(setTimeOut.pencilWidth)
+			setTimeOut.pencilWidth = 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 setPencilColor = ()=>{//切换颜色给铅笔设置颜色
+			clearTimeout(setTimeOut.color)
+			// clearTimeout(setTimeOut.colorHistory)
+			setTimeOut.color = setTimeout(()=>{
+				pencilColor()
+			},200)
+			// setTimeOut.colorHistory = setTimeout(()=>{
+			// 	colorHistoryList.value.push(canvasPencilColor.value)
+			// },1000)
+		}
+		let pencilColor = ()=>{
+			if(canvas.freeDrawingBrush.isEraser){
+				canvas.freeDrawingBrush.color = '#FFFFFF';
+			}else{
+				pencilbtnStyle.value.background = canvasBtn.canvasPencilColor
+				canvas.freeDrawingBrush.color = canvasBtn.canvasPencilColor;
+			}
+		}
+		let routesChange = (str)=>{
+			canvasBtn.canvasPencilWidth[str] = Math.round(canvasBtn.canvasPencilWidth[str]/10)*10;
+			if (canvasBtn.canvasPencilWidth[str] < 10) {
+				canvasBtn.canvasPencilWidth[str] = 10; // 设置为最小值
+			} else if (canvasBtn.canvasPencilWidth[str] > 100) {
+				canvasBtn.canvasPencilWidth[str] = 100; // 设置为最大值
+			}
+		}
 		let updateCanvasState = (str) =>{
 			if(str != 'mouseUp'){
 			}
@@ -321,51 +389,59 @@ export default defineComponent({
 			}
 			canvas.loadFromJSON(canvasState.value, () => {});
 		}
-		let setSubmit = ()=>{
-			var allObjects = canvas.getObjects('path');
-			// if(allObjects.length == 0){
-			// 	return message.info(t('addDetails.jsContent1'))
-			// }
-			var canvasDom = document.createElement("canvas");
-			let exportCanvas = new fabric.Canvas(canvasDom, {
-				backgroundColor: "rgba(255, 255, 255,1)",
-				width: exportWH * ratio[0],
-				height: exportWH * ratio[1],
-				isDrawingMode: false, // 开启绘图模式
-			});
-			canvas.backgroundImage.clone((back)=>{
-				back.set({
-					scaleX:1,
-					scaleY:1,
-					left:back.left*scale,
-					top:back.top*scale ,
-				})
-				exportCanvas.backgroundImage = back
-				allObjects.forEach((item,index)=>{
-					// let obj = fabric.util.object.clone(item);
-					if(item.type == 'circle')return
-					let obj 
-					item.clone((cloned)=>{
-						obj = cloned
-					})
-					obj.set(
-						{
-							scaleX:(item.scaleX?item.scaleX:1)*scale,
-							scaleY:(item.scaleY?item.scaleY:1)*scale,
-							left:item.left*scale,
-							top:item.top*scale,
-						}
-					)
-					exportCanvas.add(obj)
-				})
-				let data = canvas.toDataURL({
-					format: 'png',
-					quality: 1 // 质量参数，范围 0.0 - 1.0
+		let setSubmit = (liquefation)=>{
+			return new Promise((resolve,reject)=>{
+				var allObjects = canvas.getObjects('path');
+				// if(allObjects.length == 0){
+				// 	return message.info(t('addDetails.jsContent1'))
+				// }
+				var canvasDom = document.createElement("canvas");
+				let exportCanvas = new fabric.Canvas(canvasDom, {
+					backgroundColor: "#FFFFFF",
+					width: exportWH * ratio[0],
+					height: exportWH * ratio[1],
+					isDrawingMode: false, // 开启绘图模式
 				});
-				cancelDsign()
-				clearCanvas()
-				emit('submitBase64Data',data)
+				canvas.backgroundImage.clone((back)=>{
+					back.set({
+						scaleX:1,
+						scaleY:1,
+						left:back.left*scale,
+						top:back.top*scale ,
+					})
+					exportCanvas.backgroundImage = back
+					allObjects.forEach((item,index)=>{
+						// let obj = fabric.util.object.clone(item);
+						if(item.type == 'circle')return
+						let obj 
+						item.clone((cloned)=>{
+							obj = cloned
+						})
+						obj.set(
+							{
+								scaleX:(item.scaleX?item.scaleX:1)*scale,
+								scaleY:(item.scaleY?item.scaleY:1)*scale,
+								left:item.left*scale,
+								top:item.top*scale,
+							}
+						)
+						exportCanvas.add(obj)
+					})
+				
+					let data = canvas.toDataURL({
+						format: 'png',
+						quality: 1 // 质量参数，范围 0.0 - 1.0
+					});
+					if(liquefation){
+						return resolve(data)
+					}
+					cancelDsign()
+					clearCanvas()
+					emit('submitBase64Data',data)
+					resolve('')
+				})
 			})
+			
 		}
 		let cancelDsign = ()=>{
 			document.removeEventListener('keydown',canvasKeyDown);
@@ -401,12 +477,12 @@ export default defineComponent({
 				canvas.renderAll();
 			});
 		}
-		let setLiquefaction = ()=>{
-			const activeObjects = canvas.backgroundImage // 获取选中的对象
+		let setLiquefaction =async ()=>{
+			// const activeObjects = canvas.backgroundImage // 获取选中的对象
+			// console.log(setSubmit(true));
+			let activeObjects = await setSubmit(true)
 			if (activeObjects) {
 				liquefactionData.value = activeObjects
-				console.log(liquefactionData.value);
-				
 				liquefaction.value.init(activeObjects)
 			} else {
 				// message.info(useI18.t('exportModel.jsContent6'))
@@ -420,17 +496,20 @@ export default defineComponent({
            t,
 			pencilbtnStyle,
 			...toRefs(canvasBtn),
+			arrows,

 			liquefactionData,
 			liquefaction,
 			init,
 			setOperation,
 			setPencilWidth,
+			setPencilColor,
 			historyState,
 			setSubmit,
 			cancelDsign,
 			submitLiquefaction,
 			setLiquefaction,
+			routesChange,
        };
    },
    data() {
@@ -446,20 +525,21 @@ export default defineComponent({
 <style lang="less">
 .generalMiniCanvas{
 	position: relative;
-	// width: calc(512px / 2);
-	// width: 256px;
 	height: 100%;
 	display: flex;
-	flex-direction: column;
-	// height: calc(512px / 2);
+	width: 100%;
+	// flex-direction: column;
 	margin: 0 auto;
+	flex-direction: row;
+	flex: 1;
+	overflow: hidden;
 	.generalMiniCanvas_item{
 		// position: relative;
 		background: #fff;
 		position: absolute;
 		
 		display: flex;
-		border: 0.2rem solid #c4c4c4;
+		// border: 0.2rem solid #c4c4c4;
 		width: 25rem;
 		border-radius: 4px; /* 设置圆角半径 */
 		flex-wrap: wrap;
@@ -469,19 +549,34 @@ export default defineComponent({
 			padding: 1rem 0;
 		}
 	}
+	.generalMiniCanvas_input,.generalMiniCanvas_btn{
+		z-index: 2;
+		padding: 1rem 1.5rem;
+		position: relative;
+		width: auto;
+		flex-wrap: nowrap;
+		flex-direction: column;
+	}
+	.generalMiniCanvas_input{
+		flex-direction: row;
+		align-items: center;
+		.generalMiniCanvas_input_item{
+			display: flex;
+			margin-right: 3rem;
+			align-items: center;
+			span{
+				margin-right: 1rem;
+			}
+		}
+		.generalMiniCanvas_input_item:last-child{
+			margin-right: 0;
+		}
+	}
 	.generalMiniCanvas_btn{
-			z-index: 2;
-			// left: 50%;
-			min-width: 45rem;
-			// 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%;
+				width: 30rem;
 				// margin-top: 1rem;
 				flex: 1;
 			}
@@ -524,10 +619,16 @@ export default defineComponent({
 		flex: 1;
 		overflow: hidden;
 		display: flex;
-		flex-direction: column;
+		// flex-direction: column;
+		flex-direction: row;
 		position: relative;
 		margin: 0 auto;
 	}
+	.exportCanvasBox_center_data{
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+	}
 	.exportCanvasBox_center_box{
 		padding: 3rem;
 		height: 100%;
@@ -579,7 +680,8 @@ export default defineComponent({
 	}
 }
 .exportCanvasBox_submit{
-	margin-top: 1rem;
+	margin-top: auto;
+	margin-left: 1rem;
 	text-align: center;
 }
 </style>
--- a/src/component/modules/liquefaction.vue
+++ b/src/component/modules/liquefaction.vue
@@ -186,7 +186,11 @@ export default defineComponent({
 				canvasBox.addEventListener('mousedown', mousedown);
 				canvasBox.addEventListener('touchstart', touchdown);
 			}
-			img.src = data._element.src
+			if(data._element){
+				img.src = data._element.src
+			}else{
+				img.src = data
+			}
        }
 		let distanceSqr = (x1, y1, x2, y2) => sqr(x1 - x2) + sqr(y1 - y2); 
 		let sqr = (x) => x * x;;