我是 html 和 JavaScript 的新手,我正在编写一个处理坐标系中的点和线的程序,但是如您所知,html5 Canvas 的原点在上 Angular ,我想建立一个坐标原点在 Canvas 中心的系统,我尝试了翻译方法并使用以下方法打印鼠标所在的位置(理想情况下,当鼠标位于 Canvas 中心时,我希望它显示 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};
}
最佳答案
要更改坐标 系统,您可以使用translate()
方法。但是,上下文的转换不会影响绑定(bind)到 元素 本身的鼠标坐标,因此您需要单独跟踪它。
您将不得不手动跟踪平移并补偿鼠标坐标:
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
};
}
希望这对您有所帮助!
关于javascript - 如何将 Canvas 的原点更改为中心?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23373975/