¿Hay alguna forma de acelerar el evento mousemove?

Question

escribí un pequeño script de dibujo (lienzo) de este sitio web: http://scri.ch/

Al hacer clic en el documento, cada mousemove evento básicamente ejecuta el siguiente:
- Obtener coordenadas.
- context.lineTo() entre este punto y el anterior
- context.stroke() la línea

Como se puede ver, si se mueve el cursor muy rápido, el evento es lo suficientemente No activa (dependiendo de la CPU/Navegador/etc .), y se traza una línea recta.

En pseudocódigo:

window.addEventListener('mousemove', function(e){ 
    myContext.lineTo(e.pageX, e.pageY); 
    myContext.stroke(); 
}, false); 

Este es un problema conocido, y la solución está muy bien, pero me gustaría que optimizar.

Por lo tanto, en lugar de stroke() cada vez que se activa un evento de mousemove, pongo las nuevas coordenadas dentro de una cola de matriz, y regularmente la dibujan/vacian con un temporizador.

En pseudocódigo:

var coordsQueue = []; 

window.addEventListener('mousemove', function(e){ 
    coordsQueue.push([e.pageX, e.pageY]); 
}, false); 

function drawLoop(){ 
    window.setTimeout(function(){ 
    var coords; 
    while (coords = coordsQueue.shift()) { 
     myContext.lineTo(coords[0], coords[1]); 
    } 
    myContext.stroke(); 
    drawLoop(); 
    }, 1000); // For testing purposes 
} 

Pero no mejoró la línea. Así que traté de solo dibujar un punto en mousemove. Mismo resultado: demasiado espacio entre los puntos.

Me di cuenta de que el primer bloque de código es lo suficientemente eficiente, es solo el evento mousemove el que se dispara demasiado despacio.

Entonces, después de haber dedicado un tiempo a implementar una optimización inútil, es su turno: ¿hay alguna forma de optimizar la velocidad de disparo de mousemove en los scripts de DOM?

¿Es posible "solicitar" la posición del mouse en cualquier momento?

¡Gracias por sus consejos!

Answer 1

Si desea aumentar la frecuencia de los informes, me temo que no tiene suerte. Los ratones sólo se informan de su posición en el sistema operativo n veces por segundo, y creo que n es por lo general inferior a 100. (Si alguien puede confirmar esto con las especificaciones vigentes, agrega a ellos!)

Así para obtener una línea suave, tendrás que idear algún tipo de esquema de interpolación. Hay mucha literatura sobre el tema; Recomiendo monotone cubic interpolation porque es local, fácil de implementar y muy estable (sin sobreimpulso).

Luego, una vez que haya calculado la spline, puede aproximarla con segmentos de línea lo suficientemente cortos para que se vea suave, o puede ir completamente y escribir su propio algoritmo Bresenham para dibujarla.

Si todo esto vale la pena por una simple aplicación de dibujo ... eso es para que usted decida, por supuesto.

Answer 2

Sitio genial, desafortunadamente no hay forma de solicitar la posición actual del mouse con JavaScript, los únicos ganchos que tienes son los eventos que ya estás usando.Si debe tener más control lo vería usando flash, donde puede cambiar la velocidad de cuadros y solicitar la posición del mouse.

trace("Mouse X: " + _xmouse); 
trace("Mouse Y: " + _ymouse);