canvas与webgl坐标转换

1 canvas的坐标系

坐标原点在左上角,横轴向右为X轴正方向,竖直向下为Y轴正方向

2 webgl的坐标系

坐标原点在绘图区域的中心点,横向右为X轴正方向,竖直向上为Y轴正方向,横纵坐标区域范围为(-1,1)

3 坐标转换

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

    • 那么在canvas中的坐标(x,y)就是:
      var rect = event.target.getBoundingClientRect();
      x = event.clientX-rect.left;
      y = - (event.clientY-rect.top);
      其中rect.left是canvas左边界距离浏览器客户区左边界的位置,rect.top是canvas上边界距离浏览器客户区上边界的位置,注意y坐标加符号是因为canvas中Y轴向下为正方向

    • 在webgl中的坐标位置(x,y)则为:
      x = ( (event.clientX-rect.left) -canvas.width/2 )/(canvas.width/2);
      y = (canvas.height/2 - (event.clientY-rect.top))/(canvas.height/2);
      利用上一步从canvas坐标系转换到webgl坐标系,主要的工作就是需要将坐标范围映射到(-1,1)的范围,其次是注意webgl中Y轴向上是正方向

转载于:https://www.cnblogs.com/houxiaohang/p/6894373.html

你可能感兴趣的:(canvas与webgl坐标转换)