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

Question

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

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

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

Answer 1

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

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

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

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

Answer 2

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

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