Discussion :

[iSpiRk]

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

[Watilin]

Salut,
j’ai survolé vite fait ton code, j’y ai trouvé quelques incohérences.

ligne 84

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

mousePos = createCanvas.getTouchPos();

getTouchPos n’a pas d’instruction return, donc mousePos reçoit la valeur undefined. Ça ne change rien car tu n’utilises pas mousePos, mais ça crée de la confusion et ça pave la voie pour des erreurs futures.

lignes 41 et 42, dans la fonction getTouchPos

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
createCanvas.touchX = touch.pageX - touch.target.offsetLeft;
createCanvas.touchY = touch.pageY - touch.target.offsetTop;

Les propriétés touchX et touchY ne sont utilisées nulle part. Ne voulais-tu pas plutôt écrire mouseX et mouseY ?

D’autre part, je vois que tu crées des MouseEvent synthétiques dans tes gestionnaires de touch. Je pense que ce n’est pas la meilleure approche, car en t’appuyant sur un comportement des navigateurs, tu ajoutes des inconnues et éventuellement des problèmes de compatibilité, alors que tu pourrais faire ça avec ton propre code.

Schématiquement, actuellement tu fais ça :

Code txt :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
+--------------+            +--------------+
| code “touch” |        ,-> | code “mouse” |
+--------------+       /    +--------------+
       |              /            |
       v             /             v
+---------------+   /       +---------------+
| getTouchPos() | -´        | getMousePos() |
+---------------+           +---------------+
                                   |
                                   v
                              +----------+
                              |  dessin  |
                              +----------+

D’ailleurs getTouchPos() n’est pas toujours appelée, donc tu as un problème de cohérence ici aussi.

Je te propose de faire plutôt comme ça :

Code txt :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
+--------------+     +--------------+
| code “touch” |     | code “mouse” |
+--------------+     +--------------+
          \               /
           \             /
            v           v
          +---------------+
          | getEventPos() |
          +---------------+
                 |
                 v
            +----------+
            |  dessin  |
            +----------+

Ça supprime une étape dans la chaîne, et en mettant en commun la fonction qui « extrait » les informations de l’évènement, tu supprimes un peu de redondance. Tu peux utiliser un test simple pour déterminer si l’évènement est mouse ou touch, par exemple regarder si la propriété .touches est présente :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
if (e.touches) {
  // touch
}
else {
  // mouse
}