语言适配

src/component/Detail/addDetails.vue

@@ -89,6 +89,7 @@ export default defineComponent({
 		let reverseCanvasState = ref([])//存放canvas操作
 		let normalCanvasState = ref([])//存放canvas操作
 		let canvasState = ref()//存放canvas操作
+		let keyDown = []//监听键盘的 keydown 和 keyup 事件
 		let init = (data,index)=>{
 			normalCanvasState.value = []
 			reverseCanvasState.value = []
@@ -103,6 +104,10 @@ export default defineComponent({
 				canvasBox.style.width = height+'px'
 				canvasWH.value = height
 				var canvasDom = document.createElement("canvas");
+				document.addEventListener("keydown", canvasKeyDown);
+				document.addEventListener("keyup", canvasKeyUp);
+				
+
 				let oldCanvasDom = canvasBox.querySelector('.canvas-container')
 				if(oldCanvasDom)oldCanvasDom.remove()
 				canvasBox.appendChild(canvasDom);
@@ -128,12 +133,7 @@ export default defineComponent({
 					scale = img.height/canvas.height
 					
 					JSchangeType(canvas,'init')
-					// 鼠标抬起事件
-					canvas.on('mouse:up', function(event) {
-						if(canvasBtn.canvasState != 'move'){
-							updateCanvasState()
-						}
-					});
+					
 					fabric.Object.prototype.cornerSize = 10
 					fabric.Object.prototype.transparentCorners = false 
 					exportUrl = data.path
@@ -150,11 +150,17 @@ export default defineComponent({
 							fabric.Object.prototype.controls.deleteControl.mouseUpHandler = deleteObj
 						}
 						updateCanvasState()
-
-						// img.selectable = false
-						// canvas.add(img)
 					},{ crossOrigin: "Anonymous" });
-					
+					// 鼠标抬起事件
+					canvas.on('mouse:up', function(event) {
+						if(canvasBtn.canvasState != 'move'){
+							updateCanvasState('mouseUp')
+						}
+					});
+
+					//画布上移动
+					canvas.on("mouse:move", event =>setCanvasMove(event));
+					canvas.add(brushIndicator)
 				    loadingShow.value = false
 					setOperation('pencil')
 					img.remove()
@@ -163,23 +169,58 @@ export default defineComponent({
 				
 			})
         }
+		let canvasKeyDown = (event) => {
+			if(keyDown.indexOf(event.key)>-1){
+			}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('')
+				}
+			}
+		}
+		let canvasKeyUp = (event) =>{
+				keyDown = keyDown.filter(function(item) {
+					return event.code !== item;
+				})
+			}
 		let clearCanvas = ()=>{
 		    canvasBtn.canvasState = 'move'
 		    canvasBtn.spreadState = false
 		}
 		let rgba = 'rgba(0, 0, 0, 1)'
 		let brushIndicator = new fabric.Circle({
-			radius:(canvasBtn.canvasPencilWidth[canvasBtn.canvasState]/2),
-			fill: '#fff',
+			radius:2,
+			fill: 'rgba(0, 0, 0, 0)',
 			stroke: '#000',
 			strokeWidth: 1,
 			originX: 'center',
 			originY: 'center',
 			visible :true,
-			left: -100,
-			top: -100,
+			// left: -100,
+			// top: -100,
 			erasable: false,
 		});
+
+		let setCanvasMove = (event)=>{
+			var pointer = canvas.getPointer(event.e);
+			if(canvas.isDrawingMode){
+				canvas.setCursor('none');
+				console.log(12,canvas.contains(brushIndicator));
+				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 });
+			}
+			canvas.requestRenderAll()
+		}
 		let setOperation = (str)=>{
 			canvasBtn.canvasState = str
 			if(str == 'move'){
@@ -237,9 +278,12 @@ export default defineComponent({
 				canvas.freeDrawingBrush.width = Number(canvasBtn.canvasPencilWidth[canvasBtn.canvasState])
 			},300)
 		}
-		let updateCanvasState = () =>{
-				const canvasAsJson = JSON.stringify(canvas.toJSON());
-				normalCanvasState.value.push(canvasAsJson);
+		let updateCanvasState = (str) =>{
+			if(str != 'mouseUp'){
+				canvas.remove(brushIndicator)
+			}
+			const canvasAsJson = JSON.stringify(canvas.toJSON());
+			normalCanvasState.value.push(canvasAsJson);
 		}
 		//撤回
 		let historyState = (str)=> {
@@ -295,17 +339,20 @@ export default defineComponent({
 					exportCanvas.add(obj)
 					if(allObjects.length-1 == index){
 						let data = exportCanvas.toDataURL('jpg')
-						showPayOrder.value = false;
+						cancelDsign()
 						clearCanvas()
 						emit('setSloganData',data)
 					}
 				})
 				
 			})
-				
-			
 		}
-		
+		let cancelDsign = ()=>{
+			canvas.dispose();
+			showPayOrder.value = false
+			document.removeEventListener('keydown',canvasKeyDown);
+			document.removeEventListener('keyup', canvasKeyUp);
+		}
         return {
             presentState,
             showPayOrder,
@@ -317,6 +364,7 @@ export default defineComponent({
 			setPencilWidth,
 			historyState,
 			setSubmit,
+			cancelDsign,
         };
     },
     data() {
@@ -326,10 +374,6 @@ export default defineComponent({
     mounted() {},
     methods: {
        
-		
-		cancelDsign(){
-			this.showPayOrder = false
-		}
     },
 });
 </script>