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

Question

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

问题是，WebGL（我用来在画布上绘制）和鼠标坐标之间的"缩放"是不同的。WebGL认为是从原点到权利的10个单位实际上被视为X数字的单位数（不同的屏幕分辨率改变了这一点）。这意味着，当我的鼠标在WebGL上考虑什么（10，10）时，我的鼠标坐标为（100，100）。

我如何将屏幕上的鼠标坐标转换为用于定义点的" webGL坐标"？

这与这个问题相似，但是我想在不使用babric.js的情况下这样做。

Answer 1

将CANVAS鼠标坐标转换为-1范围内的相对坐标至+1，首先需要使用鼠标事件提供的offsetX/offsetY在画布中获得相对像素坐标。<<<<<<<<<<<<<<<</p>

然后将其除以画布的实际宽度和高度 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

如果您的事件侦听器在帆布元素上，则坐标应该已经在画布上。含义鼠标x = 0鼠标。