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

最新推荐文章于 2025-05-09 20:29:44 发布

原创最新推荐文章于 2025-05-09 20:29:44 发布 · 1.3k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#canvas #webgl #javascript

WebGL 专栏收录该内容

1 篇文章

订阅专栏

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坐标转化的时候，坐标相减后，前面加一个负号。