detail更新

src/component/Detail/addDetails.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="addDetailsModal" ref="addDetailsModal"></div>
+	<div class="addDetailsModal generalModel" ref="addDetailsModal"></div>
     <a-modal
         class="addDetails_modal generalModel"
         v-model:visible="addDetails"
@@ -49,7 +49,7 @@ export default defineComponent({
         let addDetails = ref(false);
 		let init = (data,index)=>{
 			addDetails.value = true
-			addDetail.imgUrl = data.path
+			addDetail.imgUrl = data.sketchString || data.path
         }
 		let submitBase64Data = (data)=>{
 			emit('setSloganData',data)
@@ -77,6 +77,10 @@ export default defineComponent({
 });
 </script>
 <style lang="less" scoped>
+.addDetailsModal{
+	width: 0;
+	height: 0;
+}
 .addDetails_modal {
     .closeIcon {
         z-index: 2;

src/component/Detail/editFrontBack.vue

@@ -1,50 +1,51 @@
 <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> -->
+		<!-- <div class="editFrontBack_center_btn editFrontBack_center_item" :class="{spread:spreadState}">
 			<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:(canvasState != 'eraser' && rgba == 'rgb(255,0,0)')}" title="front">front</div>
 			<div class="editFrontBack_center_btn_colorGreen" @click="setOperationColor('rgb(0,255,0)')" :class="{active:(canvasState != 'eraser' && rgba == 'rgb(0,255,0)')}" title="back">back</div>
 			<div class="editFrontBack_center_btn_colorWhite" @click="setOperation('eraser')" :class="{active:canvasState == 'eraser'}" title="background">background</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> -->
 		<div class="exportCanvasBox_center_box">
 			<div class="exportCanvasBox_center">
 				<div class="editFrontBack_bgImg" v-show="loadingShow">
 					<img :src="imgData?.undividedLayer" alt="">
 				</div>
+				<div class="editFrontBack_pencilbtn" v-show="loadingShow" :style="frontBackCanvasObj.pencilbtnStyle" style="display: block;"></div>
+
 			</div>
-			<div class="editFrontBack_pencilbtn" v-show="loadingShow" :style="pencilbtnStyle"></div>
+			<!-- <div class="editFrontBack_pencilbtn" v-show="loadingShow" :style="pencilbtnStyle"></div> -->
+<!-- 
+			<div class="editFrontBack_pencilbtn" v-show="loadingShow" :style="frontBackCanvasObj.pencilbtnStyle" style="display: block;"></div>
+			{{frontBackCanvasObj.pencilbtnStyle}} -->
 		</div>
 	</div>
 </template>
 <script>
-import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
+import { defineComponent, ref, reactive, inject, onMounted, nextTick, toRefs, onBeforeUnmount, watch, computed } from "vue";
 import { formatTime,segmentImage } from "@/tool/util";
 import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
 import { getMousePosition } from "@/tool/mdEvent";
+import { useStore } from "vuex";
 import { useI18n } from "vue-i18n";
-import canvasGeneral from "@/tool/canvasGeneral";
 export default defineComponent({
     components: {
     },
 	// emits: ['setSloganData'],
 	props:['patchData','imgDomIndex'],
     setup(props,{emit}) {
+        const store = useStore();
         let presentState = ref('paypal');
         let loadingShow = ref(false);
         let { t } = useI18n();
-        let canvas = reactive({});
+        // let canvas = new frontBackCanvasObjCopy();
+        let canvas = null;
+		let frontBackCanvasObj = inject('frontBackCanvasObj')
 		let ratio = [1,1]
 		let exportWH = 0
-		let imgDomIndex = 0
 		let imgData = ref()
 		let pencilbtnStyle = ref({
 			background:'',
@@ -54,17 +55,20 @@ export default defineComponent({
 			left:0+'px',
 			top:0+'px',
 		})
+		let selectDetail = computed(()=>store.state.DesignDetailCopy.selectDetail)
+
 		// let a = computed(()=>{
 		// 	console.log(123);
 		// 	return props.patchData
 		// })
-		watch(()=>props.imgDomIndex,(newVal,oldVal)=>{
-			if(newVal == -1) return
-			imgDomIndex = newVal
+		watch(()=>pencilbtnStyle.value.background,(newVal)=>{
+			frontBackCanvasObj.brushwork.color = newVal
+			frontBackCanvasObj.setPencilColor()
+		})
+		onMounted(()=>{
 			props.patchData.front.imageUrl=  ''
 			clearTimeout(setTimeSubmit)
-			
-			init(props.patchData.front[newVal],'')
+			// init(props.patchData.front[props.imgDomIndex],'')
 		})
 		let canvasBtn = reactive({
 			canvasState:'move',
@@ -76,11 +80,10 @@ export default defineComponent({
 		})
 		let canvasWH = ref(0);
 		
-		let exportUrl = ''
 		let reverseCanvasState = ref([])//存放canvas操作
 		let normalCanvasState = ref([])//存放canvas操作
-		let canvasState = ref()//存放canvas操作
-		let keyDown = []//监听键盘的 keydown 和 keyup 事件
+
+		let down = false
 		let init = (data,index)=>{
 			normalCanvasState.value = []
 			reverseCanvasState.value = []
@@ -89,8 +92,6 @@ export default defineComponent({
 			nextTick(()=>{
 				let canvasBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center");
 				let editFrontBack_bgImg = document.querySelector(".editFrontBack_center .editFrontBack_bgImg");
-				document.addEventListener("keydown", canvasKeyDown);
-				document.addEventListener("keyup", canvasKeyUp);
 				document.removeEventListener('mousemove', mouseMove);
 				document.removeEventListener('touchmove', touchmove);
 				let img = new Image();
@@ -114,70 +115,39 @@ export default defineComponent({
 					editFrontBack_bgImg.style.width = canvasWH.value * wScale+'px'
 					editFrontBack_bgImg.style.height = canvasWH.value * hScale+'px'
 					ratio = [wScale,hScale]
-					canvas = canvasGeneral.canvasInit(canvasBox,{
+					// canvas = frontBackCanvasObj.canvasInit(canvasBox,{
+					// 	width:canvasWH.value * wScale,
+					// 	height:canvasWH.value * hScale,
+					// })
+					await frontBackCanvasObj.canvasInit(canvasBox,{
 						width:canvasWH.value * wScale,
 						height:canvasWH.value * hScale,
-					})
+					},data.undividedLayer)
+					canvas = frontBackCanvasObj.canvas
+
+					frontBackCanvasObj.setOperation('pencil')
 					pencilbtnStyle.value.background = rgba.value
+					console.log(frontBackCanvasObj,frontBackCanvasObj.setPencilWidth);
+					frontBackCanvasObj.setPencilWidth()
 					fabric.Object.prototype.cornerSize = 10
 					fabric.Object.prototype.transparentCorners = false 
-					exportUrl = data.maskUrl
-					// canvas.on('mouse:wheel', opt => {
-					// 	const delta = opt.e.deltaY // 滚轮，向上滚一下是 -100，向下滚一下是 100
-					// 	let zoom = canvas.getZoom() // 获取画布当前缩放值
-					// 	zoom *= 0.999 ** delta
-					// 	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()
+					await frontBackCanvasObj.addPartImg({minioUrl:data.maskUrl},'')
+					// await new Promise((resolve, reject) => {
+					// 	fabric.Image.fromURL(data.maskUrl, function(img) {
+					// 		// 设置背景图对象的宽度和高度与 canvas 相同
+					// 		canvas.add(img)
+					// 		resolve('')
+					// 	},{ crossOrigin: "Anonymous" });
 					// })
-					await new Promise((resolve, reject) => {
-						fabric.Image.fromURL(data.maskUrl, function(img) {
-							// 设置背景图对象的宽度和高度与 canvas 相同
-							img.scaleToWidth(canvas.width);
-							img.scaleToHeight(canvas.height);;
-							img.set({
-								// width: canvas.width,
-								// height: canvas.height,
-								// scaleX:2,
-								// scaleY:1,
-								scaleX: canvas.width / img.width,
-								scaleY: canvas.height / img.height
-							});
-							// 将背景图添加到 canvas 的底层
-							// canvas.add(img);
-							canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
-							if(!fabric.Object.prototype.controls.deleteControl){
-								JSSetRemoveImage(deleteObj)
-							}else{
-								fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
-							}
-							setPencilWidth()
-							updateCanvasState()
-							resolve('')
-						},{ crossOrigin: "Anonymous" });
-					})
 					
-					// 鼠标抬起事件
-					canvas.on('mouse:up', function(event) {
-						if(canvasBtn.canvasState != 'move'){
-							updateCanvasState('mouseUp')
-						}
-					});
 					
 					//画布上移动
 					// canvas.on("mouse:move", event =>setCanvasMove(event));
+					canvas.on('mouse:up', (event)=> {
+						updateCanvasState('mouseUp')
+					});
 					document.addEventListener('mousemove', mouseMove);
 					document.addEventListener('touchmove', touchmove);
-					setOperation('pencil')
 					createSetTimeSubmit()
 					img.remove()
 				}
@@ -185,128 +155,15 @@ export default defineComponent({
 				
 			})
         }
-		let canvasKeyDown = (event) => {
-			if(keyDown.indexOf(event.key)>-1){
+		const setBackground = (value)=>{
+			if(value == 'background'){
+				frontBackCanvasObj.setOperation('eraser')
 			}else{
-				keyDown.push(event.code)
-				if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1 && keyDown.indexOf('ShiftLeft') > -1){
-					historyState('reverse')
-				}else if(keyDown.indexOf('ControlLeft') > -1 && keyDown.indexOf('KeyZ') > -1){
-					historyState('')
-				}
+				frontBackCanvasObj.setOperation('pencil')
+				frontBackCanvasObj.brushwork.color = value
+				frontBackCanvasObj.pencilColor()
 			}
 		}
-		let canvasKeyUp = (event) =>{
-				keyDown = keyDown.filter(function(item) {
-					return event.code !== item;
-				})
-				
-			}
-		let setClone = ()=>{
-			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 mouseMove = (event)=>{
-			let e = getMousePosition(event,false)
-			setCanvasMove(e)
-		}
-		let touchmove = (event)=>{
-			let e = getMousePosition(event,true)
-			setCanvasMove(e)
-		}
-		let setCanvasMove = (event)=>{
-			if(canvas.isDrawingMode){
-				canvas.setCursor('none');
-			}
-			let canvasCenterBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center_box");
-			if(!canvasCenterBox)return
-			let parentX = event.clientX - canvasCenterBox.getBoundingClientRect().left
-			let parentY = event.clientY - canvasCenterBox.getBoundingClientRect().top
-			pencilbtnStyle.value.left = parentX + "px"
-			pencilbtnStyle.value.top =  parentY+'px'
-		}
-		let setOperation = (str)=>{
-			if(!canvas)return
-			canvasBtn.canvasState = str
-			if(str == 'move'){
-				setMove()
-				pencilbtnStyle.value.display = `none`
-			}else if(str == 'pencil'){
-				setPencil()
-				pencilbtnStyle.value.display = `block`
-			}else if(str == 'eraser'){
-				setEraser()
-				// rgba.value = 'rgb(255,255,255)'
-				pencilbtnStyle.value.display = `block`
-			}
-		}
-		let setOperationColor = (color)=>{
-			pencilbtnStyle.value.background = color
-			rgba.value = color
-			canvas.freeDrawingBrush.color = color
-			setOperation('pencil')
-		}
-		let setMove = ()=>{
-			canvas.isDrawingMode = false
-			canvas.forEachObject((obj) =>obj.selectable = true);
-		}
-		let setPencil = ()=>{
-			canvas.isDrawingMode = true//开启绘画模式
-			canvas.freeDrawingBrush = new fabric.PencilBrush(canvas,{});
-			canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]);
-			setPencilWidth()
-			canvas.freeDrawingBrush.color = 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
-			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()){
-			// 	return
-			// }
-			let target = canvas.getActiveObjects()
-			target.forEach((item)=>{
-				canvas.fxRemove(item, {
-					onComplete(){
-					canvas.discardActiveObject(); // 丢弃当前选中的对象
-					canvas.renderAll(); // 重新渲染 Canvas
-					}
-				})
-				canvas.FX_DURATION = 300
-			})
-		}
-		let setTimeOutWidth
-		let setPencilWidth = ()=>{//切换颜色给铅笔设置颜色
-			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
-		let createSetTimeSubmit = ()=>{
-			setSubmit()
-		}
 		let updateCanvasState = (str) =>{
 			if(str != 'mouseUp'){
 				// editFrontBackPencilbtn.value.style.display = 'none'
@@ -316,103 +173,92 @@ export default defineComponent({
 					createSetTimeSubmit()
 				},1000)
 			}
-			const canvasAsJson = JSON.stringify(canvas.toJSON());
-			normalCanvasState.value.push(canvasAsJson);
+		}
+		let setClone = ()=>{
+			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 rgba = ref('#ff0000')
+		let mouseMove = (event)=>{
+			let e = getMousePosition(event,false)
+			setCanvasMove(e)
+		}
+		let touchmove = (event)=>{
+			let e = getMousePosition(event,true)
+			setCanvasMove(e)
+		}
+		let setCanvasMove = (event)=>{
+			if(canvas.isDrawingMode && canvas){
+				canvas.setCursor('none');
+			}
+			let canvasCenterBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center_box");
+			if(!canvasCenterBox)return
+			let parentX = event.clientX - canvasCenterBox.getBoundingClientRect().left
+			let parentY = event.clientY - canvasCenterBox.getBoundingClientRect().top
+			pencilbtnStyle.value.left = parentX + "px"
+			pencilbtnStyle.value.top =  parentY+'px'
+		}
+		let mousedown = (e)=>{
+			if(e.target instanceof HTMLCanvasElement){
+				down = true
+			}
+		}
+		let mouseup = (e)=>{
+			console.log(down);
+			if(down){
+				nextTick(()=>{
+					createSetTimeSubmit()
+				})
+			}
+			down = false
+		}	
+		let setTimeSubmit = null
+		let createSetTimeSubmit = ()=>{
+			setSubmit()
 		}
 		//撤回
-		let historyState = (str)=> {
-			if(str == 'reverse' && reverseCanvasState.value.length > 0){//反撤回
-				let obj = reverseCanvasState.value.pop()
-				// canvasState.value = reverseCanvasState.value[reverseCanvasState.value.length-1]
-				canvasState.value = obj 
-				normalCanvasState.value.push(obj);
-			}else if(str == '' && normalCanvasState.value.length > 1){
-				let obj = normalCanvasState.value.pop()
-				canvasState.value = normalCanvasState.value[normalCanvasState.value.length-1]
-				reverseCanvasState.value.push(obj);
-			}else{
-				return
+		
+		let setSubmit = async ()=>{
+			// let data = await frontBackCanvasObj.allExport()
+			let data = await frontBackCanvasObj.detailSubmit()
+			// props.props.patchData.front[imgDomIndex].imageUrl = data
+			let mark = data
+			let full = props.patchData.front[props.imgDomIndex].undividedLayer
+			let size = {
+				width: Math.round(exportWH * ratio[0]),
+				height: Math.round(exportWH * ratio[1]),
 			}
-			canvas.loadFromJSON(canvasState.value, () => {
-				createSetTimeSubmit()
-			});
-			
-		}
-		let setSubmit = ()=>{
-			var allObjects = canvas.getObjects('path');
-			var canvasDom = document.createElement("canvas");
-			let exportCanvas = new fabric.Canvas(canvasDom, {
-				width: exportWH * ratio[0],
-				height: exportWH * ratio[1],
-				isDrawingMode: false, // 开启绘图模式
-			});
-			canvas.backgroundImage.clone((back)=>{
-				back.scaleToWidth(exportCanvas.width);
-				back.scaleToHeight(exportCanvas.height);
-				back.set({
-					scaleX: exportCanvas.width / back.width,
-					scaleY: exportCanvas.height / back.height
-				})
-				let scale = exportCanvas.height/canvas.height
-				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 = exportCanvas.toDataURL('png')
-				cancelDsign()
-				clearCanvas()
-				// props.props.patchData.front[imgDomIndex].imageUrl = data
-				let mark = data
-				let full = props.patchData.front[imgDomIndex].undividedLayer
-				let size = {
-					width: Math.round(exportWH * ratio[0]),
-					height: Math.round(exportWH * ratio[1]),
-				}
-				segmentImage(mark,full,size).then((rv)=>{
-					// console.log(rv.targetFrontUrl,rv.targetBackUrl)
-					props.patchData.front[imgDomIndex].imageUrl = rv.targetFrontUrl
-					props.patchData.back[imgDomIndex].imageUrl = rv.targetBackUrl
-					props.patchData.front[imgDomIndex].maskUrl = data
-				})
-				return
+			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
+				store.commit('DesignDetailCopy/updataDetailItem',{maskUrl:data})
 			})
 		}
-		let cancelDsign = ()=>{
-			
-			document.removeEventListener('keydown',canvasKeyDown);
-			document.removeEventListener('keyup', canvasKeyUp);
-		}
+		onBeforeUnmount(()=>{
+			frontBackCanvasObj.canvasClear()
+			document.removeEventListener('mousemove', mouseMove);
+			document.removeEventListener('touchmove', touchmove);
+			document.removeEventListener('mousedown', mousedown);
+			document.removeEventListener('mouseup', mouseup);
+		})
         return {
+			frontBackCanvasObj,
             presentState,
 			loadingShow,
 			imgData,
 			pencilbtnStyle,
             t,
 			...toRefs(canvasBtn),
-			rgba,
+			setBackground,
 			init,
-			setOperation,
-			setOperationColor,
-			setPencilWidth,
-			historyState,
 			setSubmit,
 			setClone,
-			cancelDsign,
         };
     },
     data() {
@@ -529,13 +375,13 @@ export default defineComponent({
 		}
 	}
 	.exportCanvasBox_center_box{
-		padding: 3rem;
 		height: 100%;
 		flex: 1;
 		position: relative;
 		overflow: hidden;
 		width: 100%;
 		background: #e6e6e6;
+		cursor: auto;
 		&:hover{
 			cursor: none;
 		}
@@ -554,12 +400,12 @@ export default defineComponent({
 		height: 100%;
 		position: relative;
 		// overflow: scroll;
-		
+		cursor: none;
 		:deep(.canvas-container){
 			left: 50%;
 			top: 50%;
 			transform: translate(-50%,-50%);
-			opacity: .5;
+			// opacity: .5;
 			// background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
 		}
 		.editFrontBack_bgImg{