Sujet Précédent Sujet Suivant

Empêcher la signature d'un canvas de sortir des limites du canvas

Fermé
Frank_N Messages postés 42 Date d'inscription dimanche 3 juin 2018 Statut Membre Dernière intervention 8 août 2019 - Modifié le 1 mars 2019 à 14:51
 nipal - 7 mars 2019 à 16:48
Bonjour,

J'ai fais un objet JS pour pouvoir effectuer un dessin dans un canvas et dans l'idéal quand l'utilisateur click sur la souris, on commence à dessiner (une ligne), quand on relache le bouton le dessin s'arrête (jusque la tout va bien) mais par contre si je sors des limites de mon canvas en ayant le click de la souris enfoncé, le dessin continue même si le click est relaché .. j'ai essayé une condition (qui est commentée) mais celle ci ne fonctionne pas..
Si quelqu'un pouvais m'éclairer sur ce point s'il vous plait ? :) 

<html lang="fr">
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <div class="canvas">
      <canvas id="canvas" width="250" height="125"></canvas><br />
      <button type="button" class="btn btn-danger effacer" id="effacer">Effacer</button>
      <button type="button" class="btn btn-success valider" id="valider" disabled>Valider</button>
    </div>
  </body>
</html>


var Signature = {

    //Récupère la position du pointeur/doigt
    getPosition: function (e, canvas){
        var rect = canvas.getBoundingClientRect(),
            eElement = e.changedTouches? e.changedTouches[0]:e;
        return {
        posX : (eElement.clientX - rect.left) / (rect.right - rect.left) * canvas.width,
        posY : (eElement.clientY - rect.top) / (rect.bottom - rect.top) * canvas.height
        };
    },

    //Commence à déssiner (quand on pose le pointeur ou le doigt sur le canvas)
    startDessin: function (e){ 
        e.preventDefault(); 
        var canvas = e.currentTarget,
            position = Signature.getPosition(e, canvas);
        canvas.posX = position.posX;
        canvas.posY = position.posY;
        canvas.dessiner = true;
        document.getElementById("valider").disabled = false;
    },

    //Dessine
    dessiner: function (e){ 
        var canvas = e.currentTarget,
            ctx = null, position = null;
        if(canvas.dessiner == false){
          return false;
        }
        position = Signature.getPosition(e, canvas);
        ctx = canvas.getContext('2d');
        
        //dessine
        ctx.strokeStyle = 'blue';
        ctx.lineWidth = 3;
        ctx.beginPath(); 
        ctx.moveTo((canvas.posX), canvas.posY);
        ctx.lineTo(position.posX, position.posY);
        ctx.stroke();
        
        canvas.posX = position.posX;
        canvas.posY = position.posY;
        
        /*if ( (position.posX || position.posY) > (canvas.width || canvas.height) ){
            Signature.stopDessin(e);
        }*/
    },

    //Arrêt du dessin (levé du stylo (pointeur/doigt))
    stopDessin: function (e){
        var canvas = e.currentTarget;
        canvas.dessiner = false; 
    },

    //Effacer le dessin
    nettoyer: function (){
        var  canvas = document.getElementById("canvas"),
            ctx = canvas.getContext('2d');
        ctx.clearRect(0,0,canvas.width,canvas.height); 
        document.getElementById("valider").disabled = true;
    },


    //Initialise le canvas
    initCanvas: function (){
        var canvas = document.getElementById("canvas");
        document.getElementById("valider").disabled = true;
        canvas.dessiner = false;
        canvas.width = 250 ;
        canvas.height = 125;
        ctx = canvas.getContext('2d'); 
        canvas.addEventListener("mousedown", Signature.startDessin);
        canvas.addEventListener("mouseup", Signature.stopDessin);
        canvas.addEventListener("mousemove", Signature.dessiner);
        canvas.addEventListener("touchstart", Signature.startDessin);
        canvas.addEventListener("touchend", Signature.stopDessin);
        canvas.addEventListener("touchmove", Signature.dessiner); 
        document.getElementById("effacer").addEventListener("click", Signature.nettoyer);
    }
}

document.addEventListener('DOMContentLoaded',function(){
    Signature.initCanvas();
});




Configuration: Windows / Firefox 65.0
A voir également:

1 réponse

Réponse 1 / 1
nipal
7 mars 2019 à 16:48
Salut il serais plus logique de faire le test des limites avant le dessin pour ne pas utiliser stopDessin() qui arrête le dessin. 

if ( position.posX  > canvas.width || || position.posY>canvas.height  ){ /*- correction du test  pour un canvas  rectangulaire sinon height et width du canvas sont identiques , en tenir compte dans la condition */
 //dessine
        ctx.strokeStyle = 'blue';
        ctx.lineWidth = 3;
        ctx.beginPath(); 
        ctx.moveTo((canvas.posX), canvas.posY);
        ctx.lineTo(position.posX, position.posY);
        ctx.stroke();
}//-- sinon il ne se passe rien et on reste dans touchMove qui va utiliser la méthode. Signature.dessiner()

enfin je crois à tester
0

Discussions similaires

Message "Un bloqueur de publicité empêche la lecture..."
pistouri -
pistouri -

0 réponse
Identification d'un peintre à partir d'une signature
Utilisateur anonyme -
little boy62 -

5 réponses
comment desactiver un bloqueur de pub
amour10 -
MPMP10 -

4 réponses
comment faire pour quitter le bios?
abzoiasham -
abzoiasham -

8 réponses
[Asus] Bloqué dans le BIOS Utility - EZ Mode
VirOjeK -
pistouri -

4 réponses