放大、缩小、适应

src/components/mark/Mark.vue

@@ -6,13 +6,14 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, toRefs } from "vue";
+import { defineComponent, onMounted, watch } from "vue";
 import {
   clearMarkTask,
   getGroup,
   getSetting,
   getStatus,
   getTask,
+  updateUISetting,
 } from "@/api/markPage";
 import { store } from "./store";
 import MarkHeader from "./MarkHeader.vue";
@@ -34,6 +35,7 @@ export default defineComponent({
 
     async function updateSetting() {
       const settingRes = await getSetting();
+      settingRes.data.uiSetting["answer.paper.scale"] ||= 1;
       store.setting = settingRes.data;
     }
     async function updateStatus() {
@@ -67,6 +69,14 @@ export default defineComponent({
       updateGroups();
       updateTask();
     });
+
+    watch(
+      () => store.setting.uiSetting,
+      () => {
+        updateUISetting(undefined, store.setting.uiSetting);
+      },
+      { deep: true }
+    );
     return { store };
   },
 });

src/components/mark/MarkBody.vue

@@ -1,14 +1,16 @@
 <template>
   <div class="mark-body-container" ref="container">
-    <template v-for="(item, index) in imageWithStyles" :key="index">
-      <img :src="item.url" />
+    <div :style="{ width: answerPaperScale }">
+      <template v-for="(item, index) in imageWithStyles" :key="index">
+        <img :src="item.url" />
+      </template>
       <!-- style="border: 1px solid black; background: black" -->
-    </template>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, reactive, ref, watchEffect } from "vue";
+import { computed, defineComponent, reactive, ref, watchEffect } from "vue";
 import { store } from "./store";
 import filters from "@/filters";
 
@@ -42,16 +44,12 @@ export default defineComponent({
           const image = await loadImage(url);
 
           const div: HTMLDivElement = container.value;
-          // const containerWidth = +getComputedStyle(div).width.replace("px", "");
-          // console.log(div, containerWidth, sliceConfig);
-          // console.log(container);
-          // const originalWidth = image.naturalWidth;
-          // const originalHeight = image.naturalHeight;
-          // console.log({ originalWidth, originalHeight });
-          // const ratio = containerWidth / originalWidth;
-          // getNaturalWidth
+          const maxSliceWidth = Math.max(
+            ...store.currentTask.sliceConfig.map((v) => v.w)
+          );
+
           const canvas = document.createElement("canvas");
-          canvas.width = sliceConfig.w;
+          canvas.width = Math.max(sliceConfig.w, maxSliceWidth);
           canvas.height = sliceConfig.h;
           const ctx = canvas.getContext("2d");
           ctx?.drawImage(
@@ -65,16 +63,20 @@ export default defineComponent({
             sliceConfig.w,
             sliceConfig.h
           );
-          console.log(image, canvas.height, sliceConfig, ctx);
+          // console.log(image, canvas.height, sliceConfig, ctx);
           // console.log(canvas.toDataURL());
           imageWithStyles.push({
             url: canvas.toDataURL(),
           });
         }
       }
-      console.log("watch effect", imageWithStyles);
     });
-    return { container, store, imageWithStyles };
+
+    const answerPaperScale = computed(() => {
+      const scale = store.setting.uiSetting["answer.paper.scale"] || 1;
+      return scale * 100 + "%";
+    });
+    return { container, store, imageWithStyles, answerPaperScale };
   },
 });
 </script>
@@ -82,6 +84,9 @@ export default defineComponent({
 <style scoped>
 .mark-body-container {
   height: calc(100vh - 21px);
-  /* overflow: scroll; */
+  overflow: scroll;
+}
+.mark-body-container img {
+  width: 100%;
 }
 </style>

src/components/mark/MarkHeader.vue

@@ -27,9 +27,9 @@
     </div>
     <div>
       <ul class="flex gap-1">
-        <li>放大</li>
-        <li>缩小</li>
-        <li>适应</li>
+        <li @click="upScale">放大</li>
+        <li @click="downScale">缩小</li>
+        <li @click="normalScale">适应</li>
       </ul>
     </div>
     <div>回看</div>
@@ -66,7 +66,21 @@ export default defineComponent({
     const group = computed(() => {
       return store.groups.find((g) => g.number === store.setting.groupNumber);
     });
-    return { store, progress, group };
+
+    const upScale = () => {
+      const s = store.setting.uiSetting["answer.paper.scale"];
+      if (s < 3)
+        store.setting.uiSetting["answer.paper.scale"] = +(s + 0.2).toFixed(1);
+    };
+    const downScale = () => {
+      const s = store.setting.uiSetting["answer.paper.scale"];
+      if (s > 0.2)
+        store.setting.uiSetting["answer.paper.scale"] = +(s - 0.2).toFixed(1);
+    };
+    const normalScale = () => {
+      store.setting.uiSetting["answer.paper.scale"] = 1;
+    };
+    return { store, progress, group, upScale, downScale, normalScale };
   },
 });
 </script>

src/devLogin.ts

@@ -3,7 +3,8 @@ export async function initLogin() {
   const f = new FormData();
   f.append("loginType", "mark-login");
   // f.append("loginName", "1-431-2-1");
-  f.append("loginName", "1-339-1-1");
+  // f.append("loginName", "1-339-1-1");
+  f.append("loginName", "1-339-4-1");
   f.append("password", "123456");
 
   return fetch("/login", { body: f, method: "POST" })
@@ -12,7 +13,8 @@ export async function initLogin() {
       const f = new FormData();
       f.append("examId", "1");
       // f.append("markerId", "367");
-      f.append("markerId", "147");
+      // f.append("markerId", "147");
+      f.append("markerId", "221");
 
       return fetch("/mark/subject-select", { body: f, method: "POST" });
     });

src/types/index.ts

@@ -130,6 +130,7 @@ interface PictureSlice {
 
 export interface UISetting {
   "score.board.collapse": boolean;
+  "answer.paper.scale": number; // 0.2 gap
 }
 
 interface MarkResult {