Discussion :

[LinksED]

Salut,

Je développe actuellement un éditeur de map isométrique en javascript et depuis hier je suis confronter à un problème :

Voici une classe "Annimation"

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
 
var Annimation = function(_id, _nom, _img, _ct_x, _ct_y, m_x, m_y, m_w, m_h, _speed, _nb_image) //image, centre x et y de l'Annimation, masque, vitesse, nombre d'images (1)
	{
		var id = _id;
		var name = _nom;
		var sprite = _img;
		var centre_x = _ct_x;
		var centre_y = _ct_y;
		var x_orig = m_x;
		var y_orig = m_y;
		var x_size = m_w;
		var y_size = m_h;
 
		var nb_image = _nb_image;
		var speed = _speed;
		var i = 0;
 
		this.draw = function (_context, _x ,_y)
		{
 
			//_context.drawImage(sprite, _x-centre_x, _y-centre_y);
			_context.drawImage(sprite, x_orig,y_orig+(Math.floor(i)*y_size), x_size, y_size, _x-centre_x, _y-centre_y, x_size, y_size);
			i+=speed;
			if(i >= nb_image)
			{
				i = 0;
			}
 
		}
 
		this.getName = name;
		this.getId = id;
		this.getWidth = x_size;
		this.getHeight = y_size;
		this.getCentreX = centre_x;
		this.getCentreY = centre_y;
	}

Je commence à créer un objet Array() -> listePics puis le remplir avec des objet de la classe annimation,

J'ai d’abord tenté de créer une boucle parcourant listePics, et affichant pour chaque itération le nom d'une pic (objet de annimation/une image quoi) et de créer un canvas de la bonne taille pour afficher la pic dedans le tout à l'interieur d'un div : "decor_selector", le nom de chaques pics apparait correctement, mais seulement le dernier canvas affiche un dessin. J'ai donc retirer la boucle et tout écrit en brut pour tester... hé bien toujours pareil, il n'y a que le dernier canvas de dessiné :'(

Code :

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

1
2
3
4
5
6
7
8
9
 
document.getElementById("decor_selector").innerHTML += " "+listePics[1].getName+"<br><canvas id='canvas"+listePics[1].getId+"' width='"+listePics[1].getWidth+"' height='"+listePics[1].getHeight+"'></canvas><br>";
listePics[1].draw(document.getElementById('canvas'+listePics[1].getId).getContext("2d"),listePics[1].getCentreX,listePics[1].getCentreY);
 
document.getElementById("decor_selector").innerHTML += " "+listePics[2].getName+"<br><canvas id='canvas"+listePics[2].getId+"' width='"+listePics[2].getWidth+"' height='"+listePics[2].getHeight+"'></canvas><br>";
listePics[2].draw(document.getElementById('canvas'+listePics[2].getId).getContext("2d"),listePics[2].getCentreX,listePics[2].getCentreY);
 
document.getElementById("decor_selector").innerHTML += " "+listePics[3].getName+"<br><canvas id='canvas"+listePics[3].getId+"' width='"+listePics[3].getWidth+"' height='"+listePics[3].getHeight+"'></canvas><br>";
listePics[3].draw(document.getElementById('canvas'+listePics[3].getId).getContext("2d"),listePics[3].getCentreX,listePics[3].getCentreY);

Notez que lorsque je commente le dernier bloque des trois, c'est seulement le deuxième canvas qui est dessiné et pas le premier.
Pourquoi seulement le dernier ?! <- voyez comme je suis triste !

[melka one]

jour

un id doit etre unique et la tous tes canvas ont le meme id

[LinksED]

Ce n'est pas ça, voici le résultat sur Firefox :

[LinksED]

J'ai finalement trouver un solution : d'abord un boucle pour créer les éléments html, ensuite une pour dessiner dans chaque éléments. Si quelqu'un à une idée de pourquoi cela ne fonctionne pas avec une seul boucle qu'il le fasse savoir !

Code :

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

1
2
3
4
5
6
7
8
9
for(i=0; i<listePics.length; i++)
{
	document.getElementById("decor_selector").innerHTML += " "+listePics[i].getName+"<br><canvas id='canvas"+listePics[i].getId+"' width='"+listePics[i].getWidth+"' height='"+listePics[i].getHeight+"'>   </canvas><br>";
 
}
for(i=0; i<listePics.length; i++)
{
	listePics[i].draw(document.getElementById('canvas'+listePics[i].getId).getContext("2d"),listePics[i].getCentreX,listePics[i].getCentreY);
}

[NoSmoking]

Bonjour,
passe par les méthodes du DOM plutôt que par innerHTML, le moteur de rendu fera dans ce cas un meilleur boulot et tu n'auras pas de surprises désagréables.

Passe tes éléments <canvas> en display:block cela t'éviteras de mettre des <br> de partout.

[LinksED]

Ok, merci pour ton aide