D'une certaine manière, ma classe ne parvient pas à définir certaines variables

Question

Donc, j'utilise toutes les options orientées objet pour essayer de créer une classe d'image statique soignée, tout ce que j'ai à faire est d'ajouter cette classe à Canvas, et ça va se dessiner! Pour tester si tout fonctionnait, j'ai ajouté quelques alertes. Maintenant, ma fonction commence à cracher 'indéfini' à la troisième alerte.

function StaticImage(imgsource, cancontext, ex, wy) { 
    this.x = ex; 
    this.y = wy; 
    this.context = cancontext; 
    alert("Image class instantiated! " + imgsource); 
    this.draw = function() { 
     this.image = new Image(); 
     this.image.src = imgsource; 
     alert("Draw function called!"); 
     this.image.onload = function() { 
      alert(this.image + " loaded! drawing on: " + this.context + " at: " + this.x + ":" + this.py); 
     }; 
     this.cancontext.drawImage(this.image, this.x, this.y); 
    } 
} 

donc, ce serait la classe, ce qui est le bit de Javascript utilisé sur la page HTML qui maintient la toile. D'abord, il crée l'bla.jpg d'image, et il fait la même chose, seulement avec la classe ...

var canvas = document.getElementById("canvas"); 
var context = canvas.getContext("2d"); 
var bla = new Image(); 
bla.src = "bla.jpg"; 
bla.onload = function() { 
    context.drawImage(bla, 50, 50); 
}; 
var lol = new StaticImage("bla.jpg", context, 200, 200); 
lol.draw(); 

Answer 1

Je suppose que le problème ici est que dans

this.image.onload = function() { 
    alert(this.image + " loaded! drawing on: " + this.context + " at: " + this.x + ":" + this.py); 
    } 

la portée de la fonction onload est l'objet stocké dans this.image. Ainsi, le this dans la fonction signifie l'image elle-même. Et les propriétés image, contexte, x et y sont probablement indéfinies pour cette classe.

Answer 2

function StaticImage(src, context, x, y) {  
    this.x = x; 
    this.y = y; 
    this.context = context; 

    // save reference to the instance 
    var self = this; 

    // initialize the image at initialization 
    // time instead of at every draw 
    self.image = new Image(); 
    self.image.onload = function() { 
     // self will still refer to the current instance 
     // whereas this would refer to self.image 
     alert(self.image + " loaded! drawing on: " + self.context + 
       " at: " + self.x + ":" + self.y); 
    }; 
    self.image.src = src; 

    alert("Image class instantiated! " + src); 
} 

// make draw function part of the prototype 
// so as to have only 1 function in memory 
StaticImage.prototype.draw = function() { 
    alert("Draw function called!"); 
    this.context.drawImage(this.image, this.x, this.y); 
}; 
​ 

Note: il est également important de définir l'image src après que vous avez défini le gestionnaire onload, parce que si l'image est dans le cache, vous risquez de manquer l'événement.