Как кешировать изображение и использовать его позже в EaselJS?

Question

У меня очень простая анимация спрайтов. Как кэшировать изображение и использовать его в части «изображений» создания листа спрайтов? Я попытался с:

Image1= new Image(2779,1135) 
Image1.src = "img/contur.png" 

, но я не knwo как включить изображение 1 в разделе «изображения».

stage = new createjs.Stage (document.getElementById ("testCanvas")); stage.clear();

var ss = new createjs.SpriteSheet({ 
    "animations": {"run": [0, 50]}, 
    "images": ["img/contur.png"], 
    "frames": 
     { 
     "height": 140, 
     "width": 231, 
     "regX": 0, 
     "regY": 0, 
     "count": 51 
     } 
    }); 

var grant = new createjs.Sprite(ss, "run"); 

stage.addChild(grant); 
createjs.Ticker.setFPS(24); 
createjs.Ticker.addEventListener("tick", stage); 

Answer 1

Если я правильно понял ваш вопрос, вы хотите загрузить изображение до его использования в спрайте.

У вас есть 2 способа сделать это:

1. Добавить обратный вызов на img.load:

   img = new Image(); 
   img.src = "img/contur.png"; 
   img.onload = function(event) { 
       // you can create spritesheet here 
   } 
   

2. Использование PreloadJS (рекомендуемые):

   loader = new createjs.LoadQueue(true); 
   loader.on('complete', function(event) { 
       // you can create spritesheet here 
   }); 
   loader.loadManifest([{id:'imageX', src:'img/contur.png'}]); 
   

   , если это case, вам также необходимо запустить веб-сервер (например, используя python: python -m SimpleHTTPServer 8088)

Для обоих вариантов, вам просто необходимо использовать путь к изображению (браузер получит загруженное изображение автомагически):

var ss = new createjs.SpriteSheet({ 
    "animations": {"run": [0, 50]}, 
    "images": ["img/contur.png"], 
    "frames": { 
     "height": 140, 
     "width": 231, 
     "regX": 0, 
     "regY": 0, 
     "count": 51 
    } 
}); 

Если вы используете PreloadJS, вы можете указать, нагруженная изображение объект с помощью псевдонима (определяется на манифесте):

"images": [loader.getResult('imageX')], 
... 

Примечания: не забудьте позвонить stage.update() после добавления материала на сцену или анимировать Фрам es, иначе он просто покажет пустой холст или статическое изображение.