11522 sujets

JavaScript, DOM et API Web HTML5

Empêcher le dessin d'un canvas de sortir des limites du canvas

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 ? Smiley smile

HTML: 
<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>


JS:
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();
});


CodePen: https://codepen.io/Frank-Ngy/pen/pYvvbq

Merci d'avance Smiley smile !
Salut

Je vous conseille de regarder et de tester le programme Signature Pad

Dans la démonstration, vous constaterez que le comportement est identique au vôtre, tant que l'on ne relâche pas le bouton de la souris le tracé continue même si l'on fait un tour à l'extérieur du canvas.

Signature Pad convient à un tracé de signature (utilisations de courbe de Béziers) et le votre pas du tout, car avec votre code on peut décrire un cercle qui se rempli avec la couleur du tracé, le bleu.
Merci beaucoup pour la réponse Smiley smile Cependant j'ai réussi à trouver une solution à mon problème, très simple d'ailleurs ... il me suffisait juste de rajouter
"canvas.addEventListener("mouseout", Signature.stopDessin, true);"
Dans le initCanvas Smiley smile
Sujet clos
Aller à