JavaScript实现擦玻璃效果分析鼠标移动响应时间粒度问题

目录

问题描述:

实现擦玻璃效果时,需要实现根据鼠标移动进行绘制路径。开始运用mousemove来实现绘制圆形时,发现鼠标移动速度过快时,绘制的圆形,不能连接一起,中间出现断点,无法形成一条完整的路径。

问题分析
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#content{
			width: 200px;
			height: 200px;
			border: 1px solid #ccc;
			background-color: blue;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<div id="content"></div>
	<script type="text/javascript">
		var box=document.getElementById("content");
		var isMouseDown=false;
		var t=0;
		box.addEventListener("mousemove",function(e){
			if(isMouseDown){
				console.log("move");	
				/*t++;
				console.log(t);*/
			}
		});
		box.addEventListener("mousedown",function(e){
			isMouseDown=true;
		});
		document.addEventListener("mouseup",function(e){
			isMouseDown=false;
		});
	</script>
</body>
</html>

鼠标移动过快时效果图:

鼠标移动缓慢时效果图:

经过如上代码分析,发现当鼠标移动过快时,console.log("move")执行的次数很少;当鼠标移动足够缓慢时,执行次数鼠标移动的像素数近似(这正好验证了,当每移动一个像素时,就会触发mousemove事件)。

**原因:**鼠标移动时,不会存储所有的移动信息,而是通过取插值的方法取得鼠标位置信息,否则,系统会被鼠标移动拖垮。所以就会出现,移动过快时,出现断点的问题。

解决方案:

绘制移动轨迹时,最常想到的方案就是通过每移动一个像素,就绘制一个圆,让所有圆连接在一起,正好形成轨迹。(下图中的圆,就是每移动一个像素,绘制出的圆,连接在一起就是一条轨迹路径)

理想是美好的,现实是残酷的。正如上面分析的那样,mousemove事件的响应时间粒度不够,鼠标移动过快时,不能做到移动一个像素,响应一次mousemove事件,所以无法通过移动一个像素就绘制一个圆,进而形成连续轨迹路径。如下图所示,移动过快时,路径会间断。

我们换种思路,第一次mousemove响应时,记录为起点startPoint,第二次响应记录为终点endPoint,将两点相连绘制直线,就不会出现中间断点的情况。 为了美观,可以利用lineCap属性,可以保证直线两端为圆角,如下所示:

ctx.beginPath();
ctx.lineCap="round";
ctx.moveTo(20,40);
ctx.lineTo(200,40);
ctx.stroke();

这样我们的问题就解决了 演示效果:

原文地址:https://juejin.cn/post/7153882870098952205
43人参与, 0条评论 登录后显示评论回复

你需要登录后才能评论 登录/ 注册