## Comment obtenir une fonctionnalité de zoom sur curseur fluide dans HTML5 Canvas ?

Maintenir la mise au point du zoom autour du curseur de la souris

Lors de la navigation dans les images en HTML5, le zoom autour du curseur de la souris, comme dans Google Maps, ajoute une expérience utilisateur intuitive. Mais calculer ce mouvement peut être déroutant.

Approche :

Pour zoomer vers le curseur :

• Traduire : Décaler le contexte du canevas en le décalage du curseur.
• Échelle : Zoom selon le facteur souhaité.
• Traduction inversée : Recul en arrière de l'opposé du décalage du curseur.

Calcul :

Étant donné la position et les dimensions de l'image, ainsi que les coordonnées du curseur par rapport au centre du canevas :

• Convertir la position du curseur dans le canevas transformé contexte : dx = (cursorX - canvasCenterX) * échelle ; dy = (cursorY - canvasCenterY) * échelle;
• Traduire : ctx.translate(dx, dy);
• Échelle : ctx.scale(factor, factor);
• Traduction inversée : ctx.translate(-dx, -dy);

Démonstration :

Visitez le lien de démonstration fourni : http://phrogz.net/tmp/canvas_zoom_to_cursor.html .

Cet exemple comprend le glisser-déposer, le clic pour zoomer, la touche Maj-clic-pour zoomer et le zoom avec la molette de défilement.

Remarque :

Actuellement, la vitesse de zoom de Safari peut différer de Chrome ou 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!