Comment zoomer un contexte de canevas sur le curseur de la souris en HTML5 ?

Zoom sur le contexte du canevas avec le curseur de la souris

Dans un projet de canevas HTML5 impliquant un zoom d'image à l'aide de la molette de défilement, vous pouvez rencontrer le défi de zoomer vers le curseur, similaire à la fonctionnalité de Google Maps. Pour obtenir cet effet, une série de calculs sont nécessaires.

Calcul des mouvements

1. Détermination de la transformation du contexte du canevas :

   • Traduisez le contexte du canevas par le décalage du curseur (pt.x, pt.y).
   • Ajustez le contexte à l'aide un facteur de zoom (facteur).
   • Traduisez le contexte par le négatif du décalage du curseur.

   <code class="js">ctx.translate(pt.x, pt.y);
   ctx.scale(factor, factor);
   ctx.translate(-pt.x, -pt.y);</code>

2. Transformation de la position du curseur :

   • Les coordonnées de l'espace d'écran du curseur doivent être converties en coordonnées du contexte du canevas transformé pour un zoom précis.

Exemple de démonstration

Visitez le lien suivant pour un exemple fonctionnel qui comprend :

• Toile image zoomant sur le curseur
• Support de déplacement
• Cliquez pour zoomer, Maj-cliquez pour effectuer un zoom arrière
• Zoom avec molette de défilement

Démo : http://phrogz.net/tmp/canvas_zoom_to_cursor.html

Remarque : Dans Safari, le comportement du zoom 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!