fix: 新增评卷员之后原轨迹还原问题

src/features/arbitrate/ArbitrateBody.vue

@@ -15,12 +15,7 @@ import { SliceImage, SpecialTag, Track } from "@/types";
 
 const markStore = useMarkStore();
 
-const makeScoreTrack = (
-  event: MouseEvent,
-  item: SliceImage,
-  maxSliceWidth: number,
-  theFinalHeight: number
-) => {
+const makeScoreTrack = (event: MouseEvent, item: SliceImage) => {
   if (
     !markStore.currentQuestion ||
     typeof markStore.currentScore === "undefined"
@@ -35,13 +30,8 @@ const makeScoreTrack = (
     offsetIndex: item.indexInSliceUrls,
     offsetX: event.offsetX * (target.naturalWidth / target.width) + item.dx,
     offsetY: event.offsetY * (target.naturalHeight / target.height) + item.dy,
-    positionX: -1,
-    positionY: -1,
     number: -1,
   };
-  track.positionX = (track.offsetX - item.dx) / maxSliceWidth;
-  track.positionY =
-    (track.offsetY - item.dy + item.accumTopHeight) / theFinalHeight;
 
   if (track.offsetX > item.effectiveWidth + item.dx) {
     console.log("不在有效宽度内，轨迹不生效");
@@ -91,12 +81,7 @@ const makeScoreTrack = (
   item.markerTrackList.push(track);
 };
 
-const makeSpecialTagTrack = (
-  event: MouseEvent,
-  item: SliceImage,
-  maxSliceWidth: number,
-  theFinalHeight: number
-) => {
+const makeSpecialTagTrack = (event: MouseEvent, item: SliceImage) => {
   if (
     !markStore.currentTask ||
     typeof markStore.currentSpecialTag === "undefined"
@@ -108,12 +93,7 @@ const makeSpecialTagTrack = (
     offsetIndex: item.indexInSliceUrls,
     offsetX: event.offsetX * (target.naturalWidth / target.width) + item.dx,
     offsetY: event.offsetY * (target.naturalHeight / target.height) + item.dy,
-    positionX: -1,
-    positionY: -1,
   };
-  track.positionX = (track.offsetX - item.dx) / maxSliceWidth;
-  track.positionY =
-    (track.offsetY - item.dy + item.accumTopHeight) / theFinalHeight;
 
   if (
     item.tagList.some((t) => {
@@ -131,19 +111,14 @@ const makeSpecialTagTrack = (
   item.tagList.push(track);
 };
 
-const makeTrack = (
-  event: MouseEvent,
-  item: SliceImage,
-  maxSliceWidth: number,
-  theFinalHeight: number
-) => {
+const makeTrack = (event: MouseEvent, item: SliceImage) => {
   if (
     markStore.setting.uiSetting["specialTag.modal"] &&
     markStore.currentSpecialTag
   ) {
-    makeSpecialTagTrack(event, item, maxSliceWidth, theFinalHeight);
+    makeSpecialTagTrack(event, item);
   } else {
-    makeScoreTrack(event, item, maxSliceWidth, theFinalHeight);
+    makeScoreTrack(event, item);
   }
 };
 

src/features/mark/MarkBodyBase.vue

@@ -43,11 +43,7 @@
               :dy="item.dy"
               @clickSpecialtag="(event) => clickSpecialtag(event, item)"
             />
-            <MarkBodySepecialTag
-              :maxSliceWidth="maxSliceWidth"
-              :theFinalHeight="theFinalHeight"
-              :sliceImageItem="item"
-            />
+            <MarkBodySepecialTag :sliceImageItem="item" />
           </div>
           <hr class="image-seperator" />
         </template>
@@ -81,9 +77,7 @@ type MakeTrack = (
         offsetY: number;
       }
     | MouseEvent,
-  item: SliceImage,
-  maxSliceWidth: number,
-  theFinalHeight: number
+  item: SliceImage
 ) => void | (() => void);
 
 const {
@@ -99,8 +93,9 @@ const { answerPaperScale } = useBodyScroll({
   shortCut: true,
   autoScroll: true,
 });
-const { rotateBoard, sliceImagesWithTrackList, maxSliceWidth, theFinalHeight } =
-  useSliceTrack(hasMarkResultToRender);
+const { rotateBoard, sliceImagesWithTrackList } = useSliceTrack(
+  hasMarkResultToRender
+);
 const { showBigImage } = useBigImage();
 
 // 在轨迹模式下，仅当没有选择分数时可用。
@@ -182,7 +177,7 @@ const innerMakeTrack = (event: MouseEvent, item: SliceImage) => {
     return;
   }
 
-  makeTrack(event, item, maxSliceWidth.value, theFinalHeight.value);
+  makeTrack(event, item);
 };
 
 // 点击特殊标记
@@ -196,6 +191,6 @@ const clickSpecialtag = (event: MouseEvent, item: SliceImage) => {
     offsetY: event.offsetY + target.offsetTop,
   };
 
-  makeTrack(e as MouseEvent, item, maxSliceWidth.value, theFinalHeight.value);
+  makeTrack(e as MouseEvent, item);
 };
 </script>

src/features/mark/MarkBodySepecialTag.vue

@@ -45,9 +45,7 @@ import { useMarkStore } from "@/store";
 import { vEleMoveDirective } from "@/directives/eleMove";
 import { randomCode } from "@/utils/utils";
 
-const { maxSliceWidth, theFinalHeight, sliceImageItem } = defineProps<{
-  maxSliceWidth: number;
-  theFinalHeight: number;
+const { sliceImageItem } = defineProps<{
   sliceImageItem: SliceImage;
 }>();
 
@@ -155,17 +153,8 @@ function specialMouseStop() {
     offsetY:
       specialPoint.y * (curImageTarget.naturalHeight / curImageTarget.height) +
       curSliceImagesWithTrackItem.dy,
-    positionX: -1,
-    positionY: -1,
     groupNumber: markStore.currentQuestion.groupNumber,
   };
-  track.positionX =
-    (track.offsetX - curSliceImagesWithTrackItem.dx) / maxSliceWidth;
-  track.positionY =
-    (track.offsetY -
-      curSliceImagesWithTrackItem.dy +
-      curSliceImagesWithTrackItem.accumTopHeight) /
-    theFinalHeight;
 
   if (markStore.currentSpecialTagType === "LINE") {
     track.tagName = JSON.stringify({
@@ -253,17 +242,8 @@ function textTrackBlur() {
       cacheTextTrack.y *
         (curImageTarget.naturalHeight / curImageTarget.height) +
       curSliceImagesWithTrackItem.dy,
-    positionX: -1,
-    positionY: -1,
     groupNumber: markStore.currentQuestion.groupNumber,
   };
-  track.positionX =
-    (track.offsetX - curSliceImagesWithTrackItem.dx) / maxSliceWidth;
-  track.positionY =
-    (track.offsetY -
-      curSliceImagesWithTrackItem.dy +
-      curSliceImagesWithTrackItem.accumTopHeight) /
-    theFinalHeight;
 
   markStore.currentTaskEnsured.markResult.markerTagList.push(track);
   curSliceImagesWithTrackItem.tagList.push(track);

src/features/mark/composables/useMakeTrack.ts

@@ -5,12 +5,7 @@ export default function useMakeTrack() {
   const markStore = useMarkStore();
 
   // 标记分数轨迹
-  function makeScoreTrack(
-    event: MouseEvent,
-    item: SliceImage,
-    maxSliceWidth: number,
-    theFinalHeight: number
-  ) {
+  function makeScoreTrack(event: MouseEvent, item: SliceImage) {
     if (
       !markStore.currentQuestion ||
       typeof markStore.currentScore === "undefined"
@@ -31,13 +26,8 @@ export default function useMakeTrack() {
       offsetY: Math.round(
         event.offsetY * (target.naturalHeight / target.height) + item.dy
       ),
-      positionX: -1,
-      positionY: -1,
       number: -1,
     };
-    track.positionX = (track.offsetX - item.dx) / maxSliceWidth;
-    track.positionY =
-      (track.offsetY - item.dy + item.accumTopHeight) / theFinalHeight;
 
     if (track.offsetX > item.effectiveWidth + item.dx) {
       console.log("不在有效宽度内，轨迹不生效");
@@ -89,12 +79,7 @@ export default function useMakeTrack() {
   }
 
   // 标记特殊轨迹 （特殊轨迹包括：文字、线条、圆圈）
-  function makeSpecialTagTrack(
-    event: MouseEvent,
-    item: SliceImage,
-    maxSliceWidth: number,
-    theFinalHeight: number
-  ) {
+  function makeSpecialTagTrack(event: MouseEvent, item: SliceImage) {
     if (
       !markStore.currentTask ||
       typeof markStore.currentSpecialTag === "undefined"
@@ -114,12 +99,7 @@ export default function useMakeTrack() {
       offsetY: Math.round(
         event.offsetY * (target.naturalHeight / target.height) + item.dy
       ),
-      positionX: -1,
-      positionY: -1,
     };
-    track.positionX = (track.offsetX - item.dx) / maxSliceWidth;
-    track.positionY =
-      (track.offsetY - item.dy + item.accumTopHeight) / theFinalHeight;
 
     if (
       item.tagList.some((t) => {
@@ -138,20 +118,15 @@ export default function useMakeTrack() {
   }
 
   // 标记轨迹
-  function makeTrack(
-    event: MouseEvent,
-    item: SliceImage,
-    maxSliceWidth: number,
-    theFinalHeight: number
-  ) {
+  function makeTrack(event: MouseEvent, item: SliceImage) {
     if (markStore.currentSpecialTagType) {
-      makeSpecialTagTrack(event, item, maxSliceWidth, theFinalHeight);
+      makeSpecialTagTrack(event, item);
       if (markStore.currentSpecialTagType === "TEXT") {
         markStore.currentSpecialTag = undefined;
         markStore.currentSpecialTagType = undefined;
       }
     } else {
-      makeScoreTrack(event, item, maxSliceWidth, theFinalHeight);
+      makeScoreTrack(event, item);
     }
   }
 

src/features/mark/composables/useSliceTrack.ts

@@ -36,6 +36,7 @@ export default function useSliceTrack(hasMarkResultToRender = false) {
     markStore.currentTask.sliceConfig =
       markStore.currentTask.sliceConfig.filter((v) => v.i <= sliceNum);
     for (const sliceConfig of markStore.currentTask.sliceConfig) {
+      // 在原图基础上设置遮盖区之后的图，用作制作阅卷裁切图的原图
       const url = markStore.currentTask.sliceUrls[sliceConfig.i - 1];
       const image = await loadImage(url);
       images[sliceConfig.i] = image;
@@ -100,19 +101,21 @@ export default function useSliceTrack(hasMarkResultToRender = false) {
       tempSliceImagesWithTrackList.push({
         url: dataUrl,
         indexInSliceUrls: sliceConfig.i,
-        // 通过positionY来定位是第几张slice的还原，并过滤出相应的track
+        // 通过轨迹位置是否落在裁切图上来定位轨迹在第几张图片
         markerTrackList: thisImageTrackList.filter(
           (t) =>
-            t.positionY >= accumTopHeight / theFinalHeight.value &&
-            t.positionY < accumBottomHeight / theFinalHeight.value
+            t.offsetX >= sliceConfig.x &&
+            t.offsetX <= sliceConfig.x + sliceConfig.w &&
+            t.offsetY >= sliceConfig.y &&
+            t.offsetY <= sliceConfig.y + sliceConfig.h
         ),
         tagList: thisImageTagList.filter(
           (t) =>
-            t.positionY >= accumTopHeight / theFinalHeight.value &&
-            t.positionY < accumBottomHeight / theFinalHeight.value
+            t.offsetX >= sliceConfig.x &&
+            t.offsetX <= sliceConfig.x + sliceConfig.w &&
+            t.offsetY >= sliceConfig.y &&
+            t.offsetY <= sliceConfig.y + sliceConfig.h
         ),
-        // originalImageWidth: image.naturalWidth,
-        // originalImageHeight: image.naturalHeight,
         sliceImageWidth: sliceImageRendered.naturalWidth,
         sliceImageHeight: sliceImageRendered.naturalHeight,
         dx: sliceConfig.x,
@@ -256,13 +259,17 @@ export default function useSliceTrack(hasMarkResultToRender = false) {
           indexInSliceUrls: markStore.currentTask.sliceUrls.indexOf(url) + 1,
           markerTrackList: thisImageTrackList.filter(
             (t) =>
-              t.positionY >= accumTopHeight / theFinalHeight.value &&
-              t.positionY < accumBottomHeight / theFinalHeight.value
+              t.offsetX >= sliceConfig.x &&
+              t.offsetX <= sliceConfig.x + sliceConfig.w &&
+              t.offsetY >= sliceConfig.y &&
+              t.offsetY <= sliceConfig.y + sliceConfig.h
           ),
           tagList: thisImageTagList.filter(
             (t) =>
-              t.positionY >= accumTopHeight / theFinalHeight.value &&
-              t.positionY < accumBottomHeight / theFinalHeight.value
+              t.offsetX >= sliceConfig.x &&
+              t.offsetX <= sliceConfig.x + sliceConfig.w &&
+              t.offsetY >= sliceConfig.y &&
+              t.offsetY <= sliceConfig.y + sliceConfig.h
           ),
           // originalImageWidth: image.naturalWidth,
           // originalImageHeight: image.naturalHeight,

src/types/index.ts

@@ -366,9 +366,6 @@ export interface Track {
   /** 左上角为原点 */
   offsetX: number;
   offsetY: number;
-  /** 相对slice的位置比例 */
-  positionX: number;
-  positionY: number;
   /** 是否此处未作答，未作答时，score默认是-0分 */
   unanswered: boolean;
   // 是否是复核员复核轨迹 headTrackList没有这个属性
@@ -390,9 +387,6 @@ export interface SpecialTag {
   /** 左上角为原点(原图的原点)，及相对原图的位置比例 */
   offsetX: number;
   offsetY: number;
-  /** 相对裁切图的位置比例 */
-  positionX: number;
-  positionY: number;
   /** 特殊标记的字符串，勾叉 */
   tagName: string;
   tagType: "TEXT" | "CIRCLE" | "RIGHT" | "WRONG" | "HALF_RIGTH" | "LINE";