Probleme de Canva gestion du tactile

Fermé
Frank_N Messages postés 42 Date d'inscription dimanche 3 juin 2018 Statut Membre Dernière intervention 8 août 2019 - 25 févr. 2019 à 13:54
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");
    })
}
};

Signature.initCanvas();



Configuration: Windows / Firefox 65.0
A voir également: