Question

使用EaselJS，我试图将一个位图添加到画布。

我有一个Entity对象，定义如下：

const Entity = class {
    constructor(src, x, y) {
        let image = new Image();
        image.src = src;
        this.bitmap = new createjs.Bitmap(image);
        this.bitmap.x = x;
        this.bitmap.y = y;
    };

    get image() {
        return this.bitmap;
    }

    get position() {
        return this.bitmap.x + ', ' + this.bitmap.y;
    };

    handleMovement(event) {
        if (event.keyCode === 38) this.bitmap.y -= 2;
        if (event.keyCode === 40) this.bitmap.y += 2;
        if (event.keyCode === 37) this.bitmap.x -= 2;
        if (event.keyCode === 39) this.bitmap.x += 2;
    };
};

我用它来创建一个名为＆＃34; man＆＃34;的实体对象。我添加到EaselJS阶段：

const stage = new createjs.Stage('cnv');
const man = new Entity('/img/man.png', 100, 40);
stage.addChild(man.image);
stage.update();              // first invocation
$(document).bind('keydown', function (event) {
    "use strict";
    stage.update();          // second invocation
});

如上面的代码段所示，我有两个stage.update（）调用。

只有在按下某个键时才会调用我的jQuery回调。它只包含

stage.update();

但是，在按下某个键之前，实体位图不会出现在画布上。这让我相信stage.update（）只能在回调函数的范围内工作。

如何通过更新画布而不必调用按键来更改此位置以便显示位图？

Answer 1

不是让我的第一个stage.update（）在将它添加到舞台后立即出现，我将它放在一个jQuery ready回调中：

$(document).ready(function () {
    stage.update();
});

现在，当页面加载时，它会相应更新，以便显示位图。

只有在通过jQuery回调调用更新时才会出现位图

1 个答案: