Estoy cargando un mapa que se puede arrastrar y acercar y alejar con el lienzo HTML5. Esto funciona perfecto. También puedo colocar un marcador, es decir, en píxeles 500x 600y. Pero cuando acerco o alejo el mapa, los píxeles obviamente cambian y los 500x y 600y ya no son correctos. Por lo tanto, el marcador se desplazará un poco y su posición ya no será correcta.

Si me alejara una vez y la consola registrara el tamaño del mapa que originalmente era 4097 x 2142, ahora es 3687,3 x 1927,8. Creo que esto también significa que la posición del marcador original de [500, 500] debe volver a calcularse para solucionar mi problema... pero no tengo ni idea de cómo hacerlo.

Llevo días tratando de averiguar cómo solucionar esto, pero no tengo ni idea... ¿alguien puede ayudarme a resolver este problema?

Estoy usando Vue (Nuxt) y lienzo HTML5. Puedo proporcionar un zip con mi proyecto si eso ayuda;)

A continuación se muestra la pieza de código más importante que reconozco:

 // Initial position when the map is loaded (map size 4097x2142) ICO_POS.value = [500, 500] // Icon will be displayed at 500x 6000y // This function will check if we zoomed in or out const zoom = (e) => { if (e.wheelDelta > 0) { zoomIn() } else { zoomOut() } } // Zoom in function const zoomIn = (e) => { if (DEFAULT_ZOOM.value < MAX_ZOOM) { DEFAULT_ZOOM.value += ZOOM_STEP } } // Zoom out function const zoomOut = (e) => { if (DEFAULT_ZOOM.value > MIN_ZOOM) { DEFAULT_ZOOM.value -= ZOOM_STEP } } // This function will draw the map and icons const drawImage = () => { // Draw the map const w = image.width * DEFAULT_ZOOM.value const h = image.height * DEFAULT_ZOOM.value const x = DRAW_POS.value[0] - (w / 2) const y = DRAW_POS.value[1] - (h / 2) context.drawImage(image, x, y, w, h) // Draw the icon const w2 = (image2.width * 3) * DEFAULT_ZOOM.value const h2 = (image2.height * 3) * DEFAULT_ZOOM.value const x2 = ICO_POS.value[0] - (w2 / 2) const y2 = ICO_POS.value[1] - (h2 / 2) context.drawImage(image2, x2, y2, w2, h2) }