Craftyjs вращение холста

Question

Если я изменю атрибут e1 y на 1 или какое-либо другое положительное значение, этот код будет работать, но если y равен 0 или отрицателен, он завершится неудачно. Там нет ошибок, но форма не появляется. Если я рисую другие виды фигур, возникает такая же проблема. В любом случае, значения вращения, такие как 0, 90 и 271, работают с y: 0. Нет такой проблемы со значением x. Это почему? Это ошибка, связанная с Crafty.js?

<script>
        Crafty.init(480,680, document.getElementById('test'));

        Crafty.c("myComponent", {
            init: function () {
                this.requires("2D, Canvas");
                this.bind("Draw", this._draw_me);
                this.ready = true;
            },
            _draw_me: function (e) {
                var ctx = e.ctx;

                ctx.beginPath();
                ctx.moveTo(e.pos._x, e.pos._y);
                ctx.lineTo(e.pos._x + e.pos._w, e.pos._y);
                ctx.lineTo(e.pos._x + e.pos._w/2, e.pos._y + e.pos._h);
                ctx.lineTo(e.pos._x, e.pos._y);

                ctx.fillStyle = "blue";
                ctx.fill();
            }
        });

        var e1 = Crafty.e("myComponent")
            .attr({x: 100, y: 0, w: 60, h: 60, rotation:180})
            .origin("center");
</script>

Answer 1

Задавать w а также h перед установкой происхождения. Установите начало вращения перед установкой вращения.
Это должно быть четко задокументировано в документации API, я решил эту проблему на трекере Crafty.

Если вы установите источник после поворота, все как-то испортится, и _draw_me функция никогда не вызывается, так как Крафти считает, что треугольник находится вне области просмотра (камеры) и не нуждается в рисовании. (Обратите внимание, что происходит, когда вы устанавливаете Crafty.viewport.y = 100 - появляется треугольник)

Следующий фрагмент работает для меня. Наборы кодов w а также h, origin & rotation, в этой последовательности.

Crafty.init();

Crafty.c("myComponent", {
    init: function () {
        this.requires("2D, Canvas");
        this.bind("Draw", this._draw_me);
        this.ready = true;
    },
    _draw_me: function (e) {
        var ctx = e.ctx;

        ctx.beginPath();
        ctx.moveTo(e.pos._x, e.pos._y);
        ctx.lineTo(e.pos._x + e.pos._w, e.pos._y);
        ctx.lineTo(e.pos._x + e.pos._w/2, e.pos._y + e.pos._h);
        ctx.lineTo(e.pos._x, e.pos._y);

        ctx.fillStyle = "blue";
        ctx.fill();
    }
});

var e1 = Crafty.e("myComponent")
    .attr({w: 60, h: 60})
    .origin("center")
    .attr({x: 100, y: 0, rotation: 180});

<script src="https://github.com/craftyjs/Crafty/releases/download/0.7.1/crafty-min.js"></script>