时间:2021-05-18
遇到的问题:
Question
①:mousemove事件中,移动方法中会被记录很多的left和top,我只需要大概的几组数据就行,不需要那么多;
Question
②:回放的时候,在for循环里执行太快了,导致的效果就是直接看到开始跟结束位置,我想放慢中间的过程;搞了一个延迟的函数,但是还是没有实质性解决。
慢慢慢慢拖动小方块到一个新位置,然后松开鼠标,
先点击“复位”,再点击“回放”查看所经过的路径,
只有一次机会哦 - -|||
循环内延迟的部分代码:
复制代码 代码如下:
//延迟方法
sleep: function(n) {
var start = new Date().getTime();
while (true)
if (new Date().getTime() - start > n)
break;
},
//回看轨迹记录
backTrack: function() {
var oSlippage = document.getElementById("slippage");
var len = this.X.length;
for (var i = 0; i < len; i++) {
oSlippage.style.left = this.X[i] - this.relativeX;
oSlippage.style.top = this.Y[i] - this.relativeY;
//延迟循环方法
this.sleep(10);
}
}
还是没有达到慢慢回放的效果,待解决。。。
啊哈,今早解决了~!
不用for循环,通过定时器运用数组的下标来不断改变小方块的left和top
定时器结合数组下标
复制代码 代码如下:
//延迟方法
sleep: function(n) {
//var start = new Date().getTime();
//while (true)
// if (new Date().getTime() - start > n)
// break;
var oSlippage = document.getElementById("slippage");
oSlippage.style.left = this.X[this.iNum] - this.relativeX; //iNum为数组下标
oSlippage.style.top = this.Y[this.iNum] - this.relativeY;
MOUSETRACKRECORD.iNum++;
//如果下标大于了他的长度就停止回放
if (this.iNum > this.X.length - 1) {
clearInterval(this.timeID);
}
},
//回看轨迹记录
backTrack: function() {
//var oSlippage = document.getElementById("slippage");
//var len = this.X.length;
//for (var i = 0; i < len; i++) {
// oSlippage.style.left = this.X[i] - this.relativeX;
// oSlippage.style.top = this.Y[i] - this.relativeY;
// //延迟循环方法
// this.sleep(10);
//}
this.timeID = setInterval("MOUSETRACKRECORD.sleep()", 10);
}
演示效果:
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文通过json机构,HTML代码以及JS代码详细给大家分析了canvas轨迹回放功能实现的过程,以下是全部内容。json结构[{"path":[{"x":82
前言实现轨迹回放,GMap.NET有对应的类GMapRoute。这个类函数很少,功能有限,只能实现简单的轨迹回放。要实现更复杂的轨迹回放,就需要自己动手了。本文
在鼠标的使用过程中,如何显示或者隐藏鼠标在移动的过程中的移动轨迹。以下将介绍如何进行操作来显示或隐藏鼠标的轨迹。1、在介绍之前,打开电脑。然后单击电脑左下角的开
轨迹球,这个球在鼠标上,原先的鼠标的光标是随着手掌的带着它移动,光标才会移动。而新一带的轨迹球鼠标是手指转动这个球,从而带到光标的移动。这样就不用手臂移动,
在微信小程序实现轨迹回放的效果1、wxml开始暂停结束2、js//index.js//获取应用实例constapp=getApp()Page({data:{St