使鼠标坐标相对于 <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 元素上，那么坐标应该已经在 canvas 上。这意味着 mouse.x = 0 mouse.y = 0 将位于画布的左上角。