this time the bug is absolutely fix!: display offset of the red point…

…s in the generated image and the green points of the actual clicks.！
creeponsky · Apr 9, 2023 · 09119b5 · 09119b5
1 parent 53ca8e3
commit 09119b5
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 38 deletions.
diff --git a/src/main.ts b/src/main.ts
@@ -3,24 +3,27 @@ $(document).ready(function () {
     let img = document.getElementById('clickable-image') as HTMLImageElement;
     $('#clickable-image').on('click', function (event) {
         const img = $(this);
-        const offset = img.offset();
-
-        if (offset) {
-            const x = event.pageX - offset.left;
-            const y = event.pageY - offset.top;
-            points.push({ x: x, y: y });
-
-            const point = $('<div class="point"></div>');
-            point.css({
-                left: x + 'px',
-                top: y + 'px',
-            });
-            $('#image-container').append(point);
-
-            console.log('Clicked at', x, y);
-            console.log('Current points:', points);
+
+        const x = event.offsetX;
+        const y = event.offsetY;
+
+        // 确保点击点在图片范围内
+        if (x < 0 || x > img.width()! || y < 0 || y > img.height()!) {
+            return;
         }
-    });
+
+        points.push({ x: x, y: y });
+
+        const point = $('<div class="point"></div>');
+        point.css({
+            left: x + 'px',
+            top: y + 'px',
+        });
+        $('#image-container').append(point);
+
+        console.log('Clicked at', x, y);
+        console.log('Current points:', points);
+    });    
 
     // Automatically submit the form when a file is selected
     $('#image').on('change', function () {
@@ -78,8 +81,6 @@ $(document).ready(function () {
         });
         $('#output-image-container').empty().append(imgElement);
     }
-
-
 
     function getDisplayedImageSize(image: HTMLImageElement) {
         return {

diff --git a/static/style.css b/static/style.css
@@ -13,30 +13,16 @@ img {
 
 #image-container,
 #output-image-container {
-  overflow: hidden;
-  background-color: black;
-}
-
-#clickable-image,
-#output-image {
-  max-width: 100%;
-  max-height: 100%;
-  object-fit: contain;
-}
-
-#image-container {
   position: relative;
   display: inline-block;
-  width: 45%;
-  width: 600px;
-  height: 600px;
+  background-color: lightgrey;
   overflow: hidden;
 }
 
-#clickable-image {
-  cursor: crosshair;
-  max-width: 100%;
-  height: 100%;
+#clickable-image,
+#output-image {
+  max-width: 700px;
+  max-height: 600px;
   object-fit: contain;
 }