Une histoire de canvas

Bonjour,

Je suis en train de coder une petite extension pour Firefox et je me retrouve face à un petit problème.

J'ai un canvas dans lequel j'affiche une image pour pouvoir ensuite dessiner dessus diverses formes géométriques (des rectangles, des cercles ou des polygones).

Mon problème arrive lorsque je veux dessiner un polygone après avoir tracé une autre forme géométrique : tracer une arête du polygone dessine également la dernière forme dessinée.

Par exemple, si je dessine un rectangle puis un cercle puis un rectangle, si je dessine une arête de polygone, un rectangle sera dessiné en même temps.

Si vous avez une idée, je serai preneur. Et vu que je débute également dans le javascript, si vous voyez des trucs horribles, n'hésitez pas à me le signaler.

Code:

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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
var pathImage="";	//Chemin vers l'image
var rectPress=0;		//Bouton dessiner un rectangle pressé 
var cerclePress=0;	//Bouton dessiner un cercle pressé
var polyPress=0;		//Bouton dessiner un polygone pressé
var x1 = 0;
var y1 = 0;
var x2 = 0;
var y2 = 0;
var dejaClic = false;
 
var canvas = null;
var ctx =null;
 
//Chargement initial
window.onload = function(){
      document.getElementById("fenetre").width = screen.availWidth;
      document.getElementById("fenetre").height = screen.availHeight;
}
 
//Ouvrir une image
function parcourir()
{
	const nsIFilePicker = Components.interfaces.nsIFilePicker;
	var fp = Components.classes["@mozilla.org/filepicker;1"]
				   .createInstance(nsIFilePicker);
	fp.init(window, "Sélectionner un fichier", nsIFilePicker.modeOpen);
	fp.appendFilter("Image (*.jpg; *.png; *.svg)","*.jpg; *.png; *.svg");
	fp.appendFilter("Fichiers de map (*.php; *.asp; *.html; *.htm)","*.php; *.asp; *.html; *.htm");
	fp.appendFilters(nsIFilePicker.filterAll);
	var rv = fp.show();
	if (rv == nsIFilePicker.returnOK || rv == nsIFilePicker.returnReplace) 
	{
		var file = fp.file;
		pathImage = fp.file.path;
		afficherImage();
	}
}
 
//Afficher l'image
function afficherImage()
{
	canvas = document.getElementById('MonCanvas');
	ctx = canvas.getContext('2d');
    var img = new Image();
    img.onload = function()
	{
		canvas.height = img.height;
		canvas.width = img.width;
		ctx.drawImage(img,0,0);
    };
    img.src = "file://"+pathImage;
}
 
//Ajouter un cadre
function rectangle()
{
	rectPress = 1;
	cerclePress=0;
	polyPress=0;
	x1 = 0;
	x2 = 0;
	y1 = 0;
	y2 = 0;
 
	if (rectPress == 1)
	{
 
		canvas.onmousedown = function(e) 
		{
			x1 = e.clientX - canvas.offsetLeft + document.documentElement.scrollLeft;
			y1 = e.clientY - canvas.offsetTop + document.documentElement.scrollTop;
		}
 
		canvas.onmouseup = function(e) 
		{
			x2 = e.clientX - canvas.offsetLeft + document.documentElement.scrollLeft;
			y2 = e.clientY - canvas.offsetTop + document.documentElement.scrollTop;
 
			xDepart = Math.min(x1,x2);
			yDepart = Math.min(y1,y2);
 
			var largeur = x2-x1;
			if (largeur < 0)
			{
				largeur = 0 - largeur;
			}
 
			var hauteur = y2-y1;
			if (hauteur < 0)
			{
				hauteur = 0-hauteur;
			}
			dessineRectangle(xDepart,yDepart,largeur, hauteur);
		}
	}
 
}
 
//Dessiner un rectangle
function dessineRectangle(xDepart,yDepart,largeur, hauteur)
{
	//Le contour 
	ctx.strokeStyle = "rgb(114,64,164)";
	ctx.beginPath();
	ctx.strokeRect(xDepart,yDepart,largeur+1, hauteur+1);
	ctx.closePath();
	ctx.stroke();
 
	//L'intérieur en semi transparence
	ctx.fillStyle = "rgba(149,112,186,0.5)";
	ctx.beginPath();
	ctx.fillRect(xDepart+1,yDepart+1,largeur, hauteur);
	ctx.closePath();
	ctx.fill();
 
}
 
//Ajouter un cercle
function cercle()
{
	rectPress = 0;
	cerclePress=1;
	polyPress=0;
	x1 = 0;
	x2 = 0;
	y1 = 0;
	y2 = 0;
 
	if (cerclePress == 1)
	{
		canvas.onmousedown = function(e) 
		{
			x1 = e.clientX - canvas.offsetLeft + document.documentElement.scrollLeft;
			y1 = e.clientY - canvas.offsetTop + document.documentElement.scrollTop;
		}
 
		canvas.onmouseup = function(e) 
		{
			x2 = e.clientX - canvas.offsetLeft + document.documentElement.scrollLeft;
			y2 = e.clientY - canvas.offsetTop + document.documentElement.scrollTop;
			//Calculer la distance entre deux points
			var diffX = Math.round((x2-x1) * (x2-x1));
			var diffY = Math.round((y2-y1) * (y2-y1));
			var rayon = Math.round(Math.sqrt(diffX + diffY));
			dessineCercle(rayon);
		}
	}
 
}
 
//Dessiner un cercle
function dessineCercle(unRayon)
{
	//Le contour 
	ctx.strokeStyle = "rgb(29,136,30)";
	ctx.beginPath();
	ctx.arc(x1, y1, unRayon, 0, 2 * Math.PI);
	ctx.closePath();
	ctx.stroke();
 
 
	//L'intérieur
	ctx.fillStyle="rgba(152,231,151,0.5)";
	ctx.beginPath();
	ctx.arc(x1, y1, unRayon-1, 0, 2 * Math.PI);
	ctx.closePath();
	ctx.fill();
 
}
 
//Ajouter un polygone
function polygone()
{
	rectPress = 0;
	cerclePress=0;
	polyPress=1;
	x1 = 0;
	x2 = 0;
	y1 = 0;
	y2 = 0;
	var saveX1 = 0;
	var saveY1 = 0;
 
	if (polyPress == 1)
	{
		canvas.onmousedown = function(e) 
		{
			if (!dejaClic) //Premier clic
			{
				x1 = e.clientX - canvas.offsetLeft + document.documentElement.scrollLeft;
				y1 = e.clientY - canvas.offsetTop + document.documentElement.scrollTop;
				saveX1 = x1;
				saveY1 = y1;
				dejaClic= true;
			}
			else
			{
				x2 = e.clientX - canvas.offsetLeft + document.documentElement.scrollLeft;
				y2 = e.clientY - canvas.offsetTop + document.documentElement.scrollTop;
				dessinePoly(x1,y1,x2,y2);
				x1 = x2;
				y1 = y2;
			}
		}
 
		canvas.ondblclick = function(e)
		{
			dejaClic = false;
			dessinePoly(x1,y1,saveX1,saveY1);
		}
	}
}
 
//Dessiner un polygone
function dessinePoly(x1,y1,x2,y2)
{
	ctx.strokeStyle="rgb(0,0,0)";
	ctx.beginPath();
	ctx.moveTo(x1,y1);	//Point de départ
	ctx.lineTo(x2,y2);		//Point arrivé
	ctx.closePath();
	ctx.stroke();
}

Simplement au sujet des observations générales :

>>> si je ne m'abuse*, le mot-cle "const" a été prévu pour implémentations futures mais n'est pas encore "branché" en arrière-plan. Utilise plutot "var", quitte à considérer toi-même la variable comme une constante en terme de conception, la nommer en majuscules, etc.

* vérifier éventuellement qu'il n'y a pas eu de changements récents ^^ il m'arrive de retarder :aie:

>>> dans la mesure où la valeur de canvas est attribuée "en dur" (canvas = document.getElementById('MonCanvas')), nul besoin de faire un getElementById à chaque fois, tu peux récupérer l'élément à l'initialisation de la variable plutot que dans la fonction afficherImage ^^

>>> merci :oops: grâce à toi j'ai aujourd'hui pris conscience que j'avais les mêmes initiales que "Return Value" (var rv) :mrgreen:

En effet, il reste quelques reliquats de copiés-collés. Merci de les avoir soulignés.

Bonjour

Je manque de temps et d'expérience récente avec canvas, mais je crois qu'il faut regarder du côté des méthodes save() et restore().

http://www.whatwg.org/specs/web-apps...canvas-element

https://developer.mozilla.org/en/HTML/Canvas

Voir l'exemple plus complexe : https://developer.mozilla.org/en/Dra...cs_with_Canvas

J'ai déjà vu ces méthodes. Je vais cependant y rejeter un coup d'oeil.

C'était tout bête en fait.
Il suffisait de surcharger les événements du canvas pour chacune des figures géométriques. Le polygone ne gérait aucun événement lié au mouseup, il faisait donc l'action associé à la dernière figure géométrique.

J'ai donc ajouté une simple ligne dans le code associé au polygone

Code:

canvas.onmouseup = function(e) { }