判断轨迹的有效宽度

src/components/mark/MarkBody.vue

@@ -42,6 +42,7 @@ interface SliceImage {
   dx: number;
   dy: number;
   accumTopHeight: number;
+  effectiveWidth: number;
 }
 export default defineComponent({
   name: "MarkBody",
@@ -158,6 +159,7 @@ export default defineComponent({
             dx: sliceConfig.x,
             dy: sliceConfig.y,
             accumTopHeight,
+            effectiveWidth: sliceConfig.w,
           });
           accumTopHeight = accumBottomHeight;
         }
@@ -235,6 +237,7 @@ export default defineComponent({
               dx: image.naturalWidth * config[0],
               dy: 0,
               accumTopHeight,
+              effectiveWidth: image.naturalWidth * config[1],
             });
             accumTopHeight = accumBottomHeight;
           }
@@ -287,7 +290,6 @@ export default defineComponent({
     });
 
     const makeMark = (event: MouseEvent, item: SliceImage) => {
-      // console.log(event);
       // console.log(item);
       const target = event.target as HTMLImageElement;
       const track = {} as Track;
@@ -306,7 +308,19 @@ export default defineComponent({
       track.positionX = (track.offsetX - item.dx) / maxSliceWidth;
       track.positionY =
         (track.offsetY - item.dy + item.accumTopHeight) / theFinalHeight;
-      // console.log(track);
+      // console.log(
+      //   track,
+      //   item.originalImage.naturalWidth,
+      //   item.originalImage.naturalHeight,
+      //   target.naturalWidth,
+      //   target.width,
+      //   track.offsetX,
+      //   item.effectiveWidth + item.dx
+      // );
+      if (track.offsetX > item.effectiveWidth + item.dx) {
+        console.log("不在有效宽度内，轨迹不生效");
+        return;
+      }
       const markResult = findCurrentTaskMarkResult();
       // console.log("makemark markresult", markResult);
       if (markResult) {