Menu

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

Messages postés
14
Date d'inscription
dimanche 3 juin 2018
Dernière intervention
1 mars 2019
-
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
Afficher la suite 

Votre réponse

1 réponse

0
Merci
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
Commenter la réponse de nipal