Canvas: Move et Zoom avec la Souris

Télécharger le projet
Commenter

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 ...
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (William VOIROL)