WebGL坐标系、Canvas坐标系和浏览器客户区坐标转化

最新推荐文章于 2024-10-12 15:10:32 发布

原创最新推荐文章于 2024-10-12 15:10:32 发布 · 1.3k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #webgl #javascript

WebGL 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了Canvas坐标系、WebGL坐标系及浏览器客户区坐标之间的转换方法。通过具体公式展示了如何将鼠标点击位置从浏览器客户区坐标转换到Canvas坐标，再进一步转换到WebGL坐标，特别强调了Y轴方向的差异。

WebGL坐标系、Canvas坐标系和浏览器客户区坐标转化

1.Canvas坐标系

Canvas坐标系的原点在左上角，X轴向右为正，y轴向下为正

2.WebGL坐标系

WebGL坐标系的原点在绘图区域的中心点。X轴向右为正，Y轴向上为正，Z轴向外为正。

3.浏览器客户区坐标与Canvas坐标和WebGL坐标的转换

鼠标在浏览器客户区点击的位置为：(event.clientX,event.clientY)

那么在canvas中的坐标（x,y）就是：

var rect = ev.target.getBoundingClientRect();
x = event.clientX-rect.left;
y = -(event.clientY-rect.top);
y = event.clientY-rect.top;

其中rect.left是canvas左边界距离浏览器客户区左边界的位置，rect.top是canvas上边界距离浏览器客户区上边界的位置

在webgl中的坐标位置(x,y)则为：

x = ( (event.clientX-rect.left) -canvas.width/2 )/(canvas.width/2);
y = -((event.clientY-rect.top)-canvas.height/2)/(canvas.height/2);（因为WebGL坐标系，Y轴向上为正，而Canvas坐标系向下为正。在转化的时候，坐标相减后，前面加一个负号）
也就是y = (canvas.height/2 - (event.clientY-rect.top))/(canvas.height/2);

利用上一步从canvas坐标系转换到webgl坐标系，主要的工作就是需要将坐标范围映射到(-1,1)的范围，其次是注意webgl中Y轴向上是正方向。因为WebGL坐标系，Y轴向上为正，而Canvas坐标系向下为正。在Y坐标转化的时候，坐标相减后，前面加一个负号。