优化

src/pages/Home/index.vue

@@ -92,6 +92,7 @@
                 alt=""
                 id="picture-img"
                 style="user-select: none"
+                @load="canvasLoad"
               />
               <canvas id="picture"></canvas>
             </div>
@@ -740,18 +741,6 @@ onMounted(() => {
             : (templateInfo.tailsList = JSON.parse(JSON.parse(item.tempData).tempData));
         }
       });
-      nextTick(() => {
-        initCanvas();
-        navListIndex.value = templateInfo.hasPosition ? 0 : 1; //无定位点默认起始下标为1
-        if (!templateInfo.hasPosition) {
-          //无定位点去除第一项
-          navList.splice(0, 1);
-        }
-        setQuestionList(); //回显试题
-        showFabricData(); //回显画布
-        setStepClick(currentNavListIndex.value, false); //设置步骤
-        setNavTitle(); //设置导航栏文字
-      });
     }
   });
 });
@@ -788,6 +777,23 @@ watch(
   },
   { deep: true }
 );
+
+// 图片加载完成
+const canvasLoad = (): void => {
+  if (!ctx.value) {
+    initCanvas();
+    navListIndex.value = templateInfo.hasPosition ? 0 : 1; //无定位点默认起始下标为1
+    if (!templateInfo.hasPosition) {
+      //无定位点去除第一项
+      navList.splice(0, 1);
+    }
+    setQuestionList(); //回显试题
+    showFabricData(); //回显画布
+    setStepClick(currentNavListIndex.value, false); //设置步骤
+    setNavTitle(); //设置导航栏文字
+  }
+};
+
 // 初始化画布并添加事件
 const initCanvas = (): void => {
   imgDom.value = document.getElementById("picture-img");
@@ -1941,7 +1947,7 @@ const changeFabricInfo = (bool: boolean): void => {
       left: fabricItem.get("customFrom").left,
       top: fabricItem.get("customFrom").top,
       width: fabricItem.get("customFrom").width,
-      height: fabricItem.get("customFrom").top,
+      height: fabricItem.get("customFrom").height,
     };
     if (bool) {
       switch (navListIndex.value) {
@@ -2844,7 +2850,7 @@ const changeData = (): any => {
         ...row.customFrom,
         width: row.width,
         height: row.height - 36.16,
-        top: row.top + 20,
+        top: row.top + 16,
         left: row.left,
       };
     });
@@ -2853,7 +2859,7 @@ const changeData = (): any => {
         ...row.customFrom,
         width: row.width,
         height: row.height - 36.16,
-        top: row.top + 20,
+        top: row.top + 16,
         left: row.left,
       };
     });
@@ -2862,7 +2868,7 @@ const changeData = (): any => {
         ...row.customFrom,
         width: row.width,
         height: row.height - 36.16,
-        top: row.top + 20,
+        top: row.top + 16,
         left: row.left,
       };
     });
@@ -2871,7 +2877,7 @@ const changeData = (): any => {
         ...row.customFrom,
         width: row.width,
         height: row.height,
-        top: row.top + 20,
+        top: row.top + 16,
         left: row.left,
       };
     });
@@ -3138,14 +3144,19 @@ const save = async (isShow: boolean = false): Promise<void> => {
         width: 100%;
         overflow: auto;
 
-        @mixin isPageType($number, $type) {
+        @mixin isPageType($type) {
           width: 100%;
           height: 100%;
 
           > #zoom-div {
             margin: 0 auto;
-            width: calc(210mm * #{$number});
-            height: 297mm;
+            @if $type == "A3" {
+              width: 1570px;
+            } @else {
+              width: 1200px;
+            }
+
+            height: auto;
             flex-shrink: 0;
             position: relative;
             transform-origin: left top;
@@ -3193,11 +3204,11 @@ const save = async (isShow: boolean = false): Promise<void> => {
         }
 
         .A4 {
-          @include isPageType(1, "A4");
+          @include isPageType("A4");
         }
 
         .A3 {
-          @include isPageType(2, "A3");
+          @include isPageType("A3");
         }
       }
     }