1

我对 canvas 元素还很陌生，我想了解更多，因为我认为它有潜力。几年前我学过一些openGL（虽然有点模糊），但我只记得很少的东西。综上所述，我如何能够围绕其中心或原点平移对象，例如矩形。我知道你将如何围绕它的中心旋转；平移到原点，旋转它，然后将其平移回来。很简单。我尝试使用相同的概念围绕其中心进行翻译，但无济于事。翻译点仍然在左上角，而不是在我想要的中心。关于我将如何做到这一点的任何提示？我希望这不是一个愚蠢的问题，我只是筋疲力尽，今天无法正确编程或其他什么。

var width = 500;
var height = 400;
var x;
var y;
var rot;
var mx = 2;
var my = 2;

function init() {
    x = 0;
    y = 0;

    setInterval(draw, 1000 / 60);
}
function draw() {
    var ctx = document.getElementById("canvas").getContext("2d");
    ctx.clearRect(0, 0, width, height);

    ctx.save();
    ctx.translate(x, y);
    ctx.fillStyle = "white";
    ctx.strokeRect(0, 0, 30, 30);
    ctx.restore();

    document.getElementById("x").innerHTML = x;
    document.getElementById("y").innerHTML = y;
}

document.onkeydown = function(e) {
    var event = e || window.event;

    /*if(x + mx > canvas.width - 15 || x + mx < 15) {
        x = (x + mx > canvas.width - 15) ? canvas.width - 15 : 15;
    }*/

    if(e.keyCode == 39) { // Right
        x = x + mx;
    }
    else if(e.keyCode == 37) { // Left
        x = x - mx;
    }
}
4

2 回答 2

0

听起来您对翻译转换的工作方式感到困惑。旋转和缩放变换包括乘法，所以变换的起源很重要。对于旋转或缩放，您可以平移以设置变换的原点，执行旋转或缩放，然后根据需要平移回来。

但是，平移只是简单的加法，因为被变换的每个点都移动了相同的量。不涉及乘法，因此变换的起源无关紧要。如果要将矩形向左移动 5 个像素，只需创建一个从每个 X 坐标减去 5 的变换。

例如，假设您在画布上绘制了一个矩形，其左上角位于(0, 0)，右下角位于(x, y)（其中心为(x/2, y/2)）。如果你想移动画布的原点，使矩形的左上角(-x/2, -y/2)和右下角是(x/2, y/2)（它的中心是(0, 0)），你可以将原点平移x/2, y/2。

您尚未指定您使用的语言或环境，但根据您的示例，您可能会使用类似的内容：

ctx.transform(x/2, y/2)
于 2012-09-27T06:23:06.597 回答
0

假设您希望矩形的原点位于其自身的中心，则获取以方形画布为中心的矩形的一般形式是：

(totalCanvasWidth - rectXDimension)/2 = centerTransformPosition

相同的计算适用于 y 轴。

于 2018-06-06T04:43:00.570 回答