如何将画布的原点更改为中心点？

Question

我是html和JavaScript的新手，正在编写一个处理坐标系中点和线的程序，但你知道html5画布的原点在左上角，我想建立一个以画布中心为原点的坐标系。我尝试使用translate方法，并使用以下方法来打印鼠标所在位置（理想情况下，当鼠标位于画布中心时，我希望它显示0:0），但似乎不起作用：

var mousePos = getMousePos(canvas1, evt);
mouseX = mousePos.x;
mouseY = mousePos.y;
var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
writeMessage(document.getElementById("canvas_prime_coor"), message);

function writeMessage(canvas, message) {
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.font = '18pt Calibri';
    context.fillStyle = 'red';
    context.fillText(message, 10, 25);
}

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top};
}

- photosynthesis

---

translate() - CBroe

Answer 1

要更改坐标系，您可以使用translate()方法。但是，上下文的转换不会影响绑定到元素本身的鼠标坐标，因此您需要单独跟踪它们。

您将需要手动跟踪平移并补偿鼠标坐标：

var transX = canvas.width * 0.5,
    transY = canvas.height * 0.5;

context.translate(transX, transY);

现在的问题是你需要处理两个不同的位置：

a) 实际鼠标相对于元素的位置
b) 需要正确的上下文坐标

如果你进行翻译然后使用鼠标位置，如果你想翻译成居中显示，那么会发生以下情况:

假设你的鼠标坐标为30,30。 如果你将这个坐标应用于翻译后的上下文，则图形最终会位于transX + 30，transY + 30，这不是你想要的。

为了弥补这一点，你需要跟踪当前的翻译并从鼠标坐标中减去它:

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: evt.clientX - rect.left - transX,
        y: evt.clientY - rect.top - transY
    };
}

FIDDLE

希望这有所帮助！

- user1693593

---

非常感谢您详细的解释，它完美地运行了！ - photosynthesis

你可能想要翻转y轴，以使上方随着context.scale(1，-1)的调用而增加。 - Grant