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

Question

如图，我在实现鼠标拖拽画布这个功能时拖拽动作非常不平滑，请问有没有更好的方式用原生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;
        }
    }

Answer 1

原生解决方案参考此页面 How to implement zoom from mouse in 2D WebGL

Answer 2

尝试下drag相关事件：

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。