Bonjour à tous,
J'ai créé un système de signature électronique via l'élément canvas, mon code en procédural fonctionne, du coup j'essais de le mettre en poo et j'ai une erreur que je
n'arrive à résoudre qui est la suivante :
typeError: e is undefined. (ligne 45 et 51 dans ma fonction draw )
Je n'arrive pas à trouver par comment définir e. et quel valeur lui attribuer.
je vous met le mon code d'essais en poo et celui en procédural juste en dessous au cas où . Merci d'avance
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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title> canvas </title> </head> <body> <!-- ------------------------ CANVAS ---------------------------------------> <div id="container_canvastimer"> <div id="canvas_container"> <canvas id="canvas"> </canvas> <div id="canvasbtn"> <button id="nettoyer">Effacer</button> <button id="valid">Valider</button> </div> </div> </div> <script src="canvas.js"></script> </body> </html>
Mon code javascript en Poo.
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
22
23
24
25
26
27
28
29
30
31
32
33
34 body{ height: 1600px; } button { color: white; background-color: black; margin-left: 10px; height:40px; width:80px; border-radius: 10px 10px 10px 10px; } /* --------------------------------------- CANVAS --------------------------------------------------*/ canvas { margin-left: 20px; margin-top:15px; border: 2px solid black; background-color: white; } #canvasbtn { margin-left: 20px; }
Code JAVASCRIPT : 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 class Canvas{ constructor(){ this.canvas = document.querySelector("canvas"); this.cleanCanvas = document.getElementById("nettoyer"); this.ctx = this.canvas.getContext("2d"); this.canvas.width = 250; this.canvas.height = 250; this.canvasBlank = true; this.painting = false; this.controlMouse(); this.btnCleaning(); this.cleaning(); } // Function (start position, finished position, draw, clear ) startPosition() { let Canvas = this; Canvas.painting = true; // mouse down active le painting Canvas.canvasBlank = false; console.log(Canvas); } // Quand le tracé se termine finishedPosition(){ let Canvas = this; Canvas.painting = false; Canvas.ctx.beginPath(); } // Pour dessiner draw(e) { // console.log("1"); let Canvas = this; // console.log("2"); if (!Canvas.painting) return; // console.log("3"); Canvas.ctx.lineWidth = 5; // console.log("4"); Canvas.ctx.lineCap = "round"; // console.log("5"); Canvas.ctx.lineTo(e.offsetX, e.offsetY); console.log("6"); Canvas.ctx.stroke("black"); console.log("7"); Canvas.ctx.beginPath(); console.log("8"); Canvas.ctx.moveTo(e.offsetX, e.offsetY); console.log("9"); } //pour effacer tous les tracés cleaning() { let Canvas = this; Canvas.ctx.clearRect(0, 0, 500, 500); Canvas.canvasBlank = true; } //EventListeners (Mouse event) controlMouse(){ let Canvas = this; Canvas.canvas.addEventListener("mousedown", function(){ Canvas.startPosition(); }); Canvas.canvas.addEventListener("mouseleave", function(){ Canvas.finishedPosition(); }); Canvas.canvas.addEventListener("mousemove", function(){ Canvas.draw(); }); Canvas.canvas.addEventListener("mouseleave", function(){ Canvas.finishedPosition(); }); } btnCleaning(){ let Canvas = this; Canvas.cleanCanvas.onclick = function (){ // cleanCanvass btn pour effacer Canvas.cleaning(); } } } var validCanvas = document.getElementById("valid"); validCanvas.addEventListener("click", function() { cleaning(); }); let canvas = new Canvas();
Au cas ou ici c'est mon code JavaScript en Procédural.
Code JAVASCRIPT : 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 var canvas = document.querySelector("canvas"); var cleanCanvas = document.getElementById("nettoyer"); canvas.width = 250; canvas.height = 250; const ctx = canvas.getContext('2d'); var canvasBlank = true; let painting = false; // Function (start position, finished position, draw, clear ) function startPosition(){ painting = true; // mouse down active le painting canvasBlank = false; } // Quand le tracé se termine function finishedPosition(){ painting = false; ctx.beginPath(); } // Pour dessiner function draw(e) { if (!painting) return; ctx.lineWidth = 5; ctx.lineCap = "round"; ctx.lineTo(e.offsetX, e.offsetY); ctx.stroke(); ctx.beginPath(); ctx.moveTo(e.offsetX, e.offsetY); } //pour effacer tous les tracés function cleaning() { ctx.clearRect(0, 0, 500, 500); canvasBlank = true; } //EventListeners (Mouse event) canvas.addEventListener("mousedown", startPosition); canvas.addEventListener("mouseup",finishedPosition); canvas.addEventListener("mousemove", draw); canvas.addEventListener("mouseleave", finishedPosition) cleanCanvas.onclick = function (){ // cleanCanvass btn pour effacer cleaning() } var validCanvas = document.getElementById("valid"); validCanvas.addEventListener("click", function() { cleaning(); });
Partager