添加画布颜色历史

src/component/Detail/editFrontBack.vue

@@ -36,6 +36,7 @@ import creditsDetail from "@/component/Pay/creditsDetail.vue";
 import { exportSele,JSRectUpdata,JSchangeType,JScanvasMouseDown,JSSetRemoveImage,JScreateCheck,JSSetTexture } from "@/tool/canvasDrawing";
 import { getMousePosition } from "@/tool/mdEvent";
 import { useI18n } from "vue-i18n";
+import canvasGeneral from "@/tool/canvasGeneral";
 export default defineComponent({
     components: {
 		creditsDetail,
@@ -68,6 +69,7 @@ export default defineComponent({
 			if(newVal == -1) return
 			imgDomIndex = newVal
 			props.patchData.front.imageUrl=  ''
+			clearTimeout(setTimeSubmit)
 			init(props.patchData.front[newVal],'')
 		})
 		let canvasBtn = reactive({
@@ -92,14 +94,12 @@ export default defineComponent({
 			imgData.value = data
 			nextTick(()=>{
 				let canvasBox = document.querySelector(".editFrontBack_center .exportCanvasBox_center");
-				var canvasDom = document.createElement("canvas");
 				document.addEventListener("keydown", canvasKeyDown);
 				document.addEventListener("keyup", canvasKeyUp);
 				document.removeEventListener('mousemove', mouseMove);
 				document.removeEventListener('touchmove', touchmove);
-				canvasBox.appendChild(canvasDom);
 				let img = new Image();
-				img.onload = function(){
+				img.onload = async function(){
 					loadingShow.value = true
 					let height = canvasBox.offsetHeight;
 					canvasWH.value = height
@@ -124,32 +124,36 @@ export default defineComponent({
 					fabric.Object.prototype.cornerSize = 10
 					fabric.Object.prototype.transparentCorners = false 
 					exportUrl = data.maskUrl
-					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()
-					},{ 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'){
+						if(canvasBtn.canvasState != 'move'){
 							updateCanvasState('mouseUp')
 						}
 					});
@@ -286,16 +290,16 @@ export default defineComponent({
 		}
 		let setTimeSubmit = null
 		let createSetTimeSubmit = ()=>{
-			clearTimeout(setTimeSubmit)
-			setTimeSubmit = setTimeout(()=>{
-				setSubmit()
-			},1000)
+			setSubmit()
 		}
 		let updateCanvasState = (str) =>{
 			if(str != 'mouseUp'){
 				// editFrontBackPencilbtn.value.style.display = 'none'
 			}else{
-				createSetTimeSubmit()
+				clearTimeout(setTimeSubmit)
+				setTimeSubmit = setTimeout(()=>{
+					createSetTimeSubmit()
+				},1000)
 			}
 			const canvasAsJson = JSON.stringify(canvas.toJSON());
 			normalCanvasState.value.push(canvasAsJson);
@@ -505,6 +509,7 @@ export default defineComponent({
 		height: 100%;
 		flex: 1;
 		position: relative;
+		overflow: hidden;
 		width: 100%;
 		background: #e6e6e6;
 		&:hover{