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:

Empêcher la signature d'un canvas de sortir des limites du canvas
Canvas gratuit - Télécharger - Divers Photo & Graphisme
Signature électronique word - Guide
Signature gmail - Guide
Un bloqueur de publicité empêche la lecture. veuillez le désactiver pour démarrer la vidéo. ✓ - Forum Mozilla Firefox
Ajouter une signature sur un pdf gratuit - Guide

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

Discussions similaires

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

[PIX] Commencer chaque poème sur une nouvelle page

sortir un ordinateur d'un domaine

signature gmail trop grande

mon ordi démarre dans le bios et impossible de sortir

Discussions similaires

Newsletters