web: adjust the page zoom

wuhan005 · Nov 30, 2024 · a6c59c1 · a6c59c1
1 parent c3b5732
commit a6c59c1
Showing 1 changed file with 5 additions and 2 deletions.
diff --git a/web/src/App.vue b/web/src/App.vue
@@ -234,8 +234,11 @@ const handleMouseDown = (event: MouseEvent) => {
   event.preventDefault()
 
   if (isPainting.value) {
-    const x = Math.floor(event.offsetX / ratio.value - deltaX.value)
-    const y = Math.floor(event.offsetY / ratio.value - deltaY.value)
+    // #1 If the web page is zoomed in, we need to adjust the offset.
+    const paintingCanvasRatio = paintingCanvas.value!.getBoundingClientRect().width / paintingCanvas.value!.width
+
+    const x = Math.floor(event.offsetX / ratio.value / paintingCanvasRatio - deltaX.value)
+    const y = Math.floor(event.offsetY / ratio.value / paintingCanvasRatio - deltaY.value)
     const pixel = {x, y, color: currentColor.value}
 
     if (paintedPixels.value.some(p => p.x === pixel.x && p.y === pixel.y)) {