Question

我有以下代码，我尝试使用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

Answer 1

你的轮换不像你想象的那样有效。

“字符”的来源位于0,0 - 而不是x,y来电的drawRect。通过旋转它你可能会将它移出画布/视线。

将startX和startY更改为100，即可看到您的多维数据集的一部分！（在小提琴中）

如果希望旋转仅应用于相对于其左上角的立方体。您应该调用drawRect（0,0,100,100）来绘制它并更改x的{{1}}和y属性以移动方块。

Answer 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

Easel.js画布没有更新

2 个答案: