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 :
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!