Question

我对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;
    }
}

Answer 1

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

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

例如，假设您在画布上绘制了一个矩形，左上角位于(0, 0)，右下角位于(x, y)（其中心位于{{1} }}）。如果要移动画布的原点，使得矩形的左上角为(x/2, y/2)，其右下角为(-x/2, -y/2)（其中心为(x/2, y/2)），则需要翻译来自(0, 0)。

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

x/2, y/2

Answer 2

获取矩形居中于方形画布上的一般形式，您希望矩形的原点位于其自身的中心位置：

(totalCanvasWidth - rectXDimension)/2 = centerTransformPosition

相同的计算适用于y轴。

如何在画布中用中心翻译矩形？

2 个答案: