Discussion :

[ia.jenny]

Bonjour,
Je voudrais remplacer alert(images[i].textContent); par :

Code :

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

1
2
ctx.font = "30px Arial";
ctx.fillText(images[Message].textContent,200,200);

Le problème, le return i; ne fonctionne pas dans la fonction Click, ou bien une erreur sur :

Code :

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

1
2
3
4
Message=canvas.addEventListener("click", Click, false);
 
ctx.font = "30px Arial";
ctx.fillText(images[Message].textContent,200,200);

Dois-je faire une fonctionne d'affichage.
Je ne comprend pas pourquoi, je peux pas afficher un message quand je clique sur une image

voici le programme et merci encore
http://ia.jenny.free.fr/Img/

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
var NbrImg;
var images;
var Message;
// --------------------------------------------------------------------------------------
window.onload = function()
{
	getXML("text2.xml", drawImages);
}
// --------------------------------------------------------------------------------------
function getXML(url, callback) 
{
  const oXhr = new XMLHttpRequest();
  oXhr.onreadystatechange = function() 
  {
    if (this.readyState === 4 && this.status === 200) 
	{
      callback(this.responseXML);
    }
  };
  oXhr.open("GET", url, true);
  oXhr.send()
}
// --------------------------------------------------------------------------------------
function drawImages(docXML) 
{
	const canvas = document.getElementById("canvas");
	const ctx = canvas.getContext("2d");
	canvas.width =  1400;
	canvas.height = 600;
	images = docXML.querySelectorAll("Img");
 
	for (let i=0; i<images.length; i++) 
	{
		const oImage = new Image();
		oImage.onload = function()
		{
			ctx.drawImage(oImage,i*105,0,100,100);
		};
		oImage.src = "Img/"+ images[i].textContent+".jpg";
	}
 
	NbrImg=images.length;
	Message=canvas.addEventListener("click", Click, false); // <---------- Err ?????
 
	ctx.font = "30px Arial"; 
	ctx.fillText(images[Message].textContent,200,200);
}
// --------------------------------------------------------------------------------------
function Click(e) 
{
	var x = e.clientX;
	var y = e.clientY;
 
	for (let i=0; i<NbrImg; i++) 
	{
		if(x>i*105 && x<i*105+100 && y>1*105 && y<1*100+100 ) 
		{
			//alert(images[i].textContent);
			//return i;  // <---------- Err ?????
		}
	  }
}
// --------------------------------------------------------------------------------------

[Archimède]

Salut,
je me pose la question, si ta condition sur x et y n'est pas vérifiée alors i n'est pas défini et Message ne renvoie rien donc images[Message] génère une erreur.
Il faudrait sans doute ajouter une condition sur l'affichage du fillText().

[ia.jenny]

Bonjour,
Tu as raison Archimède. J'ai modifié le code. ça donne ceci
http://ia.jenny.free.fr/Img/

ce n'est pas terrible, et les Messages se superpose. Et je n'arrive pas avec return;
Si on pouvait m'aider à arranger le code pour qu'il soit plus propre, je serai très heureux
Déjà, la fonction function Click(e) ne me plait pas avec ctx qui est décalé comme var ctx;.
merci mille fois
Img.zip

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
var NbrImg;
var images;
var Message;
var ctx;
// --------------------------------------------------------------------------------------
window.onload = function()
{
	getXML("text2.xml", drawImages);
}
// --------------------------------------------------------------------------------------
function getXML(url, callback) 
{
  const oXhr = new XMLHttpRequest();
  oXhr.onreadystatechange = function() 
  {
    if (this.readyState === 4 && this.status === 200) 
	{
      callback(this.responseXML);
    }
  };
  oXhr.open("GET", url, true);
  oXhr.send()
}
// --------------------------------------------------------------------------------------
function drawImages(docXML) 
{
	const canvas = document.getElementById("canvas");
	 ctx = canvas.getContext("2d");
	canvas.width =  1400;
	canvas.height = 600;
	images = docXML.querySelectorAll("Img");
 
	for (let i=0; i<images.length; i++) 
	{
		const oImage = new Image();
		oImage.onload = function()
		{
			ctx.drawImage(oImage,i*105,0,100,100);
		};
		oImage.src = "Img/"+ images[i].textContent+".jpg";
	}
 
	NbrImg=images.length;
	canvas.addEventListener("click", Click, false);
 
}
// --------------------------------------------------------------------------------------
function Click(e) 
{
	var tmp=0;
	var x = e.clientX;
	var y = e.clientY;
 
	for (let i=0; i<NbrImg; i++) 
	{
		if(x>i*105 && x<i*105+100 && y>0*105 && y<0*100+100 ) 
		{
			tmp=i;
		}
	  }
	 //e.returnValue =tmp;
	// return tmp;
	ctx.font = "30px Arial"; 
	ctx.fillText(images[tmp].textContent,200,200);
}
// --------------------------------------------------------------------------------------

Merci pour l'aide apporté

[Archimède]

Bonsoir, pour le problème de superposition des fillText(), il suffit de faire un ctx.clearRect(....) avant le ctx.fillText(...)
ctx.measureText() peut te servir pour la largeur du texte à effacer...
Après, je n'ai pas regardé de manière approfondi ton code pour la méthode de détection des images...

[Archimède]

Tu effaces :

Code :

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

1
2
3
 
ctx.fillText(images[tmp].textContent,200,200);
tmp=i;

tu mets à la place du tmp=i:

Code :

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

1
2
 
ctx.fillText(images[i].textContent,200,200);

dans la condition.

Sinon ton tmp est égal à 0 (->var tmp=0;...) quelque soit la position du clic de souris sur canvas en dehors de la position des images. (et chat est indiqué dans ces cas là...)

[Archimède]

Après, c'est quoi l'intérêt d'afficher tes images par un draw dans un canvas ? Tu choisis le moyen le plus compliqué pour un simple clic sur celles-ci et en plus tu affiches avec un fillText toujours dans ce canvas alors qu'il serait 10 fois plus simple de l'afficher dans une div...