Canvas signature Poo

**Nicolas Legrand** · 23/01/2020, 13h02

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>

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;
}

Mon code javascript en Poo.

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();
		 });

**NoSmoking** · 23/01/2020, 14h41

Bonjour,

Je n'arrive pas à trouver par comment définir e. et quel valeur lui attribuer.

la moindre des choses et de le récupérer pour le passer à ta fonction, donc au minimum :

Code :

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

1
2
3
Canvas.canvas.addEventListener("mousemove", function (e) {
  Canvas.draw(e);
});

PS : soigne ton indentation, cela sera plus facile pour ceux qui te lisent.

**Nicolas Legrand** · 23/01/2020, 15h43

Mais lol quel âne effectivement ça va beaucoup moins bien fonctionner. J'ai même pas fais attention à mon procédural j'aurai du le voir mais 1 jour entier pour ça c'est terrible lol . Merci NoSmoking sans vous j'y serai encore mdr . Je vais essayer de bien indenté mon code et le recopier au cas ou il peut servir à quelqu'un.
Merci encore.

**Nicolas Legrand** · 27/01/2020, 22h42

Je met mon code corrigé au cas ou il peut servir à quelqu'un.

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
 
 
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();
     }
 
 
	startPosition()  {
		let Canvas = this;
		Canvas.painting = true;  
		Canvas.canvasBlank = false;
		console.log(Canvas); 
	 }
 
 
	finishedPosition() {
		let Canvas = this;
	     Canvas.painting = false;
	    Canvas.ctx.beginPath();
	}
 
 
	draw(e) {
		let Canvas = this;
		if (!Canvas.painting) return;
		Canvas.ctx.lineWidth = 5;
	        Canvas.ctx.lineCap = "round";
	        Canvas.ctx.lineTo(e.offsetX, e.offsetY); 
	        Canvas.ctx.stroke();
	        Canvas.ctx.beginPath();
	        Canvas.ctx.moveTo(e.offsetX, e.offsetY);
 
	}
 
	 cleaning() {
		let Canvas = this;
		Canvas.ctx.clearRect(0, 0, 500, 500);
		Canvas.canvasBlank = true;
         }
 
 
 
 
         controlMouse(){
	         let Canvas = this;
 
		 Canvas.canvas.addEventListener("mousedown", function(){
			 Canvas.startPosition();
		});
 
		Canvas.canvas.addEventListener("mousemove", function (e) {
		        Canvas.draw(e);
		});
 
		 Canvas.canvas.addEventListener("mouseup", function(){
			Canvas.finishedPosition();
		});
 
 
		Canvas.canvas.addEventListener("mouseleave", function(){
			Canvas.finishedPosition();
		});
	}
 
 
	btnCleaning(){
		let Canvas = this;
		Canvas.cleanCanvas.onclick = function (){ 
			Canvas.cleaning();
	         }
	}
 
 
}  
 
                let canvas = new Canvas();

Canvas signature Poo

JavaScript

Discussions similaires

Partager

Partager