Canvas image drawing order

蹲街弑〆低调 提交于 2021-02-17 03:12:28

问题


I'm making a simple engine for isometric games to use in the future.

The thing is i'm having trouble drawing on the canvas. Take for instance this code:

function pre_load() {
    var imgs = ['1', '1000','1010','1011','1012','1013'];
    var preload_image_object = new Image();
    $.each(imgs,function(i,c){
        preload_image_object.src='img/sprites/'+c.logo+'.png';
    })
}

function GameWorld() {
    //[...]
    this.render = function() {
        this.draw(1000, this.center);
        this.draw(1013, this.center);
        this.draw(1010, this.center);
    }

    this.draw = function(id, pixel_position) {
        draw_position_x = pixel_position[0] - this.tile_center[0];
        draw_position_y = pixel_position[1] - this.tile_center[1];

        inst = this;
        var img = new Image();
        img.onload = function () {
            inst.ctx.drawImage(img, draw_position_x, draw_position_y);
            console.log('Drawn: ' + id);
        }
        img.src = "img/sprites/"+id+".png";
    }

}

One might expect that things will be drawn in the order, id 1000, then id 1013, then id 1010 since the images are already loaded(even if not, currently i'm working on a local server).

But if I refresh the page several times, I'll get different results:

Case 1

1

Case 2

2

Case 3

3

(Any other permutation may happen)

The only solution I can think about is making the function "hang" until the onload event has been called and only then proceed to the next .draw() call. Would this be the right approach? How would I go about doing it? Is there a better solution?

Thanks!


回答1:


Your intuition is correct...you need an image loader.

There are plenty of image loader patterns out there--here's one:

When all your images are fully loaded, the imgs[] array below has your sprites in proper order.

var imgURLs = ['1', '1000','1010','1011','1012','1013'];
var imgs=[];
var imgCount=0;

function pre_load(){

    for(var i=0;i<imgURLs.length;i++){

        var img=new Image();
        imgs.push(img);
        img.onload=function(){
            if(++imgCount>=imgs.length){ 

                // imgs[] now contains all your images in imgURLs[] order

                render(); 

            }
        }
        img.src= "img/sprites/"+imgURLs[i]+".png";
    }

}


来源:https://stackoverflow.com/questions/17416706/canvas-image-drawing-order

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!