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

Question

我试图找到鼠标在 canvas 的 'grid' 上的位置，同时保持可调整大小。我目前有鼠标在屏幕上的坐标（x 和 y）。

问题是，WebGL（我用它在 canvas 上绘图）和鼠标坐标之间的 'scaling' 不同。 WebGL 认为距原点右侧 10 个单位的位置实际上被认为距原点 x 个单位（不同的屏幕分辨率会改变这一点）。这意味着当我的鼠标悬停在 WebGL 认为的 (10, 10) 上时，我的鼠标坐标是 (100, 100)。

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

这与 this question 类似，但我想在不使用 Fabric.js 的情况下执行此操作。

Answer 1

如果您的事件监听器在 canvas 元素上，那么坐标应该已经在 canvas 上。意思是 mouse.x = 0 mouse.y = 0 会在 canvas.

的左上角

Answer 2

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

然后将其除以 canvas 的实际宽度和高度，使用 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;

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

Make mouse coordinates relative to <canvas> coordinates

html

javascript

canvas

webgl