原生WebGL如何使用鼠标拖拽画布?

Azraias
  • 19

webgl.gif

如图,我在实现鼠标拖拽画布这个功能时拖拽动作非常不平滑,请问有没有更好的方式用原生WebGL来实现鼠标拖拽画布功能?

拖拽部分代码:

gl.canvas.onmousedown = function (ed) {
        //鼠标点击时鼠标距离浏览器左边的距离
        const rect1 = ed.target.getBoundingClientRect();
        let {ma, mb} = canvasToWebGL({x: ed.clientX, y: ed.clientY}, {top: rect1.top, left: rect1.left}, gl);
        // let ma = ed.clientX,mb = ed.clientY;

        gl.canvas.onmousemove = function (em) {
            gl.canvas.style.cursor = 'grabbing'
            const rect2 = em.target.getBoundingClientRect();
            let {x, y} = canvasToWebGL({x: em.clientX, y: em.clientY}, {top: rect2.top, left: rect2.left}, gl);
            //canvas元素左边距离浏览器屏幕左边的距离
            // let x = em.clientX, y = em.clientY;

            if (ma - x > 0) {
                gl.offsetX -= gl.tran_step
            } else {
                gl.offsetX += gl.tran_step
            }
            if (mb - y > 0) {
                gl.offsetY -= gl.tran_step
            } else {
                gl.offsetY += gl.tran_step
            }
            // gl.translation_matrix = translation(x-ma,y-mb,0)
            // console.log(gl.translation_matrix)
            draw(gl);
            ma = x;
            mb = y;
        }

        gl.canvas.onmouseup = function () {
            gl.canvas.style.cursor = 'default'
            gl.canvas.onmousemove = null;
            gl.canvas.onmouseup = null;
        }
    }
回复
阅读 841
2 个回答
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏