drawImage () не рисует предварительно загруженный объект изображения.Используя OO javascript - PullRequest
Новая
       8

drawImage () не рисует предварительно загруженный объект изображения.Используя OO javascript

2 голосов
/ 27 сентября 2011

Я пишу простую 2D-игру с боковым скроллером, используя JavaScript + Canvas. Я пытаюсь сделать это, изучая OO JavaScript. Я столкнулся с проблемой, когда мое изображение не будет отображаться на холсте, несмотря на то, что оно загружено правильно. Вот код: 

//===================================
// class - Canvas
//===================================

var classCanvas = function(id){
    canvas  = document.getElementById(id);
    context = canvas.getContext("2d"); 
}

//===================================
// abstract class - Image Drawer
//===================================

var classImageDrawer = function(that){
this.draw = function(){
    context.drawImage(that.img,
                      that.spriteCoordsX,
                      that.spriteCoordsY,
                      that.width,
                      that.height,
                      that.posX,
                      that.posY,
                      that.width,
                      that.height);
    }
}

//===================================
// class - Level
//===================================

var classLevel = function(name, src){
   this.name           = name;
   this.img            = new Image();
   this.img.src        = src;
   this.img.onload     = function(){ };
   this.spriteCoordsX  = 0;
   this.spriteCoordsY  = 0;
   this.posY           = 0;
   this.posX           = 0;
   this.height         = 400;
   this.width          = 600;
   this.drawer         = new classImageDrawer(this);
}

//==================================
//  Begin 
//==================================

var game      = new classCanvas("playground");
game.LevelOne = new classLevel("LevelOne", "images/foreground-land.png");

game.LevelOne.drawer.draw();

Я проверил код и знаю, что изображение загружается правильно. Во время выполнения ошибок не возникает, изображение "foreground-land.png" просто НЕ появляется на холсте!

Ответы [ 2 ]

1 голос
/ 27 сентября 2011

Ваше изображение может загружаться нормально, но, насколько я могу судить, ваш звонок на game.LevelOne.drawer.draw() не гарантирует, что foreground-land.png загрузил в этот момент (помните, изображения загружаются асинхронно без блокировки выполнение другого кода).

Ваша onload функция для объекта изображения в вашем классе classLevel пуста и анонимна. Ничего не происходит, когда изображение заканчивается загрузка. Я не уверен, как вы хотите структурировать свой код, учитывая все остальное, что у вас есть, но вы должны разрешить вызов game.LevelOne.drawer.draw() только в том случае, если ресурсы, от которых он зависит, были полностью загружены. Лучший способ сделать это - подключиться к обратному вызову onload для всех ресурсов, необходимых для этого объекта (в данном случае это всего лишь одно изображение).

0 голосов
/ 27 сентября 2011

Загрузка изображений - это асинхронная операция, вы (в основном) игнорируете процесс загрузки и действуете так, как будто это операции синхронизации.

Одна вещь, на которую вы можете обратить внимание, - это использование третьего параметра в качестве обратного вызова ("LevelOne", "images / foreground-land.png", function () {this.drawer.draw ()}) и выполняем это как onload

...