Canvas: Déplacement avec la Souris

Soyez le premier à donner votre avis sur cette source.

Vue 7 755 fois - Téléchargée 690 fois

Télécharger le projet
Commenter

Description

Bonjour,

Voici deux petits codes HTML5/Javascript qui montrent comment déplacer le contenu d'un Canvas à l'aide de la souris.
Avec le bouton (gauche) enfoncé, le dessin suit alors "instantanément" le pointeur (de la souris).

CanvasMove-A

Les variables u0,v0 définissent le déplacement que l'on veut appliquer à tous les points du Canvas.
Dans la fonction Draw(), on doit alors ajouter u0 et v0 aux cordonnées utilisés: 
    function Draw() {
      ctx.clearRect(0,0,cnv.width,cnv.height);
      for (var y=0,x=0; y<=510; y+=4,x=1.5*y) {
        ctx.beginPath();
        ctx.moveTo(u0+x,v0+0);
        ctx.lineTo(u0+(765-x),v0+y);
        ctx.lineTo(u0+765,v0+(510-y));
        ctx.strokeStyle='rgb('+y/2+',63,'+(510-y)/2+')';
        ctx.stroke();
      }
    }

En pressant le bouton de la souris, on active le déplacement avec mov=true
Le mouvement de la souris est alors utilisé pour adapter u0,v0.

CanvasMove-B

On peut également utiliser la fonction ctx.translate(x,y) du système de transformation de Canvas.
Dans ce cas, il n'est pas nécessaire de corriger les coordonnées dans la fonction Draw().
Par contre, l'effacement préliminaire devient un peu plus compliqué car
ctx.clearRect(0,0,cnv.width,cnv.height)
n'agit correctement qu'avec une transformation neutre.
Equipons donc le context de Canvas de la fonction clearAll(): 
    CanvasRenderingContext2D.prototype.clearAll=function() {
      this.save();
      this.setTransform(1,0,0,1,0,0);
      this.clearRect(0,0,this.canvas.width,this.canvas.height);
      this.restore();
    };

    function Draw() {
      ctx.clearAll();
      for (var y=0,x=0; y<=510; y+=4,x=1.5*y) {
        ctx.beginPath();
        ctx.moveTo(x,0);
        ctx.lineTo(765-x,y);
        ctx.lineTo(765,510-y);
        ctx.strokeStyle='rgb(63,'+y/2+','+(510-y)/2+')';
        ctx.stroke();
      }
    }


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

Ajouter un commentaire Commentaire
BEN
31 mars 2017 à 11:26
Ce que je chercher , sa ma appris des astuce en kanvas, merci
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)