一个预加载图像的函数-现在需要绘制它们,但如何绘制
A function to preload images - need to draw them now, but how?
我正在涉猎画布。我有点不知所措。
我有这个功能:
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']);
唯一的问题是,我不知道以后怎么画。
如果我在js中预加载一个图像,我会说:
var bgOk = false;
var bg = new Image();
bg.onload = function () {
bgOk = true;
};
bg.src = "images/background.png";
然后再往下走,当我想把它画出来的时候,我会说:
if (bgOk) {
context.drawImage(bg, 0, 0);
}
就是这样。问题是我已经制作了一个预加载类,我真的不知道现在如何只调用我现在想要绘制的图像,甚至不知道如何实现bgOk的想法,这样如果它加载得好,我就可以绘制它,如果不加载,就别管它。
有人能给我建议吗?我基本上只是想更多地基于类,而不是像我通常遇到的那样,使用一个丑陋且不可维护的巨大javascript文件。
这似乎是一个复杂的问题,但实际上并不像看上去那么糟糕。如果你想使用预先存在的代码,或者只是想寻找一些想法,你可以看看:http://thinkpixellab.com/pxloader/这个库在HTML5版本的Cut the Rope中使用过。
一个简单的自定义实现可以是如下所示:
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();
}
}
}
然后你可以这样称呼它:
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游戏开发课程的资产加载部分https://www.udacity.com/course/cs255
我使用的一个函数:
function ImageLoader(sources, callback)
{
var images = {};
var loadedImages = 0;
var numImages = 0;
// get num of sources
for (var src in sources) {
numImages++;
}
for (var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if (++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}
}
你这样称呼它:
var sources = {
bg: path/to/img.png,
title: path/to/img/png
};
var _images = {};
isReady = ImageLoader(sources, function(images) {
_images = images;
});
然后访问您的图像
_images.bg;
示例:drawImage(_images.bg, 0, 0);
相关文章:
- D3在一个调用中绘制不同的SVG形状,没有可见性
- 有没有一个javascript图形绘制库可以进行气球树布局
- 使用相同的数据集绘制各种符号
- 使用onclick绘制SVG路径
- 在谷歌地图上绘制位置数据库
- 用chart.js绘制条形图
- “可绘制地图”设置地图选项“纬度-经度”
- 多维数据集网格未在指定的分区中绘制
- 使用谷歌图表在x轴上绘制日期
- 使用fabric.js从矩形区域获取对象,并将该区域绘制到画布上
- 如何在React Native中绘制图形
- 画布中绘制的矩形区域的弹出工具提示
- 如何在OpenLayers中获取动态绘制的多边形的坐标
- 画布:逐像素绘制图像并请求动画帧计时
- D3从嵌套的JSON中绘制第二个圆环图
- 如何用d3.js绘制折线图
- 如何在BIRT报告中绘制或绘制自定义设计的图表
- 替换“绘制”上绘制的几何图形
- HTML画布”;源顶”;以仅绘制先前绘制的形状
- 地图绘制-动态绘制多边形