canvas坐标系转webgl坐标系

AllBlue2025-05-10 20:43

红色的canvas坐标系，蓝色是webgl坐标系

需要注意的地方有三点

坐标原点不同，需要将canvas的中间位置作为webgl的原点，求出绿色的点相对于canvas中间位置的偏移量
求出绿色的点相对于canvas中间位置的偏移量对应的webgl的位置
处理y轴，canvas的y向下，webgl的y轴向上，需要将 y 的值取反

代码为鼠标点击canvas，获取当前的点的webgl坐标

复制代码

canvas.addEventListener('click', (e) => {
    // 第一步：e.clientX 是鼠标在网页中的位置，需要根据 e.clientX 求出鼠标在canvas中的位置
    const { clientX, clientY } = e
    const { top, left } = canvas.getBoundingClientRect();
    const [canvasX, canvasY] = [clientX - left, clientY - top]

    // 第二步：求canvas中的坐标值对应的webgl的坐标值
    // 1、处理原点，以canvas的中间位置(canvas.width/2,canvas.height/2)作为webgl的原点(0,0)，求出鼠标当前位置在canvas系统中相对于webgl中的位置
    const canvasOffsetX = canvasX - canvas.width / 2
    const canvasOffsetY = canvasY - canvas.height / 2

    // 2、将canvas系统中的坐标值转换成webgl中的值
    const canvas2WebglX = canvasOffsetX / (canvas.width / 2)
    const canvas2WebglY = canvasOffsetY / (canvas.height / 2)

    // 3、处理y轴，canvas的y向下，webgl的y轴向上
    const canvas2WebglY2 = -canvas2WebglY;

    // canvas2WebglX 即为鼠标点在webgl中的x，canvas2WebglY2 即为鼠标点在webgl中的y
})