Bonjour tout le monde,

J'essaye de réaliser un canvas en POO où l'on peut dessiner une signature.

J'arrive à dessiner avec ma souris mais pas sur mobile avez vous une idée ? je bloque depuis un petit moment mainteant.

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
 
createCanvas = {
  mouseX: 0, // Variables pour la position de la souris
  mouseY: 0,
  lastX: -1, // Variables pour la precedente position de la souris
  lastY: -1,
  mouseDown: false, // Variable pour verifer que le boutton de la souris soit appuyee pour commencer a  dessiner
  context: null,
 
  initCanvas() { // Pour creer le canvas
    const canvas = document.getElementById('canvas');
    this.context = canvas.getContext('2d');
    canvas.width = 310; // Largeur du canvas
    canvas.height = 100; // Hauteur du canvas
    this.context.fillStyle = "#fff"; // Couleur de fond
    this.context.lineWidth = 2; // Epaisseur du trait
    this.context.strokeStyle = "black"; // Couleur du trait
    this.context.lineCap = 'round'; // Extremite du trait
    this.draw(); // Pour dessiner
    this.erase(); // Pour effacer le contenu du canvas
  },
 
  getMousePos(e) { // Pour avoir la position de la souris
    if (!e)
      var e = event;
    if (e.offsetX) {
      this.mouseX = e.offsetX; // Position sur l'axe X
      this.mouseY = e.offsetY; // Position sur l'axe Y
    } else if (e.layerX) {
      this.mouseX = e.layerX; // Retourne les coordonnees sur l'axe verticale sur l'event en cours
      this.mouseY = e.layerY; // Retourne les coordonnees sur l'axe horizontale sur l'event en cours
    }
  },
 
  getTouchPos(e) { // Pour avoir la position du doigt (Pour smartphone et tablette)
    if (!e)
      var e = event;
    if (e.touches) {
      if (e.touches.length == 1) {
        var touch = e.touches[0];
        createCanvas.touchX = touch.pageX - touch.target.offsetLeft;
        createCanvas.touchY = touch.pageY - touch.target.offsetTop;
      }
    }
  },
 
  drawLine(x, y) { // Pour dessiner des traits
    if (this.lastX == -1) { // Si c'est un nouveau chemin
      this.lastX = x; // Le premier point et le point du clic
      this.lastY = y;
    }
    this.context.beginPath(); // Debut du chemin
    this.context.moveTo(this.lastX, this.lastY); // Point de depart
    this.context.lineTo(x, y); // Trace de la ligne
    this.context.closePath(); // Fermeture du chemin
    this.context.stroke(); // Dessine le chemin actuel ou donné avec le style de trait actuel
    this.lastX = x;
    this.lastY = y;
    document.getElementById("reservation-success").style.display = "inline-block";
  },
 
  draw() {
    canvas[0].addEventListener('mousedown', (e) => {
      createCanvas.mouseDown = true; // Quand le bouton de la souris est down
      createCanvas.getMousePos(e); // On regarde sa position
      createCanvas.drawLine(createCanvas.mouseX, createCanvas.mouseY); // On commence a  dessiner
    }, false);
 
    canvas[0].addEventListener('mousemove', (e) => {
      createCanvas.getMousePos(e); // Quand la souris bouge 
      if (createCanvas.mouseDown === true) { // On regarde si le bouton est down
        createCanvas.drawLine(createCanvas.mouseX, createCanvas.mouseY); // Et s'il l'est on dessine
      }
    }, false);
 
    window.addEventListener('mouseup', () => { // Quand le bouton de la souris n'est plus down
      createCanvas.mouseDown = false; // La souris n'est plus down
      createCanvas.lastX = -1; // La derniere position de la souris est -1 pour indiquer qu'il y a un nouveau chemin
      createCanvas.lastY = -1;
    }, false);
 
    // Meme chose mais pour les tablettes et smartphones
    canvas[0].addEventListener("touchstart", function(e) {
      mousePos = createCanvas.getTouchPos();
      var touch = e.touches[0];
      var mouseEvent = new MouseEvent("mousedown", {
        clientX: touch.clientX,
        clientY: touch.clientY
      });
      canvas[0].dispatchEvent(mouseEvent);
      e.preventDefault();
    }, false);
 
    canvas[0].addEventListener("touchend", function(e) {
      var mouseEvent = new MouseEvent("mouseup");
      canvas[0].dispatchEvent(mouseEvent);
      e.preventDefault();
    }, false);
 
    canvas[0].addEventListener("touchmove", function(e) {
      var touch = e.touches[0];
      var mouseEvent = new MouseEvent("mousemove", {
        clientX: touch.clientX,
        clientY: touch.clientY
      });
      canvas[0].dispatchEvent(mouseEvent);
      e.preventDefault();
    }, false);
  },
 
  erase() { // Pour effacer le canvas
    document.getElementById("canvas-delete").addEventListener("click", () => {
      createCanvas.context.clearRect(0, 0, canvas[0].width, canvas[0].height); // Efface le contenu du canvas
      document.getElementById("reservation-success").style.display = "none";
    });
  },
}