Wie zeichne Mausbewegung auf einer Leinwand?

Question

Ich habe eine Reihe von Tupeln in Javascript. Gibt es eine vorhandene Bibliothek, mit der ich die vom Benutzer ausgeführten Mausbewegungen anzeigen kann?

Idealerweise etwas, mit dem ich die erfassten Daten von Anfang bis Ende wiedergeben kann. Es würde wie ein Videoplayer aussehen (dh spielen, pausieren, Wiedergabegeschwindigkeit anpassen), aber statt eines Videos würden Sie sehen, wie sich der Mauszeiger bewegte. Diese Visualisierung würde sich auf HTML5-Canvas befinden (dh ein Quadrat aus weißen Pixeln, das den Cursor darstellt, der sich in einem schwarzen HTML-Canvas bewegt).

Answer 1

Einfach genug, um ohne eine Bibliothek zu erreichen.

• Hören für mousemove- Ereignisse
• On mousemove- Stellen, für jede Position des Mauszeigers zu einem Punktearray
• Wenn die angeforderte, führen eine requestAnimationFrame Schleife, die jeden Punkt aus den Punkten Array neu zeichnet.

Beispielcode und eine Demo:

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>

Answer 2

Ich kenne keine Bibliotheken, die das tun, was Sie beschrieben haben, aber ein Array der Positionen erstellen und dann sollte das ungefähr tun, was Sie wollen.

//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}); 
} 

Jetzt können Sie das Array durchlaufen, um Ihre Mausbewegung zu erhalten.

Sie können eine Verzögerung Ihrer Dauer hinzufügen, um mit der gewünschten Geschwindigkeit zu spielen.