Discussion :

[nouby]

Bonjour, j'arrive pas à m'y faire aux objets !

J'ai beau avoir essayé de comprendre les exemples donnés par Archimède, No Smoking, ASCIIDEFOND, et d'autres gars sympas dont j'ai plus le nom en tête, bein je suis toujours aussi nul.

J'essaie par exemple de charger une image lors de la création d'un objet vehicule, mais le onload de l'image ne se fait pas alors qu'il possède bien son SRC.

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
class CVehicule{
    constructor(Nom, Type, Fichier, X, Y, W, H){
        this.Nom=Nom;
	this.Type=Type;
	this.Image=new Image();
        this.Image.SRC=Fichier;
        this.Image.onload=function(e){
            const objImg=e.target;
            this.W=this.Image.width;
            this.H=this.Image.height;
            alert(this.W);
    }
 
}
 
var mavoiture=new CVehicule("Mercedes",1,"img/vehicules/taxi01.png",50,450);

Ensuite j'ai essayé d'y ajouter une fonction Draw() mais quand je mets "this" devant la fonction vscode me donne une erreur et rien ne marche.
Du coup je mets pas le "this" mais pour pas plus de résultats.

Code javascript :

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

1
2
3
    Draw=function(ctx){
        ctx.drawImage(this.Image,this.X,this.Y,this.W,this.H);
    }

J'ai aussi essayé comme ça :

Code :

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

1
2
3
    Draw=function(ctx,x,y,w,h){
        ctx.drawImage(this.Image,x,y,w,h);
    }

[Pytet]

Bonjour,

Il semble manquer une accolade pour fermer correctement la classe CVehicule dans ton exemple.
La méthode onload ne semble pas être utile actuellement.
La fonction draw() est définie dans la classe CVehicule ?

Un exemple reproductible (complet et/ou en ligne) est souvent plus parlant.
De ce que j'ai compris de ton code : https://jsfiddle.net/urfamn6h/

[Archimède]

Sur la première partie de ton code, il manque en effet une accolade et

Code javascript :

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

 document.body.appendChild(this.Image);

[nouby]

Bonjour,

Il semble manquer une accolade pour fermer correctement la classe CVehicule dans ton exemple.
La méthode onload ne semble pas être utile actuellement.
La fonction draw() est définie dans la classe CVehicule ?

Un exemple reproductible (complet et/ou en ligne) est souvent plus parlant.
De ce que j'ai compris de ton code : https://jsfiddle.net/urfamn6h/

Merci beaucoup, je vais le voir !
Oui la fonction draw est dans la classe CVehicule, j'ai essayé de faire comme j'ai vu sur le net, d'aprés ma compréhension du truc :/

[nouby]

Merci Archimède !
en fait j'ai oublié l'accolade lors de la copie mais dans mon code elle y est.

Sur la première partie de ton code, il manque en effet une accolade et

Code javascript :

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

 document.body.appendChild(this.Image);

ça se place à quel endroit ?
Dans le onload() de l'image ?

Bonjour,

Il semble manquer une accolade pour fermer correctement la classe CVehicule dans ton exemple.
La méthode onload ne semble pas être utile actuellement.
La fonction draw() est définie dans la classe CVehicule ?

Un exemple reproductible (complet et/ou en ligne) est souvent plus parlant.
De ce que j'ai compris de ton code : https://jsfiddle.net/urfamn6h/

Sur le lien, la voiture n'apparaît pas aussi :/

[Archimède]

ça se place à quel endroit ?
Dans le onload() de l'image ?

Par rapport à ce que tu as écrit en dessous de this.image.src....
Après c'est la conception de ta classe qui faudra revoir... le chargement de ton image devrait se faire dans le onload

[nouby]

Par rapport à ce que tu as écrit en dessous de this.image.src....
Après c'est la conception de ta classe qui faudra revoir... le chargement de ton image devrait se faire dans le onload

Merci, tu entends quoi par le onload() ? est-ce celui qui est dans la classe : this.Image.onload=function(){..}.

En tous cas, j'ai essayé ça, pas d'affichage :

Code :

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

1
2
3
4
5
6
        this.Image.SRC=Fichier;
        this.Image.onload=function(){
            this.W=this.Image.width;
            this.H=this.Image.height;
            document.body.appendChild(this.Image);
        }

[Archimède]

Non, je t'ai dit ici :

Code javascript :

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

1
2
3
4
5
this.Image=new Image();
this.Image.src=Fichier;
document.body.appendChild(this.Image);//<- là
this.Image.addEventListener('load',function(e){  /* ou this.image.onload=function...*/
const objImg=e.target;//....

[nouby]

aaah Merci !

Et sur le lien donné plus haut de jsfiddle, il n'y a aucun onload d'image pourtant ?

EDIT :

Avec l'appendChild, vscode me fait une erreur :

caught TypeError: Cannot read properties of null (reading 'appendChild')

[Archimède]

Oui, si tu ne charges pas ton fichier avant, le this.image sera indéfini, je pense. Autant pour moi. donc erreur sur this.image.onload...

[nouby]

je suis désolé, Archimède si je comprend pas, mais tu veux dire quoi, je dois faire quoi d'aprés toi pour voir apparaître mon image ?
j'ai fais comme dans le lien jsfiddle mais moi j'ai rien qui s'affiche.

EDIT : c'est bon j'ai affiché une image en prenant l'exemple de jsfiddle

Merci beaucoup de votre aide, c'est vraiment génial !!!

[Archimède]

je suis désolé, Archimède si je comprend pas, mais tu veux dire quoi, je dois faire quoi d'aprés toi pour voir apparaître mon image ?
j'ai fais comme dans le lien jsfiddle mais moi j'ai rien qui s'affiche.

En laissant ton code intact tu fais :

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
 class CVehicule{
            constructor(Nom, Type, Fichier, X, Y, W, H){
                this.Nom=Nom;
                this.Type=Type;
                this.Image=new Image();
                this.Image.src=Fichier;
                document.body.appendChild(this.Image);
                this.Image.onload=function(e){
                        const objImg=e.target;
                        this.W=this.Image.naturalWidth;
                        this.H=this.Image.naturalHeight;
                        alert(this.W);
                };
            }
        }
        var mavoiture=new CVehicule("Mercedes",1,"le path de ton fichier",50,450);

Et tu verras ton image, je te l'ai déjà dit...

[nouby]

Ah ok !
je vais essayer comme ça aussi

[nouby]

En fait, non seulement mon code était pas bon, mais en plus j'avais mis
this.Image.SRC= Alors que ce qui marche c'est,
this.Image.src=.
Une histoire de majuscules...

Et finalement j'ai pas eu à faire le load() de l'image, je me suis servi du code donné sur jsfiddle montré plus haut dans ce topic.
Merci encore pour vos éclaircissements qui m'ont beaucoup apporté en compréhension !!!

[Archimède]

Oui mais le src ne suffisait pas si tu ne définis pas le nœud sur body de ton image avec appendChild...
Regarde ce tuto sur les éléments du dom...

https://javascript.developpez.com/tu...-lignes-du-dom

[nouby]

Ok, Merci de ton lien