Javascript 如何将画布的原点更改为中心?
我不熟悉html和JavaScript,我正在编写一个处理坐标系中的点和线的程序,但正如您所知,html5画布的原点位于上角,我想构建一个坐标系,其原点位于画布的中心,我尝试了translate方法,并使用以下方法打印鼠标所在的位置(理想情况下,当鼠标位于画布中心时,我希望它显示0:0),但它似乎不起作用:Javascript 如何将画布的原点更改为中心?,javascript,html,canvas,Javascript,Html,Canvas,我不熟悉html和JavaScript,我正在编写一个处理坐标系中的点和线的程序,但正如您所知,html5画布的原点位于上角,我想构建一个坐标系,其原点位于画布的中心,我尝试了translate方法,并使用以下方法打印鼠标所在的位置(理想情况下,当鼠标位于画布中心时,我希望它显示0:0),但它似乎不起作用: var mousePos = getMousePos(canvas1, evt); mouseX = mousePos.x; mouseY = mousePos.y; var message
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()
方法。但是,上下文的转换不会影响绑定到元素本身的鼠标坐标,因此需要单独跟踪
您必须手动跟踪平移并补偿鼠标坐标:
var transX = canvas.width * 0.5,
transY = canvas.height * 0.5;
context.translate(transX, transY);
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left - transX,
y: evt.clientY - rect.top - transY
};
}
现在的问题是你要处理两种不同的立场:
a) 相对于元素的实际鼠标位置b) 坐标必须与上下文相符 如果平移,然后使用鼠标位置,然后平移到中心,则会发生以下情况: 假设你的鼠标坐标是30,30。如果在转换的上下文中使用此坐标,图形将以transX+30、transY+30结束,这不是您想要的 为了补偿这一点,您需要跟踪当前平移并将其减去鼠标坐标:
var transX = canvas.width * 0.5,
transY = canvas.height * 0.5;
context.translate(transX, transY);
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left - transX,
y: evt.clientY - rect.top - transY
};
}
希望这有帮助 非常感谢您的详细解释,它工作起来很有魅力!您可能希望翻转y轴,使其向上随上下文而增加。比例(1,-1);