canvas 橡皮擦 解决滑动过快出现圆点问题

Posted 2022-12-26 Rand Tsui

先看第一段 js 代码 

canvas.addEventListener('touchmove', function (e) 
            ctx.beginPath();
            ctx.arc(e.targetTouches[0].clientX, e.targetTouches[0].clientY, 25, 0, 2 * Math.PI);
            ctx.fill();
);

</pre><p></p><pre>

很简单的代码 ，每次触发 touchmove 事件 画一个圆擦去canvas背景，但是如果手指滑动过快，获取的鼠标点间距就会太大，那么会出现间隔的圆，用户体验较差。

第二段 js 代码 ，解决这个问题，但是加了点算法，时间空间复杂度也大，换来好的用户体验

var flag = true;
    canvas.addEventListener('touchmove', function (e) 
        setTimeout(function () 
            if (flag)      //第一次触发 只记录p1点
                flag = false;
                p1 = new point(e.targetTouches[0].clientX, e.targetTouches[0].clientY);
                return;
            
            p2 = new point(e.targetTouches[0].clientX, e.targetTouches[0].clientY);  //后面n次触发 记录p2点
            k = (p2.y - p1.y) / (p2.x - p1.x);   // p1 p2直线斜率
            b = p1.y - k * p1.x;                 //y = kx + b 的 b
            var d = Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2)); //两点之间的距离
            var num = d * 0.2;   //两点之间要画多少个圆才能看起来像条平滑直线，0.2 是平均每像素的距离 画0.2个圆，100像素的距离画20个圆足够
            //注意 这里圆点半径为15 - 25像素适应
            var x = p1.x, y = p1.y;   //第一个圆的位置
            var n = (p2.x - p1.x) / num;//每个圆心之间的间距
            for (var i = 0; i < num; i++)    //依次在这条直线上画 num 个圆
                ctx.beginPath();
                ctx.arc(x, y, 25, 0, 2 * Math.PI);
                ctx.fill();
                x += n;
                y = k * x + b;
            
            p1 = p2;  //最后 将p2 赋给 p1
        , 1);
        
    );
    canvas.addEventListener('touchend', function (e)   //最后手指弹起重新开始
        flag = true;
    , 1);