使鼠标坐标相对于<canvas>坐标

Question

我试图在保持可恢复性的同时找到鼠标在画布的“网格”上的位置。我目前有鼠标坐标在屏幕上的位置（x和y）。

问题是，WebGL（我用于在画布上绘制）和鼠标坐标之间的“缩放”是不同的。 WebGL认为从原点到右边10个单位实际上被认为是来自原点的x个单位（不同的屏幕分辨率会改变这个）。这意味着当我的鼠标结束时WebGL认为（10,10），我的鼠标坐标是（100,100）。

如何将屏幕上的鼠标坐标转换为用于定义点的“WebGL坐标”？

这与this question类似，但我想在不使用Fabric.js的情况下这样做。

Answer 1

要将画布鼠标坐标转换为-1到+1范围内的相对坐标，首先需要使用offsetX/offsetY provided by the mouse event获取画布中的相对像素坐标。

然后将其除以画布的实际宽度和高度 clientWidth/clientHeight

如果相对坐标在0到1的范围内，我们现在可以通过乘以2并减去1将它们移动到正确的范围内。

请注意，在WebGL中，上轴为正1，因此需要反转Y坐标。

全部放在一起：

var ndcX = (mouseEvent.offsetX / canvas.clientWidth) * 2 - 1;
var ndcY = (1 - (mouseEvent.offsetY / canvas.clientHeight)) * 2 - 1;

Answer 2

如果您的事件侦听器位于canvas元素上，那么坐标应该已经在画布上。含义mouse.x = 0 mouse.y = 0将位于画布的左上角。