javascript - easeljs not showing bitmap

Question

Welcome To Ask or Share your Answers For Others

javascript - easeljs not showing bitmap

posted Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - easeljs not showing bitmap

This is my easel js function, it draws a red circle and an image, however the circle is showing but the image isn't.

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();
    }

And this is the html file

<!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>

Why? help please, seems like in everyones else code this works but why this isn't working for me?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-17T00:10:27+0000

The image is likely not loaded yet.

You can add a Ticker to the stage to constantly update it (which most applications do, since there is other things changing over time)

Example:

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);
}

Listen for the onload of the image, and update the stage again

Example:

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

Preload the image with something like PreloadJS before you draw it to the stage. This is a better solution for a larger app with more assets.

Example:

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"});

Categories

javascript - easeljs not showing bitmap

javascript - easeljs not showing bitmap

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags