Какой самый эффективный способ обработки данных о движении мыши в JavaScript?

Question

Я пытаюсь точно указать, куда движется мышь на веб-странице (в пиксель).У меня есть следующий код, но в полученных данных есть пробелы.

var mouse = new Array();
$("html").mousemove(function(e){
    mouse.push(e.pageX + "," + e.pageY);
});

Но, когда я смотрю на записанные данные, это пример того, что я вижу.

76,2 //start x,y
78,5 //moved right two pixels, down three pixels
78,8 //moved down three pixels

Желательно, чтобы это выглядело следующим образом:

76,2 //start x,y
77,3 //missing
78,4 //missing
78,5 //moved right two pixels, down three pixels
78,6 //missing
78,7 //missing
78,8 //moved down three pixels

Есть ли лучший способ хранить данные о движении мыши за пикселем?Мои цели слишком нереалистичны для веб-страницы?

Answer 1

Вы можете сохранить эту информацию только так быстро, как она была предоставлена ​​вам. События mousemove запускаются со скоростью, определяемой браузером, обычно с частотой 60 Гц. Поскольку вы, безусловно, можете перемещать указатель быстрее, чем на 60 пикселей в секунду, вы не сможете заполнить пробелы, если не выполните какую-либо интерполяцию.

Это звучит как хорошая идея, представьте себе стычку (и снижение производительности) одновременного запуска событий 1920 mousemove, когда вы перемещаете мышь на другую сторону экрана - и я даже не думаю, сама мышь опрашивает достаточно быстро, игровые мыши не идут дальше 1000 Гц.

Смотрите тест частоты кадров здесь: http://jsbin.com/ucevar/

Об интерполяции см. этот вопрос , в котором реализован алгоритм линии Брезенхема , который можно использовать для поиска пропущенных точек. Это сложная проблема, приложение PenUltimate для iPad реализует удивительную интерполяцию, благодаря которой штриховые рисунки выглядят совершенно естественно и плавно, но в Интернете ничего об этом нет.

Что касается хранения данных, просто нажмите массив [x,y] вместо строки. Функция медленного обработчика событий также замедляет частоту обновления, так как события будут отбрасываться, если их оставить.

Answer 2

Мышь не существует на каждом пикселе, когда вы ее перемещаете. Во время цикла обновления он фактически плавно переходит от точки к точке, поэтому на первый взгляд он выглядит так, будто попадает в каждую точку между ними, хотя на самом деле он просто прыгает вокруг волей-неволей.

Я бы порекомендовал просто хранить точки, где было зарегистрировано событие перемещения мыши. Каждый интервал между двумя точками создает линию, которая может использоваться для любых целей.

_{А что касается эффективности обработки ...}

Эффективность обработки будет зависеть от ряда факторов. Какой браузер используется, сколько памяти у компьютера, насколько хорошо оптимизирован код для структуры данных и т. Д.

Вместо того, чтобы преждевременно оптимизировать, напишите программу, а затем сравните медленные части, чтобы определить узкие места.

1. Я бы, вероятно, создал пользовательский объект Point с набором функций в прототипе и посмотрел бы, как он выполняет
2. если это слишком сильно затормозит, я бы переключился на использование объектных литералов с установленными x и y.
3. Если , что замедлится, я бы переключился на использование двух массивов, одного для x и одного для y и всегда устанавливал значения x и y вместе.
4. Если что застрянет, я бы попробовал что-то новое.
5. Перейти к 4

Answer 3

Есть ли лучший способ хранить данные о движении мыши за пикселем?

Каковы ваши критерии для «лучше»?

Мои цели слишком нереалистичны для веб-страницы?

Если ваша цель - сохранить новую точку каждый раз, когда курсор вводит новый пиксель, да. Также обратите внимание, что пиксели браузера не обязательно отображают 1: 1 на пиксели экрана, особенно в случае ЭЛТ-мониторов, где они почти наверняка этого не делают.