Comment imiter le comportement du zoom de Google Maps avec Canvas : zoomer autour du curseur de la souris ?

Zoom sur le canevas autour du curseur de la souris

Le zoom sur les images à l'aide de la molette de défilement est une fonctionnalité courante dans les applications Web. Dans ce cas, le but est d'imiter le comportement de Google Maps, où le zoom s'effectue autour du curseur de la souris.

Problème

Le défi réside dans le calcul des mouvements nécessaires pour obtenir cet effet de zoom. Étant donné les coordonnées du coin supérieur gauche de l'image, la largeur, la hauteur et les coordonnées x et y du curseur de la souris par rapport au centre du canevas, comment déterminer les transformations de zoom ?

Solution

La solution implique trois étapes en utilisant le contexte du canevas :

1. Traduire : Déplacez l'origine du contexte vers la position du curseur de la souris pour centrer le zoom autour d'elle.
2. Échelle : Effectuez un zoom avant ou arrière selon le facteur souhaité.
3. Traduction (inversée) : Remettez l'origine à sa position d'origine.

Le code JavaScript suivant implémente ces étapes :

ctx.translate(pt.x,pt.y);
ctx.scale(factor,factor);
ctx.translate(-pt.x,-pt.y);

Démo et notes supplémentaires

Une démonstration fonctionnelle de cette technique peut être trouvée ici : http ://phrogz.net/tmp/canvas_zoom_to_cursor.html

La démo prend en charge le glisser, cliquer pour zoomer, maj-cliquer pour zoomer et le zoom avec la molette de défilement. Il convient de noter que Safari présente un comportement de zoom plus rapide que d'autres navigateurs comme Chrome et Firefox.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!