kineticJS包裝錯誤

Question

我的工作與kienticJS，我想定製我自己的精靈，但我得到下一個錯誤：

Uncaught TypeError: Cannot call method 'getSprite' of undefined escena.js:15 
Escena escena.js:15 
(anonymous function) aplicacion.js:25 
st.event.dispatch jquery.min.js:2 
y.handle 

所以，我一類Escena當我「運行「遊戲。我有一類假面這是我的精靈，所以代碼是下一個：

類Escena：

var Escena = function() 
{ 
    this.stage = new Kinetic.Stage({ 
     container: 'simulacion', 
     width: 578, 
     height: 200 
    }); 
    this.layer = new Kinetic.Layer(); 
    this.persona = new Persona(); 
    this.layer.add(this.persona.getSprite() ); //IT'S HERE THE MISTAKE 
    this.stage.add(this.layer); 
}; 

類女神是：

var Persona = function() 
{ 
    this.ancho= 26; 
    this.alto = 70; 
    this.sprite ; 

    var animaciones = { 
     caminar: 
     [ { x: 7, y: 38, width: this.ancho, height: this.alto }, 
      { x: 37, y: 38, width: this.ancho, height: this.alto }, 
      { x: 68, y: 38, width: this.ancho, height: this.alto }, 
      { x: 95, y: 38, width: this.ancho, height: this.alto }, 
      { x: 127, y: 38, width: this.ancho, height: this.alto }, 
      { x: 157, y: 38, width: this.ancho, height: this.alto }, 
      { x: 186, y: 38, width: this.ancho, height: this.alto } 
     ] 
    }; 
    this.imagen = new Image(); 


    this.imagen.onload = function(){ 
     this.sprite = new Kinetic.Sprite({ 
      x:250, 
      y:250, 
      image: this.imagen, 
      animation: 'caminar', 
      animations: animaciones, 
      frameRate: 7, 
      index: 0 
     }); 
    }; 
    this.imagen.src = 'img/character.png'; 
}; 
Persona.prototype ={ 
    constructor: Persona, 
    getSprite: function(){ 
     return this.sprite; 
    } 
}; 

如何解決我的麻煩？

謝謝。

Answer 1

我想你在加載「img/character.png」之前調用方法。 您必須定義一個回調函數並在圖像加載時啓動它。

以下示例不執行任何操作，但不會顯示錯誤。檢查我們傳遞給Persona的onLoad功能。

var Escena = function() 
{ 
    this.stage = new Kinetic.Stage({ 
     container: 'simulacion', 
     width: 578, 
     height: 200 
    }); 
    this.layer = new Kinetic.Layer(); 
    var that = this; 
    this.persona = new Persona(
     function(){ 
      that.layer.add(that.persona.getSprite() ); //IT was HERE THE MISTAKE 
      that.stage.add(that.layer); 
      console.log(that.persona.getSprite()) //the sprite has been created 
     } 
    ); 

    /* 
    I moved this to the callback anonymous function 
    this.persona.getSprite(); 
    this.layer.add(this.persona.getSprite() ); //IT'S HERE THE MISTAKE 
    this.stage.add(this.layer); 
    */ 
}; 

var Persona = function(onLoad) 
{ 
    this.ancho= 26; 
    this.alto = 70; 
    this.sprite ; 

    var animaciones = { 
     caminar: 
     [ { x: 7, y: 38, width: this.ancho, height: this.alto }, 
      { x: 37, y: 38, width: this.ancho, height: this.alto }, 
      { x: 68, y: 38, width: this.ancho, height: this.alto }, 
      { x: 95, y: 38, width: this.ancho, height: this.alto }, 
      { x: 127, y: 38, width: this.ancho, height: this.alto }, 
      { x: 157, y: 38, width: this.ancho, height: this.alto }, 
      { x: 186, y: 38, width: this.ancho, height: this.alto } 
     ] 
    }; 
    this.imagen = new Image(); 

    var that = this; 
    this.imagen.onload = function(){ 
    var sprite = new Kinetic.Sprite({ 
      x:250, 
      y:250, 
      image: this.imagen, 
      animation: 'caminar', 
      animations: animaciones, 
      frameRate: 7, 
      index: 0 
     }); 
     that.sprite = sprite; 
     onLoad(); 
    }; 

    this.imagen.src = 'img/character.png'; 

}; 
Persona.prototype ={ 
    //constructor: Persona, 
    getSprite: function(){ 
     return this.sprite; 
    } 
}; 
var escena1 = new Escena(); 

順便說，西班牙是我的母語:-)