11486 sujets

JavaScript, DOM et API Web HTML5

Probleme de Canva gestion du tactile

Bonjour,
J'ai essayé de créer l'évènement tactile à mon canva mais celui ci ne fonctionne pas,
De base on doit pouvoir faire une signature dans le canva, à la souris ça fonctionne bien mais en tactile il doit y avoir un élément qui manque ou un je ne sais pas.. Quelqu'un pour m'aider s'il vous plait ? 

var canvas= document.getElementById("canvas");
var ctx= canvas.getContext("2d");

var Signature = {
  draw: false,

  // INITIALISE CANVAS
  initCanvas: function () {
    // Taille et couleur du trait de la signature
    ctx.strokeStyle = "blue";
    ctx.lineWidth = 2;

    Signature.sourisEvent();
    Signature.touchEvent();
    Signature.dessiner();
    Signature.effacer();
  },



  // METHODE: EVENEMENT SOURIS
  // -------------------------
  sourisEvent: function () {

    // EVENT: Bouton de la souris enfoncé
    $("#canvas").on("mousedown", function (e) {
      Signature.draw = true;
      ctx.beginPath();
      ctx.moveTo(e.offsetX, e.offsetY);

    });

    // EVENT: Déplacement de la souris
    $("#canvas").on("mousemove", function (e) {
      // Si le bouton est enfoncé, dessine
      if (Signature.draw === true) {
        Signature.dessiner(e.offsetX, e.offsetY);
        // Active le bouton "valider" et change la couleur
        $(".valider").prop("disabled", false);
        $(".valider").css("background-color", "green");
      }
    });

    // EVENT: Bouton de la souris relâché
    $("#canvas").on("mouseup", function (e) {
      Signature.draw = false;
    });
  },



  // METHODE: GERE LES EVENEMENTS TACTILE SUR MOBILE
  // -----------------------------------------------
  touchEvent: function () {
    // EVENT: touché
    $("#canvas").on("touchstart", function (e) {
      var touchX = e.touches[0].pageX - e.touches[0].target.offsetLeft;
      var touchY = e.touches[0].pageY - e.touches[0].target.offsetTop;

      Signature.draw = true;
      ctx.beginPath();
      ctx.moveTo(touchX, touchY);
      // Empêche le scrolling de l'écran
      e.preventDefault();
    });

    // EVENT: Déplacement du touché
    $("#canvas").on("touchmove", function (e) {
      var touchX = e.touches[0].pageX - e.touches[0].target.offsetLeft;
      var touchY = e.touches[0].pageY - e.touches[0].target.offsetTop;

      if (Signature.draw === true) {
        Signature.dessiner(touchX, touchY);
        // Active le bouton "valider" et change la couleur
        $(".valider").prop("disabled", false);
        $(".valider").css("background-color", "green");
      }
      // Empêche le scrolling de l'écran
      e.preventDefault();
    });

    // EVENT: fin du touché
    $("#canvas").on("touchend", function (e) {
      Signature.draw = false;
    });
  },



  // METHODE: DESSINER
  // -----------------
  dessiner: function (x,y) {
    ctx.lineTo(x,y);
    ctx.stroke();
  },



  // METHODE: EFFACER LA SIGNATURE
  // -----------------------------
  effacer: function () {
    $(".effacer").on("click", function(){
        // Efface la signature
        ctx.clearRect(0,0,250,125);
        // Désactive le bouton "valider" et change la couleur
        $(".valider").prop("disabled", true);
        $(".valider").css("background-color", "grey");
    })
}
};
Merci beaucoup !
J'ai arrangé le nom des fonctions et j'ai essayé de tout retranscrire en méthodes dans un objet mais je ne comprend pas mes erreurs (je suis encore débutant..)
Les fonctions seules fonctionnent très bien (le résultat attendu est le bon) mais je ne sais pas comment tout transformer en objet (si quelqu'un avait une méthode en particulier ou une façon de faire pour "transformer" plusieurs fonctions en méthodes d'objets je suis preneur !)

/*
Toutes le fonctions ci-dessous peuvent être optimisées
elles sont même volontairement non optimisées
Elles sont là juste pour vous présenter le concept à vous de les améliorer 
*/

// function dessiner(e){ 
//     var canvas = e.currentTarget,
//         ctx = null, position = null;
//     if(canvas.dessiner == false){
//       return false;
//     }//if
//     position = getPosition(e, canvas);
//     ctx = canvas.getContext('2d');
    
//     //dessine
//     ctx.strokeStyle = 'red';
//     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; 
// } //fct
  
// function getPosition(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
//     };//
// }//fct

// function startDessin(e){ 
//     e.preventDefault(); 
//     var  canvas = e.currentTarget,
//         position = getPosition(e, canvas);
//     canvas.posX = position.posX;
//     canvas.posY = position.posY;
//     canvas.dessiner = true;
//     document.getElementById("valider").disabled = false;
//     capturer(false);
// }//fct

// function stopDessin(e){
//     var canvas = e.currentTarget;
//     canvas.dessiner = false; 
//     capturer(true);
// }//fct

// function initCanvas(){
//     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", startDessin);
//     canvas.addEventListener("mouseup", stopDessin);
//     canvas.addEventListener("mousemove", dessiner);
//     canvas.addEventListener("touchstart", startDessin);
//     canvas.addEventListener("touchend", stopDessin);
//     canvas.addEventListener("touchmove", dessiner); 
//     document.getElementById("effacer").addEventListener("click", nettoyer);
// }//fct

// /**
//     * Récupère le canva sous forme d'image 
//     * si l'image des plus grande que le canvas
//     * c'est que vous avez oublié de presiser la taille du canva en javascript
//     * canvas.width = 200 ;
//     * canvas.height = 150;
//     */
// function capturer(dessinCanvas){
//     var capture = document.getElementById("capture");
//     capture.innerHTML = '';
//     if(dessinCanvas == true){ 
//     var image = document.createElement('img'),
//         canvas = document.getElementById("canvas");
//     image.src = canvas.toDataURL("img/png");
//     capture.appendChild(image);
//     }//if
// }//fct

// /**
//     * Vide les dessin du canvas
//     */
// function nettoyer(){
//     var  canvas = document.getElementById("canvas"),
//         ctx = canvas.getContext('2d');
//     ctx.clearRect(0,0,canvas.width,canvas.height); 
//     document.getElementById("valider").disabled = true;
//     capturer(false);
// }//fct

// document.addEventListener('DOMContentLoaded',function(){
//     initCanvas();
    
// });
  
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;
        Signature.dessiner = true;
        document.getElementById("valider").disabled = false;
        capturer(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 = 'red';
        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; 
    },

    //Arrêt du dessin (levé du stylo (pointeur/doigt))
    stopDessin: function (e){
        var canvas = e.currentTarget;
        Signature.dessiner = false; 
        capturer(true);
    },

    //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;
        capturer(false);
    },

    //Récupere le Canvas sous forme d'image
    capturer: function (dessinCanvas){
        var capture = document.getElementById("capture");
        capture.innerHTML = '';
        if(dessinCanvas == true){ 
        var image = document.createElement('img'),
            canvas = document.getElementById("canvas");
        image.src = canvas.toDataURL("img/png");
        capture.appendChild(image);
        };
    },

    //Initialise le canvas
    initCanvas: function (){
        var canvas = document.getElementById("canvas");
        document.getElementById("valider").disabled = true;
        Signature.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", nettoyer);
    }
}

document.addEventListener('DOMContentLoaded',function(){
    Signature.initCanvas();
});
Sujet clos
Aller à