Question

最近三周，我正在创建一个画布引擎，上周，我试图解决在画布中旋转对象的一个问题。我尝试了许多解决方案，但未成功。在大多数情况下，代码是旋转画布的全部内容或不显示任何内容（如现在（但是如果删除.save()和.restore()，则所有内容都会旋转）。我希望这样可以避免代码中的大更改，因为这是我编写的最大的代码（并且我不想做很多更改）。该代码段如下所示，感谢您的帮助。（如果您想查看完整的代码，则可以转到here）

//Functions.js File
function degToRad(int) {
    return int * Math.PI / 180;
}

//Init.js File
var fps = 0;
var objects = new Array();
var ctx_real = {
    context: undefined,
    width: 0,
    height: 0,
    init: function () {
        this.context = this.DOM.getContext("2d");
        this.width = this.DOM.width;
        this.height = this.DOM.height;
    },
    clear: function () {
        this.context.clearRect(0, 0, this.width, this.height);
    }
};
const proXy_ctx = {
    get: function (target, prop) {
        return target.hasOwnProperty(prop) ? target[prop] : ctx_real.context; //=> ctx.SomeAtributeThatNotExists = ctx.context
    }
};
const ctx = new Proxy(ctx_real, proXy_ctx);

function init() {
    ctx.DOM = document.getElementById("ctx");
    ctx.init();
    setLayout("Game");
    setLayout("Test2");
    setInterval(frameUpdate, 1);
}

//Script.js File
async function frameUpdate() {
    ctx.clear();
    clearObjects = false;
    for (var tmp0 = 0 in objects) {
        var object = objects[tmp0];
        var id = object[0];
        var type = object[1];
        var x = object[2];
        var y = object[3];
        var color = object[4];
        ctx.context.strokeStyle = color;
        ctx.context.fillStyle = color;
        var arg0 = object[5];
        var arg1 = object[6];
        var arg3 = object[8];
        var arg4 = object[9];
        switch (type) {
            case "Rct":
                var translateX = x + (arg0 / 2);
                var translateY = y + (arg1 / 2);
                if (typeof arg3 == "number" && arg3 != 0) {
                    ctx.context.save();
                    ctx.context.translate(translateX, translateY);
                    ctx.context.rotate(degToRad(arg3));
                }
                if (arg4) {
                    ctx.context.fillRect(x, y, arg0, arg1);
                } else {
                    ctx.context.strokeRect(x, y, arg0, arg1);
                }
                if (typeof arg3 == "number") {
                    ctx.context.restore();
                }
                break;
        }
    }
    if (clearObjects) {
        objects = objects.filter(Boolean);
    }
    fps++;
    setTimeout(function () { fps--; }, 1000);
    ctx.context.fillStyle = "black";
    ctx.context.font = "10px Verdana";
    ctx.context.fillText(fps, 10, 10);
}

function setLayout(layoutName) {
    switch (layoutName) {
        case "Game":
            createObject(["SomeId", "Rct", 0, ctx.height - 30, "green", ctx.width, 30, , , true]);
            createObject(["SomeId", "Rct", 0, ctx.height - 30, "#402a25", ctx.width, 3, , , true]);
            break;
        case "Test2":
            createObject(["SomeRotatedEl", "Rct", ctx.width / 2, ctx.height / 2, "red", 50, 50, , 90, true]);
            break;
    }
}

function createObject(object) {
    objects.push(object);
}

html,
body,
canvas {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}

<!DOCTYPE html>
<html>
<body onLoad="init()">
  <canvas id="ctx">You can simple download e.g. Chrome or what?!!!</canvas>
</body>
</html>

Answer 1

如果不“旋转”所有画布，就无法在画布上绘制旋转的对象。

不幸的是，画布就是这样工作的。这样想吧：

您只能在空间json.gsub(/\"/,'\"')中的单个点处进行绘制，而画布就像该物理纸一样在该点的正下方。

然后，如果您想在{x:0,y:0}处进行绘制，则将所有画布向上移动10像素，因此，如果从画布的顶部/左侧开始计数，则现在要绘制的点变为{x:0,y:10}，但是是{x:0,y:10}进行绘制。

{x:0,y:0}

如果要旋转，请旋转画布，以便要绘制的东西在旋转时出现：

// red rect at {x:0,y:40}
ctx.fillStyle = "rgba(255,0,0,0.3)";
ctx.translate(0, 40) // means that {x:0,y:10} "is new" {x:0,y:0}
ctx.fillRect(0, 0, 40, 20);

但是它围绕其左上角旋转。我想那是你的问题吗？

要正确旋转对象（以中心为旋转轴），您需要放置画布，以使对象的中心变为// reset all transformations ctx.setTransform(1, 0, 0, 1, 0, 0); // green rect at {x:0,y:0} rotated 45deg ctx.fillStyle = "rgba(0,255,0,0.3)"; ctx.rotate(45 * Math.PI / 180); ctx.fillRect(0, 0, 40, 20);。然后旋转并绘制对象，使其中心位于{x:0,y:0}，对于大多数对象，这意味着您将其绘制在{x:0,y:0}。

例如，如果您想将{x:-width/2,y:-height/2}处的蓝色矩形与{x:50,y:50}一起旋转45度

{width:40,height:20}

有关完整示例，请参见：https://codepen.io/anon/pen/QYGXzp?editors=0010

JavaScript：在画布中旋转对象

1 个答案: