zoukankan      html  css  js  c++  java
  • 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轴向上是正方向

  • 相关阅读:
    再谈Dilworth定理
    区间动态规划
    单调队列优化动态规划
    暑假集训考试R2 konomi 慕
    NOIP 2000 计算器的改良
    2007 Simulation message
    COCI 2003 LIFTOVI 电梯 SPFA
    NOIP 2003 数字游戏
    USACO 2014 DEC Guard Mark 状态压缩
    使用HttpClient发送GET请求
  • 原文地址:https://www.cnblogs.com/houxiaohang/p/6894373.html
Copyright © 2011-2022 走看看