1

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>
4

1 に答える 1

0

原点を設定する前とw設定します。h回転を設定する前に、回転原点を設定してください。
これはAPIドキュメントに明確に記載されているはずです.私は先に進み、Craftyの問題トラッカーでその問題を開きました.

_draw_me回転後に原点を設定すると、三角形がビューポート (カメラ) の外側にあり、描画する必要がないと Crafty が判断するため、何かが台無しになり、関数が呼び出されなくなります。(設定すると何が起こるかを観察してくださいCrafty.viewport.y = 100- 三角形が表示されます)

次のスニペットは私にとってはうまくいきます。コードはwand 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>

于 2016-04-11T19:04:19.607 に答える