Easel.js 画布未更新答案

【问题标题】：Easel.js canvas not updatingEasel.js 画布未更新
【发布时间】：2014-02-23 14:18:23
【问题描述】：

我在下面的代码中尝试使用 createjs 绘制一个矩形

function Game(canvas) {
    var stage = new createjs.Stage(canvas),
        character = new createjs.Shape();

    this.init = function (x, y, angle) {
       character.graphics.beginFill("red").drawRect(x, y, 100, 100);
       character.rotation = angle;
       stage.addChild(character);
       stage.update();
    }

}

Game.run = function (canvas) {
    var game = new Game(canvas),
        startX = 400,
        startY = 200,
        startAngle = 45;
    game.init(startX, startY, startAngle);

}

但它不显示任何内容。我错过了什么明显的东西吗？

jsfiddle of the issue

【问题讨论】：

标签： javascript easeljs createjs

【解决方案1】：

你的轮换并没有像你想象的那样工作。

您的“角色”的来源是0,0 - 而不是drawRect 调用的x,y。通过旋转它，您可能会将其移出画布/视线。

将 startX 和 startY 更改为 100，然后看到你的立方体的一部分出现了！（在小提琴中）

如果您希望仅对立方体应用相对于其自身左上角的旋转。您应该调用 drawRect(0, 0, 100, 100) 来绘制它并更改 character 的 x 和 y 属性以移动正方形。

【讨论】：

移除旋转使其显示并更改 x 和 y 属性可以解决问题。谢谢！ :)

【解决方案2】：

您通常希望从原点 (0,0) 开始移动图形的坐标。

所以不是

character.graphics.beginFill("red").drawRect(x, y, 100, 100);

你应该有类似的东西

character.graphics.beginFill("red").drawRect(0, 0, 100, 100);
character.x = x;
character.y = y;

FIDDLE

【讨论】：