MouseEvent и его свойства

MouseEvent в Paper.js представляет собой объект, который описывает события мыши на холсте (Canvas). Эти события включают нажатие кнопки мыши, перемещение курсора и отпускание кнопки. Работа с MouseEvent является ключевой для создания интерактивной графики, анимаций и пользовательских интерфейсов.

Основные типы событий мыши

Paper.js поддерживает несколько типов событий мыши, которые обрабатываются через объекты Tool:

  • onMouseDown – вызывается при нажатии кнопки мыши.
  • onMouseUp – вызывается при отпускании кнопки мыши.
  • onMouseDrag – вызывается при перемещении мыши с зажатой кнопкой.
  • onMouseMove – вызывается при перемещении мыши без зажатой кнопки.

Каждое из этих событий передаёт объект MouseEvent с набором полезных свойств для работы с позицией курсора, целевыми элементами и клавишами-модификаторами.

Основные свойства MouseEvent

  • point Объект типа Point, содержащий координаты курсора относительно холста в момент события.

    tool.onMouseD own = function(event) {
    console.log(event.point); // Point { x: 100, y: 150 }
};

  • lastPoint Последняя позиция курсора при предыдущем событии, актуально для onMouseDrag.

    tool.onMouseD rag = function(event) {
    console.log('Перемещение с', event.lastPoint, 'на', event.point);
};

  • delta Разница между текущей и предыдущей позицией курсора, используется для вычисления смещений при перетаскивании объектов.

    tool.onMouseD rag = function(event) {
    path.position += event.delta;
};

  • count Содержит количество последовательных кликов мыши. Позволяет различать одиночные и двойные клики.

    tool.onMouseD own = function(event) {
    if(event.count === 2) {
        console.log('Двойной клик');
    }
};

  • modifiers Объект, отображающий состояние клавиш-модификаторов (shift, ctrl, alt, meta) во время события.

    tool.onMouseD own = function(event) {
    if(event.modifiers.shift) {
        console.log('Shift нажат');
    }
};

  • event Ссылается на нативное событие JavaScript, что позволяет получить доступ к дополнительным свойствам, недоступным напрямую через Paper.js.

    tool.onMouseD own = function(event) {
    console.log(event.event.clientX, event.event.clientY);
};

Применение MouseEvent

Перетаскивание объектов

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

tool.onMouseD rag = function(event) {
    if(circle.contains(event.point)) {
        circle.position += event.delta;
    }
};

В этом примере delta позволяет перемещать круг по холсту, сохраняя точку захвата при начале перетаскивания.

Рисование линий и кривых

var path;

tool.onMouseD own = function(event) {
    path = new Path();
    path.strokeColor = 'black';
    path.add(event.point);
};

tool.onMouseD rag = function(event) {
    path.add(event.point);
};

tool.onMous eUp = function(event) {
    path.simplify();
};

Здесь point фиксирует координаты каждого положения мыши, формируя непрерывную кривую. Метод simplify() уменьшает количество точек, делая линию более гладкой.

Особенности и рекомендации

  • MouseEvent всегда привязан к конкретному Tool. Для работы с несколькими инструментами нужно создавать отдельные объекты Tool с собственными обработчиками событий.
  • Свойство delta всегда актуально только для событий onMouseDrag. Для других событий оно будет равно (0, 0).
  • Объект modifiers помогает создавать интерактивные реакции на сочетания клавиш с мышью, что удобно для сложных графических редакторов.
  • Использование count позволяет добавлять логику двойного или тройного клика без необходимости отслеживать таймеры вручную.

Взаимодействие с Item и Paper.js Scene

Объекты Paper.js (Item) могут проверять попадание курсора через метод contains, что делает обработку MouseEvent особенно удобной для редактирования графических элементов. При работе с несколькими слоями (Layer) события мыши обрабатываются в контексте текущего Tool, а не глобально для всего проекта.

Сочетание свойств point, delta, lastPoint, modifiers и count делает MouseEvent универсальным инструментом для реализации интерактивных интерфейсов, от простых перетаскиваний до сложных рисующих приложений.

Оглавление