调整画布布局

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;
-				canvasBox.style.width = height+'px'
-				canvasWH.value = height
+				let oldCanvasDom = canvasBox.querySelector('.canvas-container')
+				let oldCanvasDom1 =  canvasBox.querySelector('canvas')
 				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(oldCanvasDom1){
-					oldCanvasDom1.remove()
-				}
+				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
+					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){
-				return message.info(t('addDetails.jsContent1'))
-			}
+			// 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)",
@@ -346,13 +339,18 @@ export default defineComponent({
 						}
 					)
 					exportCanvas.add(obj)
-					if(allObjects.length-1 == index){
-						let data = exportCanvas.toDataURL('jpg')
-						cancelDsign()
-						clearCanvas()
-						emit('setSloganData',data)
-					}
+					// if(allObjects.length-1 == index){
+					// 	let data = exportCanvas.toDataURL('jpg')
+					// 	cancelDsign()
+					// 	clearCanvas()
+					// 	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{
-			height: 100%;
-			flex: 1;
-			position: relative;
-			margin: 0 auto;
-			overflow: hidden;
-			background: #e6e6e6;
-			// overflow: scroll;
-			.addDetails_center_btn{
+		.addDetails_center_btn{
 				z-index: 2;
-				left: 50%;
-				transform: translate(-50%,-135%);
-				transition: all .3s;
+				// left: 50%;
+				// transform: translate(-50%,-135%);
+				// transition: all .3s;
 				padding: 1rem 1.5rem;
-				// position: relative;
+				// transform: translate(-50%,0);
+				position: relative;
+				width: 100%;
+				flex-direction: row;
 				input{
-					width: 100%;
-					margin-top: 1rem;
+					// width: 100%;
+					// 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%);
-				&.spread{
-					transform: translate(-50%,0);
-				}
+				// transform: translate(-50%,-101%);
+				// &.spread{
+				// 	transform: translate(-50%,0);
+				// }
 			}
 		}
 	}