Discussion :

[skelethor]

Bonjour à tous,

je viens vers vous car je suis bloqué depuis plusieurs jours sur ce problème. Quand je crée une image dans un canvas comme fond, je rajoute un bandeau en haut à gauche de l'image puis je rajoute une série de petites images. L'opération se fait sans problème, mais lors de l'affichage, seul le bandeau est présent. Le reste demeure vide. Quand je rafraichis la page, toutes les images apparaissent ! Elles sont bien présentes, on peut y accéder via le DOM, et sont accessibles dans le code source.
J'ai essayé de les dessiner dans un timeout pour attendre la fin des opérations avant l'affichage ou d'appeler le dessin via une fonction anonyme.

Merci d'avance de votre aide,
Cdlt,
Skelethor

[ascito]

salut, as tu un morceau de code à nous proposer?

[skelethor]

Bonjour et merci d'avoir répondu !
Je vous remets le code tel qu'il marche actuellement.
Le js appelant est celui-ci
<script type="text/javascript">

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
 [INDENT]<div style="margin-left:40px">img = preparerImg(document.createElement("img"), l, h, tab[3], tab[1], cpt);
                            if(!tab[4])
                            { 
                                verifierPresenceGangEnnemi(x, y, l, h, img.id);
                                if(verifierCase(map, x, y))
                                { 
                                    img.className = "carte_grise"; 
                                    img.title = tab[1]+" => ("+x+", "+y+")\n"+tab[2]; 
                                } 
                                else
                                { 
                                    img.className = "carte";
                                    img.title = tab[1]+" => ("+x+", "+y+")\n"+tab[2]; 
                                }
                            }
                            else
                            { 
                                canvas = document.createElement("canvas");
                                canvas.width = l;
                                canvas.height = h;
                                canvas.id = "canvas"+cpt;
                                canvas.alt = tab[1];
 
                                setTimeout(function(){
                                       ajouterBandeau(z, canvas, img, l, h, "gold"); 
                                       if(parseInt(z) === 11)
                                            if(tab[6])
                                           {
                                                  amel = tab[6].split("~"); 
                                                  ajouterAmelioration(canvas, amel); 
                                            } 
                              }, 5000); 
                              verifierPresenceGang(document.getElementById("id_gang").value, x, y, canvas); 
                              img = canvas;
                                img.className = "carte";
                                img.title = tab[1]+" => ("+x+", "+y+")\n"+tab[2];
                            }
                            img.addEventListener('dragover', function(ev) {bougerMap(ev, 11, p, q, qg['x'], qg['y']);}, false); 
 
                            a = preparerLien(document.createElement("a"), cpt);
                            a.setAttribute('onclick', 'popUpTerrain('+tab[0]+', '+x+', '+y+');');
                            a.appendChild(img);
 
                            src.appendChild(a);
                            cpt ++;</div>

et les fonctions appelées

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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
function ajouterBandeau(z, canvas, img, l, h, color)
{ 
    ctx = canvas.getContext('2d');
    ctx.fillStyle = color;
 
    ctx.drawImage(img, 0, 0, 135, 135, 0, 0, canvas.width, canvas.height);
    ctx.moveTo(0, h/z);
    ctx.lineTo(l/z,0);
    ctx.lineTo(l/z*3,0);
    ctx.lineTo(0, l/z*3);
    ctx.stroke();
    ctx.fill();
    return img;
}
 
function ajouterAmelioration(canvas, amel)
{
    if(amel)
    {
        ameliorationEau = amel[1].split(":"); 
        ameliorationElec = amel[2].split(":"); 
        ameliorationDef = amel[0].split(":"); 
        ameliorationHab = amel[3].split(":"); 
        ameliorationVoie = amel[4].split(":"); 
 
        ctx = canvas.getContext('2d');
 
        if(ameliorationEau[1] > 0)
        {
            img2 = document.createElement("img");
            img2.src="../../img/icones/eauinstallee.png";
            ctx.drawImage(img2, 0, 0, 100, 100, 15, canvas.height-23, 33, canvas.height-5);
        }
        if(ameliorationElec[1] > 0)
        {
            img3 = document.createElement("img");
            img3.src="../../img/icones/jusinstalle.png";
            ctx.drawImage(img3, 0, 0, 100, 100, 35, canvas.height-23, 53, canvas.height-5);
        }
        if(ameliorationDef[1] > 0)
        { 
            img4 = document.createElement("img");
            switch(ameliorationDef[1])
            {
                case 1: img4.src="../../img/icones/nivodefense.png";
                    break;
                case 2: img4.src="../../img/icones/nivodefense2.png";
                    break;
                case 3: img4.src="../../img/icones/nivodefense3.png";
                    break;
                default: img4.src="../../img/icones/nivodefense.png";
                    break;
            }
            ctx.drawImage(img4, 0, 0, 100, 100, 55, canvas.height-23, 73, canvas.height-5);
        }
        if(ameliorationHab[1] > 0)
        { 
            img5 = document.createElement("img");
            switch(ameliorationHab[1])
            {
                case 1: img5.src="../../img/icones/nivodevhab.png";
                    break;
                case 2: img5.src="../../img/icones/nivodevhab2.png";
                    break;
                case 3: img5.src="../../img/icones/nivodevhab3.png";
                    break;
                default: img5.src="../../img/icones/nivodevhab.png";
                    break;
            }
            ctx.drawImage(img5, 0, 0, 100, 100, 75, canvas.height-23, 93, canvas.height-5);
        }
        if(ameliorationVoie[1] > 0)
        { 
            img6 = document.createElement("img");
            switch(ameliorationVoie[1])
            {
                case 1: img6.src="../../img/icones/niveaudevoirie.png";
                    break;
                case 2: img6.src="../../img/icones/niveaudevoirie2.png";
                    break;
                case 3: img6.src="../../img/icones/niveaudevoirie3.png";
                    break;
                default: img6.src="../../img/icones/niveaudevoirie.png";
                    break;
            }
            ctx.drawImage(img6, 0, 0, 100, 100, 95, canvas.height-23, 113, canvas.height-5);
        }
    }
    return canvas;
}

[p3ga5e]

Salut

J’ai parcouru rapidement ton code, ton principal problème est que tu dessines des images dont le chargement asynchrone n’est pas encore terminé

Code :

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

1
2
3
4
5
6
var img = new Image();
img.onload = function()
{
	ctx.drawImage(img, 0, 0);
}
img.src ="../../img/icones/nivodefense.png";

De plus, tu n’as pas besoin de recharger sans cesse tes images avant de les afficher, tu dois donc gérer tes ressources graphiques, on appelle ça un Asset Manageur

[skelethor]

Ok, merci je regarde ça !

[skelethor]

Bonjour,

alors j'ai appliqué tes conseils concernant l'image.onload. Ca donne ça :

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
canvas = document.createElement("canvas");
                                canvas.width = l;
                                canvas.height = h;
                                canvas.id = "canvas"+cpt;
                                canvas.alt = tab[1];
                                var drawCanvasImage = function(l, h, canvas, img, amelioration) {
                                    return function() {
                                        ajouterBandeau(11, canvas, img, l, h, "gold"); 
                                        if(amelioration)
                                        {
                                            amel = amelioration.split("~"); 
                                            if(amel[0].length > 1)
                                                ajouterAmelioration(canvas, amel); 
                                        } 
                                    }
                                }
                                $("img").ready(drawCanvasImage(l, h, canvas, img, tab[6]));
 
                                verifierPresenceGang(document.getElementById("id_gang").value, x, y, canvas);
                                img = canvas;
                                img.className = "carte";
                                img.title = tab[1]+" => ("+x+", "+y+")\n"+tab[2];

Le problème est toujours identique, l'image de fond n'apparait pas. Au rafraichissement de la page ça marche très bien.
J'ai regarde les asset manager mais je n'ai pas trouvé d'applications avec canvas.
Merci d'avance !