details功能

src/component/Detail/editFrontBack.vue

@@ -97,9 +97,10 @@ export default defineComponent({
 				let img = new Image();
 				img.onload = async function(){
 					loadingShow.value = true
+					let scale = img.width/img.height
 					let height = canvasBox.offsetHeight;
 					canvasWH.value = height
-					canvasBox.style.width = height+'px'
+					canvasBox.style.width = height * scale+'px'
 					
 					let wScale = 1
 					let hScale = 1
@@ -122,16 +123,18 @@ export default defineComponent({
 					await frontBackCanvasObj.canvasInit(canvasBox,{
 						width:canvasWH.value * wScale,
 						height:canvasWH.value * hScale,
-					},data.undividedLayer)
+					},data.maskUrl,'',{})
+					// undividedLayer
 					canvas = frontBackCanvasObj.canvas
 
 					frontBackCanvasObj.setOperation('pencil')
 					pencilbtnStyle.value.background = rgba.value
-					console.log(frontBackCanvasObj,frontBackCanvasObj.setPencilWidth);
+					// console.log(frontBackCanvasObj,frontBackCanvasObj.setPencilWidth);
 					frontBackCanvasObj.setPencilWidth()
 					fabric.Object.prototype.cornerSize = 10
 					fabric.Object.prototype.transparentCorners = false 
-					await frontBackCanvasObj.addPartImg({minioUrl:data.maskUrl},'')
+					// await frontBackCanvasObj.addPartImg({minioUrl:data.maskUrl},'',{opacity: 0.5})
+
 					// await new Promise((resolve, reject) => {
 					// 	fabric.Image.fromURL(data.maskUrl, function(img) {
 					// 		// 设置背景图对象的宽度和高度与 canvas 相同
@@ -208,7 +211,6 @@ export default defineComponent({
 			}
 		}
 		let mouseup = (e)=>{
-			console.log(down);
 			if(down){
 				nextTick(()=>{
 					createSetTimeSubmit()
@@ -233,7 +235,6 @@ export default defineComponent({
 				height: Math.round(exportWH * ratio[1]),
 			}
 			segmentImage(mark,full,size).then((rv)=>{
-				// console.log(rv.targetFrontUrl,rv.targetBackUrl)
 				props.patchData.front[props.imgDomIndex].imageUrl = rv.targetFrontUrl
 				props.patchData.back[props.imgDomIndex].imageUrl = rv.targetBackUrl
 				props.patchData.front[props.imgDomIndex].maskUrl = data
@@ -284,7 +285,7 @@ export default defineComponent({
 	margin: 0 auto;
 	.editFrontBack_center_item{
 		// position: relative;
-		background: #fff;
+		background: #ffffff;
 		position: absolute;
 		
 		display: flex;
@@ -418,6 +419,9 @@ export default defineComponent({
 			justify-content: center;
 			width: 100%;
 			height: 100%;
+			z-index: 2;
+			pointer-events:none;
+			opacity: .5;
 			img{
 				height: 100%;
 				width: 100%;