客观题检查答案位置还原调试

src/features/check/ObjectiveAnswer.vue

@@ -92,6 +92,11 @@
             >
               {{ tag.answer }}
             </div>
+            <div
+              v-for="(tag, tindex) in optionsBlocks"
+              :key="tindex + 'block'"
+              :style="tag.style"
+            ></div>
           </div>
         </div>
         <ZoomPaper v-if="student" showRotate fixed @rotateRight="rotateRight" />
@@ -234,6 +239,7 @@ interface AnswerTagType {
   style: Record<string, string>;
 }
 let answerTags = $ref([]);
+let optionsBlocks = $ref([]);
 
 const answersComputed = $computed(() => {
   let mains = student?.answers.map((v) => ({
@@ -373,6 +379,7 @@ async function saveStudentAnswer() {
 function paperLoad() {
   if (!student.sheetUrls[currentImage]?.recogData) {
     answerTags = [];
+    optionsBlocks = [];
     return;
   }
   const imgDom = document.getElementById("mark-body-paper");
@@ -382,30 +389,61 @@ function paperLoad() {
   );
 
   answerTags = [];
+  optionsBlocks = [];
   recogData.question.forEach((question) => {
     question.fill_result.forEach((result) => {
       const tagSize = result.fill_size[1];
       const fillPositions = result.fill_position.map((pos) => {
         return pos.split(",").map((n) => n * 1);
       });
+
+      const offsetLt = result.fill_size.map((item) => item * 0.4);
       const tagLeft =
-        maxNum(fillPositions.map((pos) => pos[0])) + result.fill_size[0] + 2;
+        maxNum(fillPositions.map((pos) => pos[0])) +
+        result.fill_size[0] -
+        offsetLt[0];
+      const tagTop = fillPositions[0][1] - offsetLt[1];
 
       answerTags.push({
         mainNumber: result.main_number,
         subNumber: result.sub_number,
         answer: answerMap[`${result.main_number}_${result.sub_number}`],
         style: {
-          height: ((100 * tagSize) / naturalHeight).toFixed(2) + "%",
-          fontSize: ((100 * 20) / tagSize).toFixed(2) + "%",
-          left: ((100 * tagLeft) / naturalWidth).toFixed(2) + "%",
-          top: ((100 * fillPositions[0][1]) / naturalHeight).toFixed(2) + "%",
+          height: ((100 * tagSize) / naturalHeight).toFixed(4) + "%",
+          fontSize: ((100 * 20) / tagSize).toFixed(4) + "%",
+          left: ((100 * tagLeft) / naturalWidth).toFixed(4) + "%",
+          top: ((100 * tagTop) / naturalHeight).toFixed(4) + "%",
           position: "absolute",
           color: "#f53f3f",
           lineHeight: 1,
           zIndex: 9,
         },
       });
+
+      // 测试：选项框
+      // fillPositions.forEach((fp, index) => {
+      //   optionsBlocks.push({
+      //     mainNumber: result.main_number,
+      //     subNumber: result.sub_number,
+      //     filled: !!result.fill_option[index],
+      //     style: {
+      //       width:
+      //         ((100 * result.fill_size[0]) / naturalWidth).toFixed(4) + "%",
+      //       height:
+      //         ((100 * result.fill_size[1]) / naturalHeight).toFixed(4) + "%",
+      //       left:
+      //         ((100 * (fp[0] - offsetLt[0])) / naturalWidth).toFixed(4) + "%",
+      //       top:
+      //         ((100 * (fp[1] - offsetLt[1])) / naturalHeight).toFixed(4) + "%",
+      //       position: "absolute",
+      //       border: "1px solid #f53f3f",
+      //       background: result.fill_option[index]
+      //         ? "rgba(245, 63, 63, 0.5)"
+      //         : "transparent",
+      //       zIndex: 9,
+      //     },
+      //   });
+      // });
     });
   });
 }