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

Я написал небольшой рисунок script (canvas) для этого сайта: 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?

Возможно ли "запросить" позицию мыши в любое время?

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

Ответы

Ответ 1

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

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

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

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

Ответ 2

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

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