onMouseMove

Событие onMouseMove в Paper.js предназначено для отслеживания перемещения курсора мыши над canvas. Оно вызывается каждый раз, когда мышь перемещается, независимо от того, нажата ли кнопка. Это ключевой инструмент для создания интерактивных интерфейсов, динамической графики и анимации, реагирующих на движения мыши.

Основной синтаксис

function onMouseMove(event) {
    console.log(event.point);
}
  • event — объект события, предоставляющий информацию о движении мыши.
  • event.point — объект Point, представляющий текущую позицию мыши на canvas.
  • event.delta — объект Point, показывающий смещение мыши с предыдущего события.
  • event.count — количество последовательных событий движения мыши.

Пример: Отслеживание позиции мыши

var circle = new Path.Circle({
    center: [50, 50],
    radius: 20,
    fillColor: 'red'
});

function onMouseMove(event) {
    circle.position = event.point;
}

В этом примере круг следует за курсором. Ключевой момент: event.point автоматически учитывает координаты относительно canvas, поэтому не требуется дополнительная конвертация.

Использование event.delta для динамики

event.delta позволяет получать вектор движения мыши между событиями. Это особенно полезно для анимаций, имитирующих физику или плавные смещения объектов.

var path = new Path();
path.strokeColor = 'blue';
path.strokeWidth = 2;

function onMouseMove(event) {
    path.add(event.point);
    if (path.segments.length > 50) {
        path.removeSegment(0);
    }
}

Здесь создается след мыши, который постепенно «стирается», обеспечивая эффект движения. event.delta можно использовать для управления скоростью изменения цвета, размера или направления объектов в зависимости от скорости движения курсора.

Ограничение области действия мыши

Иногда требуется реагировать только на движения мыши в определенной области. Для этого проверяют координаты события:

function onMouseMove(event) {
    if (event.point.x > 100 && event.point.x < 400 &&
        event.point.y > 50 && event.point.y < 300) {
        console.log('Мышь внутри зоны');
    }
}

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

Взаимодействие с другими событиями

onMouseMove часто используется вместе с:

  • onMouseDown — для начала действия при нажатии мыши.
  • onMouseDrag — для перемещения объектов по траектории мыши с зажатой кнопкой.
  • onMouseUp — для завершения действия.

Пример комбинированного использования:

var path;

function onMouseDown(event) {
    path = new Path();
    path.strokeColor = 'green';
}

function onMouseMove(event) {
    if (path) {
        path.add(event.point);
    }
}

function onMouseUp(event) {
    path.simplify();
}

Здесь создается линия, которая рисуется при движении мыши после нажатия кнопки. При отпускании кнопки линия упрощается.

Производительность и оптимизация

  • Ограничение количества операций в обработчике onMouseMove критично при работе с большим количеством объектов.
  • Использование requestAnimationFrame для обновления визуальных изменений вместо прямого изменения объектов в каждом событии позволяет снизить нагрузку.
  • Применение методов .simplify() или .smooth() уменьшает количество сегментов кривых и оптимизирует рендеринг.

Применение onMouseMove в интерактивной графике

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

Заключение по работе с onMouseMove

onMouseMove — это событие, позволяющее создавать реактивные и динамичные интерфейсы. Основные аспекты работы с ним:

  1. Получение позиции курсора через event.point.
  2. Использование event.delta для определения направления и скорости движения.
  3. Ограничение зоны активности через проверку координат.
  4. Комбинирование с другими событиями мыши для сложной интерактивности.
  5. Оптимизация производительности при работе с большим количеством объектов или частыми событиями.

Правильное использование onMouseMove делает интерактивную графику плавной, отзывчивой и эффективной.

Оглавление