Canvas signature (Js pur - POO)

**Elztx** · 09/05/2019, 15h20

Bonjour à tous et à toutes !

J'essaie de créer un Canvas en JS pur et en POO.
Seulement... il ne fonctionne pas haha, j'ai dû me planter quelque part..

Si quelqu'un a le temps de jeter un oeil je veux bien

Voilà le code du canvas :

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
118
119
120
121
122
class CanvasObjet {
  constructor(){ //Paramètres du canvas
    this.canvas = document.getElementById("canvas");
    this.ctx = this.canvas.getContext('2d');
    this.ctx.strokeStyle = '#000000';
    this.ctx.lineWidth = 3;
    this.draw = false;
    this.mousePosition = { x:0, y:0 };
    this.lastPosition = this.mousePosition;
    this.clearButton = document.getElementById("bt-clear");
    this.canvas.width = 200;
    this.canvas.height = 150;
  }
 
//Gestion des événements 
evenements(){
    //Souris
  this.canvas.addEventListener("mousedown", function(e) {
    this.draw = true;
    this.lastPosition = this.getMposition(e);
  }); 
 
  this.canvas.addEventListener("mousemove", function(e) {
    this.mousePosition = this.getMposition(e);
    this.canvasResult()
  });
 
  this.canvas.addEventListener("mouseup", function(e) {
    this.draw = false;
  });
 
 
  // Stop scrolling (touch)
  document.body.addEventListener("touchstart", function(e){
    if (e.target == this.canvas){
      e.preventDefault();
    }
  });
 
  document.body.addEventListener("touchend", function(e){
    if (e.target == this.canvas){
      e.preventDefault();
    }
  });
 
  document.body.addEventListener("touchmove", function(e){
    if (e.target == this.canvas){
      e.preventDefault();
    }
  });
 
 
    // Touchpad
  this.canvas.addEventListener("touchstart", function(e) {
    mousePosition = this.getTposition(e);
    var touch = e.touches[0];
    var mouseEvent = new MouseEvent("mousedown", {
      clientX: touch.clientX,
      clientY: touch.clientY
    });
    this.canvas.dispatchEvent(mouseEvent);
  });
 
  this.canvas.addEventListener("touchmove", function(e) {
    var touch = e.touches[0];
    var mouseEvent = new MouseEvent("mousemove", {
      clientX: touch.clientX,
      clientY: touch.clientY
    });
    this.canvas.dispatchEvent(mouseEvent);
  });
 
  this.canvas.addEventListener("touchend", function(e) {
    var mouseEvent = new MouseEvent("mouseup", {});
    this.canvas.dispatchEvent(mouseEvent);
  });
 
 
  //Effacer
  this.clearButton.addEventListener("click", function(e) {
    this.clearCanvas()
  });
}
 
// Renvoie les coordonnées de la souris 
getMposition(mouseEvent){
  if (this.draw) {
    var oRect = this.canvas.getBoundingClientRect();
    return {
      x: mouseEvent.clientX - oRect.left,
      y: mouseEvent.clientY - oRect.top
    };
  }
}
 
// Renvoie les coordonnées du pad 
getTposition(touchEvent){
  var oRect = this.canvas.getBoundingClientRect();
  return {
    x: touchEvent.touches[0].clientX - oRect.left,
    y: touchEvent.touches[0].clientY - oRect.top
  };
}
 
// Dessin du canvas
canvasResult() {
  if(this.draw){
    this.ctx.beginPath(); 
    this.ctx.moveTo(this.lastPosition.x, this.lastPosition.y);
    this.ctx.lineTo(this.mousePosition.x, this.mousePosition.y);
    this.ctx.stroke();
    this.lastPosition = this.mousePosition;
  }
};
 
// Vide le dessin du canvas
clearCanvas(){
  this.canvas.width = this.canvas.width;
    this.ctx.lineWidth = 3;
}
 
}

Voilà le HTML :

Code HTML :

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
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas</title>
   <link rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="jsv.js"></script>
</head>
 
  <body>
 
<h1>Canvas</h1>
<div class="mise-en-page">
  <div class="bloc-mise-en-page">
    <h2>Signer (<span id="bt-clear">nettoyer</span>)</h2>
    <canvas id="canvas"></canvas>
  </div>
</div> 
 
</body>

Et le CSS :

Code CSS :

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
#canvas{
  width:250px;
  height:150px;
  border:1px solid #000
}
#capture{ 
  border:1px solid black;
  width:200px;
  height:150px;
}
 
/* MISE EN PAGE*/
.mise-en-page{}
.bloc-mise-en-page{margin:10px;
  flex:1 0 0px;   
  min-width:500px;
}
 
body{
  font-family: Arial;
}

Merci beaucoup

**Beginner.** · 09/05/2019, 16h27

Salut,

On n'a pas le fichier jsv.js...

Sinon un des problèmes c'est le fameux this*, celui-ci ne pointe pas comme vous l'attendez vers une instance de la class CanvasObjet mais vers l'élément html canvas...

*Je parle du this utilisé à l'intérieur des fonctions addEventListener...

EDIT :

pour résoudre le problème dont je parle j'ai modifié la fonction evenements comme ceci :

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
evenements() {
        var self = this ;
        //Souris
        this.canvas.addEventListener("mousedown", function (e) {
            self.draw = true;
            self.lastPosition = self.getMposition(e);
        });
 
        this.canvas.addEventListener("mousemove", function (e) {
            self.mousePosition = self.getMposition(e);
            self.canvasResult()
        });
 
        this.canvas.addEventListener("mouseup", function (e) {
            self.draw = false;
        });
 
 
        // Stop scrolling (touch)
        document.body.addEventListener("touchstart", function (e) {
            if (e.target == self.canvas) {
                e.preventDefault();
            }
        });
 
        document.body.addEventListener("touchend", function (e) {
            if (e.target == self.canvas) {
                e.preventDefault();
            }
        });
 
        document.body.addEventListener("touchmove", function (e) {
            if (e.target == self.canvas) {
                e.preventDefault();
            }
        });
 
 
        // Touchpad
        this.canvas.addEventListener("touchstart", function (e) {
            mousePosition = self.getTposition(e);
            var touch = e.touches[0];
            var mouseEvent = new MouseEvent("mousedown", {
                clientX: touch.clientX,
                clientY: touch.clientY
            });
            self.canvas.dispatchEvent(mouseEvent);
        });
 
        this.canvas.addEventListener("touchmove", function (e) {
            var touch = e.touches[0];
            var mouseEvent = new MouseEvent("mousemove", {
                clientX: touch.clientX,
                clientY: touch.clientY
            });
            self.canvas.dispatchEvent(mouseEvent);
        });
 
        this.canvas.addEventListener("touchend", function (e) {
            var mouseEvent = new MouseEvent("mouseup", {});
            self.canvas.dispatchEvent(mouseEvent);
        });
 
 
        //Effacer
        this.clearButton.addEventListener("click", function (e) {
            self.clearCanvas()
        });
    }

Et cela fonctionne mieux...

**Loralina** · 09/05/2019, 17h07

Bonjour,
Beginner. a bien vu le problème.

Plusieurs solutions :
- utiliser des fonctions fléchées.
- utiliser bind(this).
- Ajouter une variable pointant sur this dans evenements (solution de Beginner.).
- Définir une propriété sur l'élément canvas pointant sur this et dans ce cas, on utilise this.gestionnaire.faireCeci() : le petit défaut est de rajouter dynamiquement des propriétés sur cet objet, des propriétés non prévues de base donc. Si j'en parle c'est que dans d'autres situations, c'est une bonne solution.

Envoyé par Elztx

Mmmh même avec tes modifications ça ne semble pas fonctionner de mon côté

Y a-t-il une instance de la classe au moins ?

**Beginner.** · 09/05/2019, 17h15

Envoyé par Loralina

Y a-t-il une instance de la classe au moins ?

Effectivement il fallait ajouter du code pour tester : avoir une instance et aussi lancer l'exécution de la fonction evenements, j'ai rajouté cela pour tester :

Code javascript :

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

1
2
var obj = new CanvasObjet();
obj.evenements();

**Elztx** · 09/05/2019, 17h24

Bonjour Loralina

Merci pour les explications !

Oui oui en fin de code. J'ai testé de reprendre le code de Beginner. pour tester, ça ne fonctionne pas non plus c'est vraiment étrange, mon cache est vidé etc pourtant. Il fonctionne bien via le lien fourni.. Je vais tester depuis un autre navigateur/ordi en rentrant !

Oh, merci ! Je vais regarder ça de plus près tout à l'heure en espérant que ça fonctionne enfin chez moi ^^

**NoSmoking** · 09/05/2019, 19h48

Bonjour,
regarde dans la console, F12, les erreurs qui peuvent apparaître.

Si l’initialisation de ton objet est réalisé dans ton fichier JS, placé en début de ta page, alors le DOM n'est pas encore construit ce qui conduit à une erreur.

**Elztx** · 09/05/2019, 20h21

Hello,

En effet, c'était bien le souci !! Merci beaucoup à tous, ça fonctionne, je vais me pencher sur les décalages

**Beginner.** · 09/05/2019, 16h44

Je constate cependant qu'il y a d'autres problèmes...
Il y a un décalage entre la ligne dessinée et le curseur de la souris,
Et parfois cela continue de dessiner la ligne alors qu'on a relâché la souris...

**Elztx** · 09/05/2019, 16h54

Hello, merci pour ton retour !

Le fichier jsv.js c'est le js du canvas

Mmmh même avec tes modifications ça ne semble pas fonctionner de mon côté

Je regarderai du côté des offsets quand j'arriverai à afficher le tracé pour le décalage ^^

**Beginner.** · 09/05/2019, 17h05

chez moi le tracé fonctionne, testez ici pour voir : https://jsbin.com/jimiqibago/edit?js,output

**Beginner.** · 09/05/2019, 17h24

Envoyé par Beginner.

...
Et parfois cela continue de dessiner la ligne alors qu'on a relâché la souris...

Ce problème a lieu quand on relâche la souris en dehors du canvas, pour le résoudre j'ai remplacé cette fonction :

Code javascript :

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

1
2
3
        this.canvas.addEventListener("mouseup", function (e) {
            self.draw = false;
        });

par celle-ci :

Code javascript :

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

1
2
3
4
 
        document.addEventListener("mouseup", function (e) {
            self.draw = false;
        });

Canvas signature (Js pur - POO)

JavaScript

Vue hybride

Discussions similaires

Partager

Partager