Dans l'init(), comment charger une image sur un objet qui a été créé avant le init

**nouby** · 15/06/2023, 13h06

j'aurais bien voulu savoir comment on fait pour charger une image sur l'objet aprés qu'il a été créé, parce que je crée l'objet en début de page JS et ensuite je voudrais y mettre son image à partir du init().

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
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
 
/* ****************** CLASSES ****************** */
 
class CObjet{
	constructor(Image, PX, PY, Width, Height, Nom){
	this.Image=Image;
        this.PX=PX;
        this.PY=PY;
        this.Width=Width;
        this.Height=Height;
	this.Nom=Nom;
    }
}
 
 
/* ******************* VARIABLES **************** */
 
var largeur=screen.width;
var hauteur=screen.height;
 
 
var image1=new Image();
 
var X1,X2,Y1,Y2=0;
var menu=false;
 
 
var monobjet=new CObjet(image1,100,200); // <----- PX et PY
 
 
 
/* ************** FONCTIONS *************** */
 
function anime(timestamp){
 
    ctx1.drawImage(monobjet.Image,monobjet.PX,monobjet.PY);
 
    animtimer=requestAnimationFrame(anime);
}
 
 
function init(){
 
	ecran1.width=largeur;
	ecran1.height=hauteur;
	ctx1.width=largeur;
	ctx1.height=hauteur;
 
    image1.onload=function(){
        monobjet.Image=image1;
    }
 
    // Image à charger pour l'objet.
    image1.src='citrouille.png';
 
 
    var animtimer=requestAnimationFrame(anime);   
}

**NoSmoking** · 15/06/2023, 16h46

Bonjour,
je ne comprends pas pourquoi tu ne passes pas la scr de l'image lors de la création de l'objet.

La gestion devrait se faire dans l'objet et ne pas dépendre d'éléments extérieurs.

De même ton objet devrait avoir une méthode d'affichage, entre d'autres, pour éviter ce type de code

Code :

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

ctx1.drawImage(monobjet.Image,monobjet.PX,monobjet.PY)

mais plutôt quelque chose comme

Code :

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

monObjet.draw();

**Archimède** · 15/06/2023, 19h00

Re de ce matin... Tu peux toujours faire un truc simple comme ça... Avec un draw() suivant les conseils de NoSmoking

Code html :

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
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #cancan{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="cancan" width="500" height="500"></canvas>
   <script>
     const cancan=document.getElementById('cancan');
     const context= cancan.getContext("2d");
 
     class Oimage{
        constructor(x,y,ctx,path){
            const im=document.createElement('img');
            im.src=path;
            this.draw=function(){
                im.addEventListener( 'load', ()=>{
                   ctx.drawImage(im,x,y);
                });
            }; 
        }
     }
    const image=new Oimage(100,200,context,'image.png');
     image.draw();
   </script> 
</body>
</html>

**nouby** · 15/06/2023, 23h24

Merci, je vais essayer ça !

En fait je voulais respecter la logique des anciens jeux qui était de charger des images en mémoire et de les afficher qu'ensuite, tandis qu'avec le chargement objet de javascript comme l'a dit No smoking, ça pousse plutot à ce que ce soit l'objet qui fasse son affichage
Je trouvais que c'était plus organisé que le chargement soit séparé de l'affichage.

ça marche super ! Et j'ai appris des trucs en lisant le code

**NoSmoking** · 16/06/2023, 17h45

Envoyé par nouby

En fait je voulais respecter la logique des anciens jeux qui était de charger des images en mémoire et de les afficher qu'ensuite

ce schéma reste néanmoins respecté !

Je trouvais que c'était plus organisé que le chargement soit séparé de l'affichage

ce qui a rapport à l'objet doit dépendre de l'objet, diviser pour mieux régner.

Envoyé par Archimède

const im=document.createElement('img')

on peut utiliser directement le constructeur Image() même si fondamentalement cela doit être équivalent.

Je vous livre l'approche que j'aurais faite :

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
class Picture {
  constructor(src, posX = 0, posY = 0) {
    this.image = new Image();
    this.x = posX;
    this.y = posY;
    this.width = 0;
    this.height = 0;
    this.setSource(src);
  }
 
  setSource(src) {
    const thisObj = this;
    this.image.onload = function(e) {
      const objImg = e.target;
      thisObj.width = objImg.naturalWidth;
      thisObj.height = objImg.naturalHeight;
    }
    this.image.onerror = function() {
      thisObj.setSource("data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=");
    }
 
    this.image.src = src;
    return this;
  }
 
  addToContext(context) {
    this.context = context;
    return this;
  }
 
  draw() {
    if (!(this.height * this.width)) {
      setTimeout(() => this.draw(), 1);
    }
    else {
      if (this.context) {
        this.context.drawImage(this.image, this.x, this.y);
      }
    }
    return this;
  }
 
  moveTo(x, y) {
    this.x = x;
    this.y = y;
    this.draw();
    return this;
  }
 
}

A noter la gestion de l'erreur au chargement de l'image.
On peut, bien sûr par la suite, enrichir l'objet avec de nouvelles méthodes

**Archimède** · 16/06/2023, 21h01

Merci NoSmoking, perso j'avais fait ça en plus en cas d'animation (si ça peut servir...)

Code html :

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
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #cancan{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="cancan" width="500" height="500"></canvas>
   <script>
     const cancan=document.getElementById('cancan');
     const context= cancan.getContext("2d");
     const cw=cancan.width;
     const ch=cancan.height;
 
     class Point{
        constructor(x,y){
            this.x=x;
            this.y=y;
        }
     }
 
     class Oimage{
        constructor(x,y,ctx,path){
            let pt= new Point(x,y);
            const im=document.createElement('img');
            im.src=path;
            im.addEventListener('load',()=>{ctx.drawImage(im,pt.x,pt.y);});
            
            this.draw=function(){
                    ctx.clearRect(0,0,cw,ch);  //après il vaudrait mieux effacer sur le rect de la position précédente de l'image pour éviter que ça rame avec plusieurs objets en déplacement...
                    // et aussi utiliser les fonctionnalités de canvas avec ctx.save et ctx.restore() ainsi que ctx.translate(pt.x,pt.y) plutôt que de déplacer l'image...
                    ctx.drawImage(im,pt.x,pt.y);
            };
 
            Object.defineProperties(this, {pos: {
                        set: function (value) {
                            pt=new Point(x+value.x,y+value.y);//ici
                            this.draw();
                        }
                    }
            }); 
        }
     }
 
    
 
     
     const image=new Oimage(0,0,context,'image.png');
 
     let dx=0;
 
     function anime(){
      dx+=1;
      image.pos=new Point(dx,100);
      requestAnimationFrame(anime); 
     }
 
     anime();
   </script> 
</body>
</html>

Dans l'init(), comment charger une image sur un objet qui a été créé avant le init

JavaScript

Vue hybride

Discussions similaires

Partager

Partager