Увеличьте точку (используя масштаб и перевод)

Question

Я хочу иметь возможность увеличивать точку под мышью на холсте HTML 5, как увеличение Google Maps . Как мне этого добиться?

Answer 1

Вы можете использовать функцию scrollto (x, y) для обработки положения полосы прокрутки вправо до точки, которую вам нужно показать после масштабирования. Для нахождения положения мыши используйте event.clientX и event.clientY. это вам поможет

Answer 2

Вам нужно получить точку в мировом пространстве (в противоположность пространству экрана) до и после масштабирования, а затем перевести с помощью дельты.

mouse_world_position = to_world_position(mouse_screen_position);
zoom();
mouse_world_position_new = to_world_position(mouse_screen_position);
translation += mouse_world_position_new - mouse_world_position;

Положение мыши находится в пространстве экрана, поэтому вы должны преобразовать его в мировое пространство. Простое преобразование должно быть похоже на это:

world_position = screen_position / scale - translation