预加载图像的功能-现在需要绘制图像，但是如何? [英] A function to preload images - need to draw them now, but how?

问题描述

我正在研究画布.而且我对某事有些迷茫.

I'm dabbling with canvas. And I'm a little lost on something.

我有这个功能:

function preloadimages(arr) {
        var newimages = []
        var arr = (typeof arr != "object") ? [arr] : arr
        for (var i = 0; i < arr.length; i++) {
            newimages[i] = new Image()
            newimages[i].src = arr[i]
        }
    }

我这样称呼它:

preloadimages(['images/background.png', 'images/hero.png', 'images/monster.png']);

唯一的问题是，我不知道如何稍后再绘制它们.

The only problem is, I don't know how to then draw them again later.

如果我要在js中预加载一张图片，我会说:

If I was preloading one image inside my js I would say:

var bgOk = false;
var bg = new Image();
bg.onload = function () {
    bgOk = true;
};
bg.src = "images/background.png";

然后在我想要绘制它时进一步下降，我会说:

and then further down when I wanted it drawn I would say:

if (bgOk) {
        context.drawImage(bg, 0, 0);
    }

就是这样.问题是我做了一个预加载器类，我真的不知道该如何立即调用我现在要绘制的图像，甚至不知道如何实现bgOk的想法，以便如果加载成功，我就可以绘制它，如果没有，就不要管它.

And that would be that. The problem is I have made a preloader class, I don't really know how now to call in just the image I want to draw now, or even how to implement the bgOk idea so that if it loaded ok, I can draw it, and if not, leave it alone.

有人可以建议我吗?我基本上只是在尝试基于更多的类，而不是像平常那样使用丑陋且难以维护的巨大javascript文件带来的麻烦.

Could someone advise me on this? I'm basically just trying to go more class based rather than the dirty great mess I normally have with a huge javascript file that is ugly and not as maintainable.

推荐答案

这似乎是一个复杂的问题，但实际上并没有看起来那么糟.如果您想使用预先存在的代码，或者只是想了解一些想法，可以查看以下内容: http://thinkpixellab.com/pxloader/此库在Cut The Rope的HTML5版本中使用.

This seems to be a complicated problem, but in reality isn't as bad as it looks. If you want to use pre-existing code, or just want to look at something for ideas you can have a look at: http://thinkpixellab.com/pxloader/ This library was used in the HTML5 version of Cut The Rope.

一个简单的自定义实现可能类似于以下内容:

A simple custom implementation could be something like the following:

function loadImages(arr, callback) {
    this.images = {};
    var loadedImageCount = 0;

    // Make sure arr is actually an array and any other error checking
    for (var i = 0; i < arr.length; i++){
        var img = new Image();
        img.onload = imageLoaded;
        img.src = arr[i];
        this.images[arr[i] = img;
    }

    function imageLoaded(e) {
        loadedImageCount++;
        if (loadedImageCount >= arr.length) {
            callback();
        }
    }
}

然后您可以这样称呼它:

And then you can call it like this:

var loader = loadImages(['path/to/img1', 'path/to/img2', 'path/to/img3'], function() {
    ctx.drawImage(loader.images['path/to/img1']); // This would draw image 1 after all the images have been loaded

    // Draw all of the loaded images
    for (var i = 0; i < loader.images.length; i++) {
        ctx.drawImage(loader.images[i]);
    }
});

如果您想了解有关资产加载的更多详细信息，可以查看Udacity的HTML5游戏开发课程的资产加载部分

If you want more details on asset loading you can have a look at the asset loading section of Udacity's HTML5 Game Development course https://www.udacity.com/course/cs255

这篇关于预加载图像的功能-现在需要绘制图像，但是如何?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！