欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

WebGL屏幕坐标系、canvas坐标系和WebGL坐标系转换——学习笔记

程序员文章站 2022-05-23 13:33:12
...

WebGL屏幕坐标系、canvas坐标系和WebGL坐标系转换——学习笔记

canvas坐标系转为webgl坐标系,webgl的坐标是x[-1, 1],y[-1, 1]。

①获取canvas在浏览器客户区中的坐标

var x = ev.clientX;
var y = ev.client.Y;
var rect = ev.target.getBoundingClientRect();

图中的P点(x,y)为该点在屏幕坐标系下的坐标值;
图中
canvas原点
在屏幕坐标系下的坐标值为(a,b),即canvas在屏幕上左上角的位置坐标;
其中(a,b)坐标中:

  a = rect.left;
  b = rect.top;

此时求P点在canvas坐标系下的坐标,即将屏幕上的点P转换到cavans坐标系下:

  x' = x-a = x - rect.left;
  y' = y-b = y - rect.top;

(x - rect.left,y - rect.top)坐标为P点在canvas坐标系下的坐标值;

②将canvas坐标转换到webgl坐标系下

1.首先我们通过图片可知,canvas坐标系的Y轴和webgl的坐标系的Y轴方向是相反的,即在后面的转换过程中,y坐标值要进行取反操作。
2.通过代码我们可以获取canvas画布的宽和高:
width = canvas.width;
height = canvas.height;
则webgl原点在canvas坐标系中的位置(即canvas的中心点位置)坐标我们可以直接获得为(width/2,height/2);

现在我们所得到的数据有:

  1. P点在canvas坐标系下的坐标值:(x’,y’)->(x - rect.left,y - rect.top)
  2. canvas的中心点在canvas坐标系下的坐标值:(width/2,height/2)

下一步,我们将canvas的原点平移到中心点WebGL坐标系统的原点位于此处
此时将canvas原点平移到中心点时,P点的坐标应该变为:

x'' = x'-width/2
y'' = y'-height/2

为了使得canvas平移后坐标系与WebGL坐标系完全一致,还需要对平移后的Y轴进行取反操作,即

y'' = -1(y'-height/2)

此时的
(x'',y'')= (x'-width/2,height/2-y')) = ((x - rect.left)-width/2,height/2-(y - rect.top))
在对canvas坐标系进行平移、Y轴取反的操作后(此时的canvas坐标系与webgl坐标系原点位置和xy轴方向完全一致)。由于webgl坐标系的坐标区间为-1.0到1.0,所以最后一步我们将x’‘坐标除以width/2,将y’‘坐标除以height/2,将canvas坐标映射到webgl坐标。
即P点坐标(x,y)最终转换后的坐标为(x’’/(width/2),y’’/(height/2)) =( ((x - rect.left)-width/2)/(width/2),(height/2-(y - rect.top))/(height/2))
对应结果:

x'' = ((x - rect.left)-width/2)/(width/2) = ((x - rect.left)-canvas.width/2)/(canvas.width/2)
y'' = (height/2-(y - rect.top))/(height/2) = (canvas.height/2-(y - rect.top))/(canvas.height/2)