Question

我正在尝试使用easeljs加载位图，但它不起作用，请帮助我。

function init() {

    canvas = document.getElementById("testCanvas");
    context = canvas.getContext("2d");
    stage = new createjs.Stage(canvas);
    var image = new Image();
    image.src = "assets/puli.png";

    var container = new createjs.Container();
    stage.addChild(container);

    bitmap = new createjs.Bitmap(image);
    container.addChild(bitmap);
    createjs.Ticker.addEventListener("tick", tick);
}

function tick(event) {

    if (update) {
        update = false; // only update once
        stage.update(event);
    }
}

Answer 1

您必须使用LoadQueue Class表单EaselJs加载图像：看看这个 - ＆gt; http://www.createjs.com/Docs/PreloadJS/classes/LoadQueue.html

var queue = new createjs.LoadQueue(true);
queue.addEventListener("fileload",onFileLoaded.bind(this));
var manifest = getManifest();
queue.loadManifest(manifest);

onFileLoaded = function(evt)
{
 var item = evt.item;
 var type = evt.type;
}

getManifest = function()
{
 var manifest = [
 {src:"/images/yourimage.png", id:"myimage"}    
 ];

 return manifest;
}

//create images
var myimage = new createjs.Bitmap(images.myimage);

Answer 2

@CMS是正确的，预加载内容有帮助 - 您看到的问题可能是您在更新阶段时未加载图像，并且它只更新一次。

只要在加载图像后更新舞台，就可以在原始问题中使用您的方法。您只需等待图像中的加载事件即可完成此操作。像这样：

image.onload = function() {
    update = true;
    // OR
    stage.update();
}

使用PreloadJS对于更大的应用程序来说是一种更好的方法，因为它可以让您更好地控制何时加载资源等等 - 但不一定能让您的代码正常工作。

Answer 3

我感觉到你的痛苦。试试这个 - 我把addChild和stage更新放在onload事件中。适合我。

＆＃13;

var stage, rect, img, greenRect;

function init() {
    stage = new createjs.Stage("demoCanvas");			
    rect = new createjs.Shape();
    img = new Image();
    img.src = 'green.jpg';
    img.onload = handleImageLoad;
}

function handleImageLoad(event) {

    greenRect = new createjs.Bitmap(img);
    stage.addChild(greenRect);
    greenRect.x = 100;
    greenRect.y = 100;
    stage.update();

}

＆＃13;

Answer 4

我从YouTube获得了此代码，并且有效

<!DOCTYPE html>
<html>
<head>
<script src="easeljs.js"></script>      <!==load the EaselJS library==>
<script>
//this sample displays a bitmap file

var stage, img, map;        //declare global variables

function init() {
//this function is registered in the html body tag

    stage = new createjs.Stage("demoCanvas");   //create a Stage object to work with the canvas element

    img = new Image();                          //create an Image object, then set its source property
    img.src="my_photo.jpg";

    img.onload = handleImageLoad                //register a handler for the onLoad event
}

function handleImageLoad(event) {
//this function runs when the onload event completes

    map = new createjs.Bitmap(img);             //create a Bitmap object, then set properties
    map.x =50;
    map.y =50;

    stage.addChild(map);                        //add the Bitmap object as a child of the stage, then update the stage
    stage.update();
}

</script>
</head>
<body onload="init();">

    <!==add a canvas tag==>
    <canvas id="demoCanvas" width="640" height="480"></canvas>

</body>
</html>

Answer 5

当源PreloadJS库时，此代码有效

<!DOCTYPE html>
<html>
<head>
<script src="EaselJS/lib/easeljs.js"></script>      <!==load the EaselJS library==>
<script src="PreloadJS/lib/preloadjs.js"></script>  <!==load the PreloadJS library==>
<script>
//this sample displays a bitmap file

var stage;          //declare global variables
var img;
var map;
var queue;

function init() {
//this function is registered in the html body tag

    stage = new createjs.Stage("canvas");   //create a Stage object to work with the canvas element

    img = new Image();                          //create an Image object, then set its source property

    img.onload = handleImageLoad                //register a handler for the onLoad event

    queue = new createjs.LoadQueue();
    queue.addEventListener('complete', handleImageLoad);
    queue.loadManifest([
    id="img", img.src="my_photo.jpg"
    ])
}

function handleImageLoad(event) {
//this function runs when the onload event completes

    map = new createjs.Bitmap(img);             //create a Bitmap object, then set properties
    map.x = 0;
    map.y = 0;

    stage.addChild(map);                        //add the Bitmap object as a child of the stage, then update the stage
    stage.update();
}

</script>
</head>
<body onload="init();">

    <!==add a canvas tag==>
    <canvas id="canvas" width="640" height="480"></canvas>

</body>
</html>

Answer 6

我推荐你AngularJS。你必须在HTML上调用一个函数：

<table data-bind="with: myData">
    <tr>
        <th><input type="checkbox" value=""></th>
        <!-- ko foreach: [1,2,3] -->
        <th data-bind="html: $data"></th>
        <!-- /ko -->
    </tr>
    <!-- other stuff here -->
</table>

在JavaScript中：

<body ng-init="initCanvas()">
        <center>
            <canvas id="canvas" width="602" height="447"></canvas>
        </center>
</body>

如何使用easeljs加载位图？

6 个答案: