如何在画布上重新绘制鼠标移动
How to redraw mouse movement on a canvas?
我有一个javascript中的元组数组。是否有一个现有的库可以让我查看用户执行的鼠标移动?
理想情况下,它可以让我从头到尾回放捕获的数据。它看起来像一个视频播放器(即播放、暂停、调整回放速度),但你会看到鼠标光标是如何移动的,而不是视频。这种可视化将在HTML5画布上(即,一个白色像素的正方形表示在黑色HTML画布中移动的光标)。
无需库即可完成。
- 监听mousemove事件
- 在mousemove中,将每个鼠标位置添加到点阵列中
- 当请求时,运行
requestAnimationFrame
循环,重新绘制点阵列中的每个点
示例代码和演示:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
var BB=canvas.getBoundingClientRect();
offsetX=BB.left;
offsetY=BB.top;
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }
var isDown=false;
var points=[];
var nextTime=0;
var nextN=0;
var duration=1000/60;
ctx.lineCap='round';
$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#canvas").mouseup(function(e){handleMouseUpOut(e);});
$("#canvas").mouseout(function(e){handleMouseUpOut(e);});
$('#fast').on('click',function(){ duration=1000/60; beginRedrawing(); });
$('#slow').on('click',function(){ duration=1000/15; beginRedrawing(); });
function beginRedrawing(){
if(points.length<2){return;}
nextN=1;
ctx.lineWidth=3;
ctx.strokeStyle=randomColor();
requestAnimationFrame(redraw);
}
function handleMouseDown(e){
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
// get current mouse position
ctx.lineWidth=7;
ctx.strokeStyle='black';
points.length=0;
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
points.push({x:mouseX,y:mouseY});
// Set dragging flag
isDown=true;
}
function handleMouseUpOut(e){
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
// get current mouse position
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// Clear dragging flag
isDown=false;
}
function handleMouseMove(e){
if(!isDown){return;}
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
// get current mouse position
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
points.push({x:mouseX,y:mouseY});
var n=points.length-1;
lineSegment(points[n-1],points[n]);
}
function lineSegment(p0,p1){
ctx.beginPath();
ctx.moveTo(p0.x,p0.y);
ctx.lineTo(p1.x,p1.y);
ctx.stroke();
}
function redraw(time){
if(nextN>points.length-1){return;}
if(time<nextTime){requestAnimationFrame(redraw);return;}
nextTime=time+duration;
lineSegment(points[nextN-1],points[nextN]);
nextN++;
requestAnimationFrame(redraw);
}
function randomColor(){
return('#'+Math.floor(Math.random()*16777215).toString(16));
}
body{ background-color: ivory; }
#canvas{border:1px solid red; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Drag to create polyline then click a redraw button below.</h4>
<button id=fast>Fast Redraw</button>
<button id=slow>Slow Redraw</button>
<br>
<canvas id="canvas" width=512 height=512></canvas>
我不知道有什么库可以做您所描述的,但创建一个位置数组并使用它应该可以大致做您想要的事情。
//Capture all mouse movements on the browser window.
document.onmousemove = mousePos;
//Store all previous mouse locations
var ary = [];
function mousePos (e) {
//Log the current mouse position
ary.push({X: e.pageX, Y: e.pageY});
}
现在,您可以在数组中循环以获取鼠标移动。
function replay() {
for (var i = 0; i < ary.length; i++) {
//Draw a point wherever the mouse moved.
ctx.fillRect(ary[i].X, ary[i].Y, 2, 2);
}
}
您可以添加持续时间的延迟,以任意速度播放。
相关文章:
- 在 d3.js 中绘制滚动/移动平均线
- 如何摆脱角色移动时绘制的图像痕迹
- 在HTML5画布上绘制/移动/删除笔划
- 在HTML5画布中绘制鼠标移动的半透明线条
- 在画布上绘制移动
- 在鼠标移动时绘制一个矩形,并使用 kineticjs 在鼠标向上选择该矩形内的所有形状
- 如何重新绘制背景,使其看起来像我的“播放器”在html5-canvas中移动
- 使用拉斐尔用滚动条绘制不移动的东西
- 由谷歌地图绘制的矩形 绘图管理器不会触发鼠标移动事件
- 传单.js绘制控件不能在整个地图窗口区域上移动
- 高库存:移动渲染器元素和导航器/绘制趋势线
- Javascript画布绘制-大量移动时像素化
- 使用阶梯将绘制的形状移动到新的Y
- 可以'不要在移动浏览器上用手指绘制画布
- 在鼠标移动时绘制圆形后,保存并恢复画布矩形
- 如何移动绘制在圆周长上的X、Y坐标的起点
- 在画布上使用JavaScript绘制鼠标移动的透明图像
- 使用sketch.js为移动网页绘制画布会重置到这样
- 按下键时画布绘制移动
- 绘制移动线的最佳方法JavaScript