Canvas signature tactile : comment adapter la version desktop à la ve

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));
 
}

merci pour votre aide:)

Bonjour moko,
Tu dois utiliser les événements touchstart,touchend, touchmove
Voici un exemple pour t'aider
https://codepen.io/Zonecss/pen/dqvXNo

Oui c'est ce que j'ai fait sur mon code (c'est vrai que je les ai pas intégré sur cet exemple) : j' ai ajouté un addEventListener sur chacune des touch events en appelant les mêmes méthodes que pour les mouse events (et bien entendu ça ne fonctionne pas) : Ce que je souhaiterais comprendre c'est la particularité du canvas mobile par rapport au desktop (mise à part les touch event et le e.preventDefault())

this.canvas.addEventListener("touchstart", function(e) {            
            this.appuieMobile(e);
            this.compteur++;
            this.enregistrer.disabled = false;
            console.log(this.compteur);
        }.bind(this)); 
        
        this.canvas.addEventListener("touchmove", function(e) {
            this.deplacementMobile(e);            
            }.bind(this)); 
        
        this.canvas.addEventListener("touchend", function() {            
            this.relache();            
        }.bind(this));     

Merci pour votre aide
Modifié par moko (12 Nov 2018 - 21:52)

Bonjour moko,

Attention touchmove ne fonctionne pas comme mousemouve
il faut utiliser le e.changedTouches

aliasdmc a écrit :
Bonjour moko,

Attention touchmove ne fonctionne pas comme mousemouve
il faut utiliser le e.changedTouches

Ah voilà ce que je cherchais Ok je regarde ça de plus près

Merci encore
Modifié par moko (14 Nov 2018 - 21:20)

Bonjour Moko ,

J’ai codé exactement de la même manière que vous, pour le avec les événements et je n'arrive pas à l'adapté au tacite pouvez vous svp me montrez votre code où bien m'expliquer comment avez fait. Merci

FredoZ a écrit :
Bonjour Moko ,

J’ai codé exactement de la même manière que vous, pour le avec les événements et je n'arrive pas à l'adapté au tacite pouvez vous svp me montrez votre code où bien m'expliquer comment avez fait. Merci

Bonjour FreoZ,

Désolé mais j'ai laissé de côté ce projet, car entre temps j'ai été et suis toujours pris par d'autres projets PHP cette fois ci.. la dernière suggestion me semble être la plus intéressante pour l'adaptation à la version tactile (as tu regardé?)

oui mais je n'y arrivais pas et je ne comprend pas vraiment l'exemple citer en code pen. sa m'a l'air complexe par rapport à ce qu'on a fait

J'ai reussi en faisant cela :

function putPoint(e) {
  e.preventDefault();
  var touch = e.changedTouches[0];
  if (dragging) {
    context.lineWidth = radius * 2;
    context.lineTo(touch.clientX,touch.clientY);
    context.stroke();
    context.beginPath();
    context.arc(touch.clientX,touch.clientY,radius,0,Math.PI*2);
    context.fill();
    context.beginPath();
    context.moveTo(touch.clientX,touch.clientY)
  }
}

function engage(e) {
  e.preventDefault();
  dragging = true;
  putPoint(e);
}

function disengage (){
  dragging = false;
  context.beginPath();
}
canvas.addEventListener('touchstart',engage);
canvas.addEventListener('touchmove',putPoint);
canvas.addEventListener('touchend',disengage);

Modifié par FredoZ (03 May 2019 - 16:03)

FredoZ a écrit :
J'ai reussi en faisant cela :

function putPoint(e) {
  e.preventDefault();
  var touch = e.changedTouches[0];
  if (dragging) {
    context.lineWidth = radius * 2;
    context.lineTo(touch.clientX,touch.clientY);
    context.stroke();
    context.beginPath();
    context.arc(touch.clientX,touch.clientY,radius,0,Math.PI*2);
    context.fill();
    context.beginPath();
    context.moveTo(touch.clientX,touch.clientY)
  }
}

function engage(e) {
  e.preventDefault();
  dragging = true;
  putPoint(e);
}

function disengage (){
  dragging = false;
  context.beginPath();
}
canvas.addEventListener('touchstart',engage);
canvas.addEventListener('touchmove',putPoint);
canvas.addEventListener('touchend',disengage);

Genial . Suis content que t'ai pu trouver ce que tu cherchais . Merci pour le partage
Modifié par moko (03 May 2019 - 16:38)

Bonjour,

Je viens de me remettre sur le sujet. J'ai repris ta méthode en faisant quelques ajustements (pour l'adapter au POO) , mais rien n'y fait

class Canvas {    
    constructor(veloDisp, adres, CanvasId, saveId){
        
        this.CanvasId = CanvasId;
        this.saveId = saveId;
        this.veloDisp = veloDisp;/*pour decrementer 1 velo après confirmation*/
        this.adres = adres;/*transmis au constructeur de la classe Decompte*/
        this.canvas = document.getElementById(this.CanvasId);
        this.enregistrer = document.getElementById(this.saveId);
        this.enregistrer.disabled = "true";
        this.context = this.canvas.getContext("2d");        
        this.radius = 2;
        this.dragging = false;/*true quand clic souris actionné*/
        this.compteur = 0;/*permet de verifier si le canvas a été utilisé (signé)*/       
        this.lineWidth = this.radius*2;/*epaisseur du trait reliant les points du path*/        
        this.initCanvas();
        this.initEvent(); 
        this.touch = e.changedTouches[0];
        this.decompte = new Decompte(this.adres, "nom", "prenom");
        this.enregistrement();        
    }
    
  
    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*/
    }
    
    putPoint(e) {
        e.preventDefault();
        
        if (this.dragging === true) {
        this.context.lineWidth = this.radius * 2;
        this.context.lineTo(this.touch.clientX,this.clientY);
        this.context.stroke();
        this.context.beginPath();
        this.context.arc(this.clientX,this.touch.clientY,this.radius,0,Math.PI*2);
        this.context.fill();
        this.context.beginPath();
        this.context.moveTo(this.clientX,this.touch.clientY)
        }
    }

    engage(e) {
        e.preventDefault();
        this.dragging = true;
        this.putPoint(e);
        
    }

    disengage (){
        this.dragging = false;
        this.context.beginPath();
    }
    
    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)); 
        
        this.canvas.addEventListener('touchstart',function(e) {
            this.engage(e);
            this.compteur++;
            this.enregistrer.disabled = false;
            
        }.bind(this));
        this.canvas.addEventListener('touchmove',function(e) {
            this.putPoint(e);
        }.bind(this));
        this.canvas.addEventListener('touchend',function() {
            this.disengage();  
        }.bind(this));
        
    }
    

Qu'est ce qui bloque ??