Мольберт не показывает растровое изображение

Question

Мольберт не показывает растровое изображение

Это моя мольбертная функция js, она рисует красный круг и изображение, однако круг показывает, а изображение нет.

function Start() {
          var stage = new createjs.Stage("DogeCanvas");
          var dog = new createjs.Bitmap("doge.jpg");
          var circle = new createjs.Shape();
          circle.graphics.beginFill("red").drawCircle(0, 0, 50);
          circle.x = 100;
          circle.y = 100;
          dog.x=100;
          dog.y=100;
          stage.addChild(circle, dog);
          stage.update();
    }

И это HTML-файл

<!DOCTYPE html>
<html>
    <head>
        <title>test</title>
        <script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
        <script src="Doge.js"></script>

    </head>

    <body bgcolor="#C7C7C7" onload="Start();">
          <canvas id="DogeCanvas" width="480" height="320"></canvas>
    </body>
</html>

Зачем? помогите, пожалуйста, кажется, что в любом другом коде это работает, но почему это не работает для меня?

11

javascript html5 easeljs

Источник

user3147947 31 дек '13 в 02:07

1 ответ

Решение

Другие вопросы по тегам javascript html5 easeljs

user1252916 31 дек '13 в 17:23 2013-12-31 17:23 · Accepted Answer · 2013-12-31 17:23

Скорее всего, изображение еще не загружено.

Вы можете добавить тикер на сцену, чтобы постоянно обновлять его (что делает большинство приложений, поскольку со временем происходят другие изменения)

Пример:

createjs.Ticker.on("tick", stage);
// OR
createjs.Ticker.addEventListener("tick", stage);
// OR
createjs.Ticker.on("tick", tick);
function tick(event) {
    // Other stuff
    stage.update(event);
}

Слушай onload изображения и обновите сцену снова

Пример:

var bmp = new createjs.Bitmap("path/to/image.jpg");
bmp.image.onload = function() {
    stage.update();
}

Предварительно загрузите изображение чем-то вроде PreloadJS, прежде чем рисовать его на сцене. Это лучшее решение для более крупного приложения с большим количеством ресурсов.

Пример:

var queue = new createjs.LoadQueue();
queue.on("complete", function(event) {
    var image = queue.getResult("image");
    var bmp = new createjs.Bitmap(image);
    // Do stuff with bitmap
});
queue.loadFile({src:"path/to/img.jpg", id:"image"});