修复bug

src/component/modules/liquefaction.vue

@@ -57,7 +57,7 @@
     </a-modal>
 </template>
 <script>
-import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
+import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs, onBeforeUnmount } from "vue";
 import { useI18n } from "vue-i18n";
 import { getMousePosition } from "@/tool/mdEvent";
 export default defineComponent({
@@ -84,6 +84,8 @@ export default defineComponent({
 				transform:`translateY(-100%) rotate(${90}deg)`,
 			}
 		})
+		let records = []//撤回
+		let normalCanvasState = []//反撤回
 		let canvas
 		let canvasImgData = {
 			width:0,
@@ -91,8 +93,12 @@ export default defineComponent({
 		}
 		let downX
 		let downY
+		let context
 		let init = async (data)=>{
+			records = []
 			liqufeaction.value = true
+			document.addEventListener("keydown", kyeDown);
+			document.addEventListener("keyup", KeyUp);
 			await new Promise((resolve, reject) => {
 				nextTick(()=>{
 					resolve()
@@ -115,7 +121,7 @@ export default defineComponent({
 				canvas.width = width
 				canvas.height = height
 				let optfor = false
-				const context = canvas.getContext('2d');
+				context = canvas.getContext('2d');
 				context.drawImage(img, 1, 1, canvas.width, canvas.height);
 				let imgData = context.getImageData(0, 0, canvas.width, canvas.height)
 				
@@ -160,7 +166,9 @@ export default defineComponent({
 						}
 						distance = 0
 						arrows.value.show = false
-						context.putImageData(imgData, 0, 0);
+						const copiedImgData = new ImageData(new Uint8ClampedArray(imgData.data), imgData.width, imgData.height);
+						records.push(copiedImgData)
+						context.putImageData(copiedImgData, 0, 0);
 						optfor = false
 						canvasBox.removeEventListener('mousemove', mouseMove);
 						canvasBox.removeEventListener('touchmove', touchmove);
@@ -203,7 +211,10 @@ export default defineComponent({
 			}else{
 				img.src = data
 			}
+
+
         }
+
 		let distanceSqr = (x1, y1, x2, y2) => sqr(x1 - x2) + sqr(y1 - y2); 
 		let sqr = (x) => x * x;; 
 		let eachCircleDot = (imageData, ox, oy, r, callback)=>{
@@ -244,6 +255,44 @@ export default defineComponent({
 				}
 			}
 		}
+
+		let keyDowns = []
+		let kyeDown = (event)=>{
+			if(keyDowns.indexOf(event.code)>-1){
+			}else{
+				keyDowns.push(event.code)
+				if(keyDowns.indexOf('ControlLeft') > -1 && keyDowns.indexOf('KeyZ') > -1 && keyDowns.indexOf('ShiftLeft') > -1){
+					historyState('')
+				}else if(keyDowns.indexOf('ControlLeft') > -1 && keyDowns.indexOf('KeyZ') > -1){
+					historyState('reverse')
+				}
+			}
+		}
+		let KeyUp = (event) =>{
+			keyDowns = keyDowns.filter(function(item) {
+				return event.code !== item;
+			})
+		}
+		const historyState = (str)=>{
+			console.log(str);
+			let obj
+			if(str == 'reverse' && records.length > 0){//反撤回
+				obj = records.pop()
+				normalCanvasState.push(obj);
+			}else if(str == '' && normalCanvasState.length > 1){
+				obj = normalCanvasState.pop()
+				records.push(obj);
+			}else{
+				return
+			}
+			console.log(obj,context);
+			context.putImageData(obj, 0, 0);
+
+		}
+		onBeforeUnmount(()=>{
+			document.removeEventListener("keydown", kyeDown);
+			document.removeEventListener("keyup", KeyUp);
+		})
 		let copyImageDataBuff = (imgData)=>{
 			var data = imgData.data,
 				imgDataBuff = [];