打分在图片边缘的情景处理

package.json

@@ -29,7 +29,7 @@
     "tailwindcss": "^3.1.6",
     "ua-parser-js": "^1.0.2",
     "viewerjs": "^1.10.5",
-    "vue": "^3.2.37",
+    "vue": "3.2.37",
     "vue-router": "^4.1.2"
   },
   "devDependencies": {
@@ -60,4 +60,4 @@
   "optionalDependencies": {
     "cypress": "^10.3.1"
   }
-}
+}

src/devLoginParams.ts

@@ -9,17 +9,17 @@
 // export const markerId="419";
 
 /** 244 评卷员 */
-// export const LOGIN_CONFIG = {
-//   isAdmin: false,
-//   forceChange: true,
-//   loginName: "1-339-5-1",
-//   // loginName: "liuyang",
-//   password: "123456",
-//   examId: "1",
-//   markerId: "147",
-//   // markerId: "482",
-//   // markerId: "483",
-// };
+export const LOGIN_CONFIG = {
+  isAdmin: false,
+  forceChange: true,
+  loginName: "1-339-5-1",
+  // loginName: "liuyang",
+  password: "123456",
+  examId: "1",
+  markerId: "147",
+  // markerId: "482",
+  // markerId: "483",
+};
 // export const LOGIN_CONFIG = {
 //   isAdmin: false,
 //   forceChange: true,
@@ -67,14 +67,14 @@
 //   // markerId: "483",
 // };
 /** 224 管理员 */
-export const LOGIN_CONFIG = {
-  isAdmin: true,
-  forceChange: true,
-  loginName: "admin-test",
-  password: "123456",
-  examId: "1",
-  markerId: null,
-};
+// export const LOGIN_CONFIG = {
+//   isAdmin: true,
+//   forceChange: true,
+//   loginName: "admin-test",
+//   password: "123456",
+//   examId: "1",
+//   markerId: null,
+// };
 // export const LOGIN_CONFIG = {
 //   isAdmin: true,
 //   forceChange: true,

src/features/mark/Mark.vue

@@ -158,6 +158,16 @@ async function updateTask() {
   const res = await getTask();
   if (res.data.libraryId) {
     let rawTask = res.data;
+    // 测试数据：边界打分bug的情况
+    // rawTask.sliceConfig = [
+    //   {
+    //     i: 1,
+    //     x: 0.106299766,
+    //     y: 0.1659829553,
+    //     w: 0.5032476319,
+    //     h: 0.52344,
+    //   },
+    // ];
     const newTask = addFileServerPrefixToTask(rawTask);
 
     try {

src/features/mark/MarkBody.vue

@@ -26,29 +26,50 @@ import CommonMarkBody from "./CommonMarkBody.vue";
 // import MarkBody from "@/features/student/studentInspect/MarkBody.vue";
 
 defineEmits(["error", "allZeroSubmit"]);
-
+const isOffsetLessThan1Px = (a: number, b: number, canEqual?: boolean) => {
+  console.log("a - b", a - b);
+  return canEqual ? a - b > -1 && a - b <= 0 : a - b > -1 && a - b < 0;
+};
 const makeScoreTrack = (
   event: MouseEvent,
   item: SliceImage,
   maxSliceWidth: number,
   theFinalHeight: number
 ) => {
-  // console.log(item);
+  console.log("item", item);
   if (!store.currentQuestion || typeof store.currentScore === "undefined")
     return;
   const target = event.target as HTMLImageElement;
+  let intOffsetX = Math.round(
+    event.offsetX * (target.naturalWidth / target.width) + item.dx
+  );
+  let intOffsetY = Math.round(
+    event.offsetY * (target.naturalHeight / target.height) + item.dy
+  );
+  console.log(
+    "xxx",
+    event.offsetX * (target.naturalWidth / target.width) + item.dx
+  );
+  console.log(
+    "yyy",
+    event.offsetY * (target.naturalHeight / target.height) + item.dy
+  );
   const track: Track = {
     mainNumber: store.currentQuestion?.mainNumber,
     subNumber: store.currentQuestion?.subNumber,
     score: store.currentScore,
     unanswered: Object.is(store.currentScore, -0),
     offsetIndex: item.indexInSliceUrls,
-    offsetX: Math.round(
-      event.offsetX * (target.naturalWidth / target.width) + item.dx
-    ),
-    offsetY: Math.round(
-      event.offsetY * (target.naturalHeight / target.height) + item.dy
-    ),
+    offsetX: isOffsetLessThan1Px(intOffsetX, item.dx)
+      ? Math.ceil(item.dx)
+      : isOffsetLessThan1Px(item.sliceImageWidth, intOffsetX - item.dx)
+      ? intOffsetX - 1
+      : intOffsetX,
+    offsetY: isOffsetLessThan1Px(intOffsetY, item.dy)
+      ? Math.ceil(item.dy)
+      : isOffsetLessThan1Px(item.sliceImageHeight, intOffsetY - item.dy, true)
+      ? intOffsetY - 1
+      : intOffsetY,
     positionX: -1,
     positionY: -1,
     number: -1,