调整画布布局

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 @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 @click="setSubmit">保存</div>
+			<div class="editFrontBack_bgImg" v-show="loadingShow">
+				<img :src="imgData?.undividedLayer" alt="">
 			</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 height = canvasBox.offsetHeight;
-				canvasBox.style.width = height+'px'
-				canvasWH.value = height
+				let canvasBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center");
 				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)){
-					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()
+				// brushIndicator.set({ left: pointer.x, top: pointer.y, visible: true,radius:(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])/2 });
 			}
+			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 = ''
-				if(!canvas.contains(brushIndicator))canvas.add(brushIndicator)
+				rgba.value = 'rgb(255,255,255)'
+				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{