Zoom hacia el mouse (por ej., Google maps)

Question

He escrito una clase de view_port para un juego de estrategia en 2D. La toma panorámica (con las teclas de flecha) y zoom (con la rueda del ratón) funciona bien, pero me gustaría la opinión de que también casa hacia donde se coloca el cursor, como en Google Maps or Supreme Commander

Me ahorraré los detalles de cómo se implementa el zoom e incluso qué idioma estoy usando: esto es irrelevante. Lo importante es la función de zoom, que modifica la estructura del rectángulo (x, y, w, h) que representa la vista. Hasta ahora, el código es el siguiente:

void zoom(float delta, float mouse_x, float mouse_y) 
{ 
    zoom += delta; 
    view.w = window.w/zoom; 
    view.h = window.h/zoom; 
    // view.x = ??? 
    // view.y = ??? 
} 

Antes de que alguien sugiere que, a continuación se hará no trabajo:

view.x = mouse_x - view.w/2; 
view.y = mouse_y - view.h/2; 

Esta imagen ilustra por qué, mientras intento hacer un zoom hacia la cara sonriente:

Como se puede ver cuando el objeto debajo del ratón se coloca en t El centro de la pantalla deja de estar debajo del mouse, ¡así que dejamos de acercarnos a él!

Si tienes una cabeza para las matemáticas (necesitarás una) ¡cualquier ayuda en esto sería muy apreciada!

Answer 1

Me las arreglé para encontrar la solución, gracias a un montón de arañazos a la cabeza una gran cantidad de imágenes: publicaré el algoritmo aquí en caso de que alguien más lo necesite.

Vect2f mouse_true(mouse_position.x/zoom + view.x, mouse_position.y/zoom + view.y); 
Vect2f mouse_relative(window_size.x/mouse_pos.x, window_size.y/mouse_pos.y); 
view.x = mouse_true.x - view.w/mouse_relative.x; 
view.y = mouse_true.y - view.h/mouse_relative.y; 

Esto garantiza que los objetos colocados debajo del mouse permanezcan debajo del mouse. Puede ver el código en github, y también hice una demostración de demostración para youtube.

Answer 2

En mi concepto, hay una cámara y una pantalla. La cámara es la parte móvil. La pantalla es la parte escalable.

Hice un script de ejemplo que incluye una demostración en vivo. El problema se reduce a una sola dimensión para mantenerlo simple. https://www.khanacademy.org/cs/cam-positioning/4772921545326592

var a = (mouse.x + camera.x)/zoom; 

// now increase the zoom e.g.: like that: 
zoom = zoom + 1; 

var newPosition = a * zoom - mouse.x; 

camera.setX(newPosition); 
screen.setWidth(originalWidth * zoom); 

Para un ejemplo 2D simplemente puede añadir el mismo código para la altura y la posición y.