Craftyjs canvas rotation

Craftyjs canvas rotation

本文关键字：rotation canvas Craftyjs      更新时间：2024-03-19

如果我将 e1 属性 y 更改为 1 或其他一些正值，则此代码有效，但如果 y 为 0 或负数，则失败。没有错误，但形状未显示。如果我画其他类型的形状，也会出现同样的问题。无论如何，0、90 和 271 等旋转值适用于 y：0。 x 值没有这样的问题。为什么？这是与狡猾.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>

设置原点之前设置w和h。在设置旋转之前设置旋转原点。
这应该清楚地记录在 API 文档中，我继续在 Crafty 的问题跟踪器上打开了一个问题。

如果你在旋转后设置原点，事情会以某种方式变得混乱，并且_draw_me函数永远不会被调用，因为Crafty认为三角形位于视口(相机(之外，不需要绘制。(观察设置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>

相关文章：