Comment zoomer sur un canevas jusqu'à la position du curseur de la souris en HTML5 ?

Zoom sur un canevas avec le curseur de la souris

Lors de la création d'un projet impliquant un zoom, l'alignement du zoom avec la position du curseur est crucial pour une expérience conviviale. Cet article a pour objectif de vous guider dans les calculs nécessaires à la mise en œuvre de cette fonctionnalité.

Problème :

Comment zoomer un canevas par rapport à la position du curseur, similaire à Google Cartes ?

Variables disponibles :

• Coordonnées de l'image (x, y)
• Dimensions de l'image (largeur, hauteur)
• Coordonnées du curseur par rapport au centre du canevas (cursor_x, curseur_y)

Solution :

1. Traduire le canevas : Déplacez le contexte du canevas en fonction du décalage du curseur, permettant ainsi de zoomer autour du curseur.
2. Ajustez le contexte du canevas : Ajustez le facteur d'échelle pour effectuer un zoom avant ou arrière.
3. Traduire en arrière : Remettre le contexte du canevas à sa position d'origine, en compensant la traduction initiale.

Voici l'extrait de code :

<code class="javascript">ctx.translate(cursor_x, cursor_y);
ctx.scale(factor, factor);
ctx.translate(-cursor_x, -cursor_y);</code>

Exemple dans Action :

Visitez http://phrogz.net/tmp/canvas_zoom_to_cursor.html pour une démonstration en direct. Il prend en charge le glisser et le zoom avec les clics de souris et la molette de défilement.

Remarque :

• Pour un zoom précis, transformez la position du curseur de l'espace de l'écran à la position transformée contexte du canevas.
• Actuellement, le comportement de zoom de Safari diffère de celui des autres navigateurs, ce qui entraîne un zoom excessif.

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!