Bonsoir à tous,

Je souhaiterais savoir s'il existait une méthode simple pour adapter la signature sur canvas en version tactile? qu'est ce qui change mise à part les touch event et le e.preventDefault() ? voici mon code pour la version desktop (j'ai créé une classe Canvas) : 

initCanvas(){           
       
        this.context.clearRect(0, 0, 250, 250);/*canvas vierge*/
        this.context.lineWidth = this.lineWidth;
        this.canvas.style.display = "block";
        this.enregistrer.style.display = "block";
    }
   
  
    deplacement(e) {
       
        if(this.dragging === true){
            this.context.lineTo(e.offsetX, e.offsetY);
            this.context.stroke();           
            this.context.beginPath();
            this.context.arc(e.offsetX, e.offsetY, this.radius, 0, Math.PI*2);/*defini le 1er point en forme de cercle à chaque clic*/
            this.context.fill();/*rempli le cercle*/
            this.context.beginPath();
            this.context.moveTo(e.offsetX, e.offsetY);           
           
        }       
    }

appuie(e){       
        this.dragging = true;
        this.deplacement(e);
    }
   
    relache(){
        this.dragging = false;       
        this.context.beginPath();/*se desengage du chemin precedent*/
    }
   
    initEvent(){
        this.canvas.addEventListener("mousedown", function(e) {           
            this.appuie(e);
            this.compteur++;
            this.enregistrer.disabled = false;
           
        }.bind(this));
       
        this.canvas.addEventListener("mousemove", function(e) {
            this.deplacement(e);           
        }.bind(this));
       
        this.canvas.addEventListener("mouseup", function() {           
            this.relache();           
        }.bind(this));

}

Bonjour MohammedHsein,

Tu dois utiliser les événements touchstart,touchend, touchmove

Voici un exemple pour t'aider
https://codepen.io/Zonecss/pen/dqvXNo

AliasDmc a écrit:

Bonjour MohammedHsein,

Tu dois utiliser les événements touchstart,touchend, touchmove

Voici un exemple pour t'aider
https://codepen.io/Zonecss/pen/dqvXNo

Merci AliasDmc,

J'avais mis de côté ce projet mais j'y reviens tout juste... j'ai essayé ça en suivant la doc mozilla mais toujours rien sur ce fichu canvas (j'ai testé avec les outils reponsive de chrome) :

class Canvas {    
    constructor(CanvasId){        
        this.CanvasId = CanvasId;    
        this.canvas = document.getElementById(this.CanvasId);
        this.enregistrer = document.getElementById(this.saveId);
        this.context = this.canvas.getContext("2d");        
        this.radius = 2;
        this.dragging = false;/*true when clic on mouse*/ 
        this.lineWidth = this.radius*2;
        this.initCanvas();
        this.initEvent();  
    }

initCanvas(){         
        this.context.clearRect(0, 0, 250, 250);/*canvas vierge*/
        this.context.lineWidth = this.lineWidth; 
}

colorForTouch(touch) {
      var id = touch.identifier;
      id = id.toString(16); // make it a hex digit
      return "#" + id + id + id;
    }
    
    ongoingTouchIndexById(idToFind) {
      for (var i=0; i<this.ongoingTouches.length; i++) {
        var id = this.ongoingTouches[i].identifier;        
        if (id == idToFind) {
          return i;
        }
      }
      return -1;    // not found
    }
    
    handleStart(e) {
      e.preventDefault();      
      var touches = evt.changedTouches;            
      for (var i=0; i< touches.length; i++) {
        this.ongoingTouches.push(touches[i]);
        var color = this.colorForTouch(touches[i]);
        this.context.fillStyle = color;
        
        this.context.fillRect(touches[i].pageX-2, touches[i].pageY-2, 4, 4);
        this.compteur++;
        this.enregistrer.disabled = false;
      }
    }
    
    handleMove(e) {
      e.preventDefault();      
      var touches = e.changedTouches;      
      this.context.lineWidth = 4;            
      for (var i=0; i<touches.length; i++) {
        var color = this.colorForTouch(touches[i]);
        var idx = this.ongoingTouchIndexById(touches[i].identifier);
        this.context.fillStyle = color;
        this.context.beginPath();
        this.context.moveTo(this.ongoingTouches[idx].pageX, this.ongoingTouches[idx].pageY);
        this.context.lineTo(touches[i].pageX, touches[i].pageY);
        this.context.closePath();
        this.context.stroke();
        this.ongoingTouches.splice(idx, 1, touches[i]);  // swap in the new touch record
      }
    }    
    
    handleEnd(e) {
      e.preventDefault();      
      var touches = e.changedTouches;      
      this.context.lineWidth = 4;            
      for (var i=0; i<touches.length; i++) {
        var color = this.colorForTouch(touches[i]);
        var idx = this.ongoingTouchIndexById(touches[i].identifier);        
        this.context.fillStyle = color;
        this.context.beginPath();
        this.context.moveTo(this.ongoingTouches[i].pageX, this.ongoingTouches[i].pageY);
        this.context.lineTo(touches[i].pageX, touches[i].pageY);
        this.ongoingTouches.splice(i, 1);  // remove it; we're done
      }
    }

initEvent(){
        this.canvas.addEventListener("touchstart",this.handleStart, false);
        this.canvas.addEventListener("touchmove",this.handleMove, false);
        this.canvas.addEventListener("touchleave", this.handleEnd, false);
        this.canvas.addEventListener("touchend",this.handleEnd, false);        
    }

qu'est ce qui va pas ??