Как ссылаться на изображение, предварительно загруженное в PreloadJS

Я предварительно загружаю свои изображения с помощью PreloadJS, а после этого вывожу их как дочерние элементы контейнера в HTML5 Canvas (ни одно из них не будет доступно для DOM). Что я хотел бы знать сейчас, так это то, как я могу получить эти растровые изображения позже?

var preload = new createjs.LoadQueue(true, 'img/');
var manifest = [
    {src: 'fred.png', id: 'pri', type: 'sprite', x: 400, y: 500},
    {src: 'banana.png', id: 'door', type: 'sprite', x: 300, y: 500},
]
preload.addEventListener('progress', handleProgress);
preload.addEventListener('complete', handleComplete);
preload.addEventListener('fileload', handleFileLoad);
preload.loadManifest(manifest);

var image = [];
function handleProgress(event) {

}
function handleComplete(event) {
    for(var i = 0; i < image.length; i++) {
        var item = image[i];
        bg = new createjs.Bitmap('img/'+item.src).set({
            x: item.x,
            y: item.y
        });
        world.addChild(bg);
    }
    canvas.update();    
}
function handleFileLoad(event) {
    image.push(event.item);
}

То, что я пробовал, не работает preload.getItem('door').visible = false; preload.getResult('дверь').visible = false; preload.getResult('дверь', true).visible = false;

Я предполагал, что таким образом могу ссылаться на экземпляры и изменять их значения. Это что-то, что я должен добавить в сегмент предварительной загрузки, или я неправильно ссылаюсь на изображения? Если я делаю console.log(preload.getResult('door')), я получаю много странных символов, которые, я думаю, являются анализируемым файлом изображения (?)

Другим способом может быть установка id в качестве свойства в бите предварительной загрузки, чтобы я мог позже получить к нему доступ через bg[0] или bg[1] и т. д., но я полагаю, что для этого должен быть уже встроенный в PreloadJS метод.

bg = new createjs.Bitmap('img/'+item.src).set({
            x: item.x,
            y: item.y,
            id: item.id
});

javascript canvas html5-canvas createjs easeljs
person AKG    schedule 24.06.2013    source источник
comment
Интересно, что preload.getResult('door') не работает... Он должен вернуть вам ссылку на изображение.   -  person Lanny    schedule 25.06.2013

Ответы (2)


arrow_upward
2
arrow_downward

Вы должны различать предварительно загруженный Assets и фактический createjs.Bitmaps - после того, как вы создали createjs.Bitmap, он больше не имеет ничего общего с предварительным загрузчиком, используя preloadJS и идентификатор, вы можете просто использовать идентификатор, КОГДА вы хотите создать новое растровое изображение :

//update: as Lanny pointed out correctly, first retrieve the image:
var image = preload.getResult("pri");
var myBitmap = new createjs.Bitmap(image);  //or use the url
// now "myBitmap" is the reference to that bitmap,
// and can be altered as you wish, alpha, visibility ect...

Шаг создания растрового изображения сразу для каждого загруженного ресурса не необходим (если только вы НЕ ХОТИТЕ показать каждое загруженное изображение сразу), PreloadJS позаботится обо всем этом. Также будет иметь значение определение x и y в манифесте, PreloadJS предназначен просто для загрузки, а не для создания экземпляров. Основной (очень простой) рабочий процесс использования PreloadJS:

  1. Вы создаете очередь
  2. Вы загружаете манифест
  3. Вы ждете завершения события (но только для того, чтобы пнуть код вашего другого приложения)
  4. Вы начинаете со всего своего кода приложения и используете активы через идентификатор для создания растровых изображений всякий раз, когда они вам нужны.
person olsn    schedule 24.06.2013
comment
Это неправильно. Вы не можете использовать идентификатор загруженного изображения в качестве источника растрового изображения. Вы можете использовать идентификатор для поиска изображения в LoadQueue и передать его в качестве источника. Остальное правильно. - person Lanny; 25.06.2013

arrow_upward
4
arrow_downward

Ответ @Olsn в основном правильный. Однако вы должны передать изображение или путь к изображению любому растровому изображению. Идентификатор полезен только для поиска результата из LoadQueue (хотя это неплохая идея, возможно, так и должно работать)

var image = preload.getResult("pri");
var bitmap = new createjs.Bitmap(image);

Как правильно упомянул @olsn, вам не нужно ждать загрузки изображения - вы также можете просто передать путь и пока вы обновляете этап (либо в тике, либо после завершения предварительной загрузки), изображение будет отображаться.

person Lanny    schedule 25.06.2013
comment
Я принял его ответ как правильный, поскольку это был единственный ответ :) На самом деле я уже понял это через несколько минут после того, как опубликовал этот вопрос самостоятельно, но я забыл, что разместил этот вопрос. Спасибо, хотя @Lanny :) - person AKG; 25.06.2013