Canvas: Move et Zoom avec la Souris

Soyez le premier à donner votre avis sur cette source.

Vue 2 993 fois - Téléchargée 398 fois

Description

Bonjour,

En plus du déplacement (move) avec la souris, implantons également la dilatation (zoom) avec la roulette de la souris.

Malheureusement, le traitement de cette roulette (mouse wheel) est différent sur les navigateurs actuels.

Pour le move, voir: Canvas: Déplacement avec la Souris.

Nous allons utiliser les variables dil,u0,v0 pour effectuer la transformation 2D:

u' = u0 + dil*u
v' = v0 + dil*v

Zoom simple

Le zoom le plus simple à coder est celui ou l'on multiplie ou divise "simplement" le facteur dil par une constante:
    function Move(e) {
      if (mov) {
        u0+=e.clientX-cX; v0+=e.clientY-cY; cX=e.clientX; cY=e.clientY;
        Draw();
      }
    }

    function Zoom(e) {
      var d=(e.detail==0)?e.wheelDelta:-e.detail;
      if (d>0) dil*=1.0905077327; else dil/=1.0905077327;
      Draw();
    }

Cela correspond à une dilatation autour du point (u0,v0), qui reste fixe.

Zoom intelligent

Ce zoom se fait selon le pointeur de la souris, c'est-à-dire qu'on agrandit (ou diminue) la zone autour du point montré par la souris.
Les variables X0 et Y0 correspondent au "BoundingClientRect" du Canvas:;
    function Move(e) {
      if (mov) {
        var x=e.clientX-X0,y=e.clientY-Y0;
        u0+=x-cX; v0+=y-cY; cX=x; cY=y;
        Draw();
      }
    }

    function Zoom(e) {
      var d=(e.detail==0)?e.wheelDelta:-e.detail;
      if (d>0) d=1.0905077327; else d=1/1.0905077327;
      u0+=(1-d)*(e.clientX-X0-u0); v0+=(1-d)*(e.clientY-Y0-v0);
      dil*=d;
      Draw();
    }




Testé avec les dernières versions des navigateurs:
Chrome, Firefox, IE, Opera, Safari


Bonne lecture ...

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Sebvisa
Messages postés
1
Date d'inscription
vendredi 11 mai 2018
Statut
Membre
Dernière intervention
11 mai 2018
-
Bonjour,

Je souhaite faire la même chose, mais sur une image...
Cependant, je n'y arrive pas :-(

Pouvez vous m'indiquer le code correspondant ?

Merci beaucoup pour votre aide.


Sebastien
William VOIROL
Messages postés
261
Date d'inscription
mardi 12 décembre 2006
Statut
Membre
Dernière intervention
10 juin 2019
-
Bonjour Sebvisa,

Je pense que vous pouvez trouver ce que vous cherchez dans le code
Photos plein écran (full screen picture viewer)
présenté en 2014.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.