Есть ли способ ускорить событие мыши? - PullRequest
Новая
       32

Есть ли способ ускорить событие мыши?

14 голосов
/ 16 марта 2011

Я написал небольшой скрипт для рисования (холст) для этого сайта: http://scri.ch/

Когда вы нажимаете на документ, каждое событие mousemove в основном выполняет следующее:
- Получение координат.
- context.lineTo() между этой точкой и предыдущей
- context.stroke() линия

Как видите, если вы перемещаете курсор очень быстро, событие не срабатывает достаточно (в зависимости отна вашем процессоре / браузере / и т. д.), и прямая линия трассируется.

В псевдокоде: 

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

Это известная проблема, и решение хорошо, но я бынравится оптимизировать это.

Поэтому вместо stroke() каждый раз, когда вызывается событие mousemove, я помещаю новые координаты в очередь массива и регулярно рисую / очищаю его с помощью таймера.

В псевдокоде: 

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
}

Но это не улучшило линию.Поэтому я попытался нарисовать только точку на mousemove.Тот же результат: слишком много места между точками.

Это заставило меня понять, что первый кодовый блок достаточно эффективен, это просто событие mousemove, которое срабатывает слишком медленно.

Итакпосле того, как я потратил некоторое время на реализацию бесполезной оптимизации, настала ваша очередь: есть ли способ оптимизировать скорость запуска mousemove в сценариях DOM?

Можно ли «запросить» положение мыши вв любое время?

Спасибо за советы!

Ответы [ 2 ]

21 голосов
/ 16 марта 2011

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

Итак, чтобы получить плавную линию, вам нужно придумать какую-то схему интерполяции. Есть много литературы на эту тему; Я рекомендую монотонную кубическую интерполяцию , потому что она локальная, простая в реализации и очень стабильная (без перерегулирования).

Затем, как только вы вычислили сплайн, вы можете аппроксимировать его отрезками линии, достаточно короткими, чтобы он выглядел гладко, или вы можете сделать все возможное и написать собственный Bresenham алгоритм для его рисования .

Если все это того стоит для простого графического приложения ... это, конечно, решать вам.

0 голосов
/ 02 апреля 2011

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

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