onMouseUp

onMouseUp — это одна из ключевых событийных функций Paper.js, позволяющая реагировать на отпускание кнопки мыши после нажатия. Она является частью MouseEvent Handlers, вместе с onMouseDown, onMouseDrag и onMouseMove, и предоставляет возможность реализовывать интерактивное поведение в векторной графике.

Синтаксис и базовое использование

В Paper.js onMouseUp определяется как функция объекта Tool или глобально в скрипте проекта:

var tool = new Tool();

tool.onMous eUp = function(event) {
    console.log('Кнопка мыши отпущена в точке', event.point);
};

Параметр event — это объект MouseEvent, содержащий ключевые свойства:

  • event.point — объект Point, координаты места отпускания кнопки мыши на холсте.
  • event.event — оригинальный объект события DOM (MouseEvent), позволяющий использовать нативные свойства.
  • event.count — количество последовательных кликов, которое учитывает двойные и тройные клики.
  • event.modifiers — объект с булевыми флагами для клавиш-модификаторов (shift, ctrl, alt, meta).

Примеры практического применения

Рисование линий по клику

При комбинировании с onMouseDown можно реализовать простое рисование линий:

var path;

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

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

tool.onMous eUp = function(event) {
    path.add(event.point);
    path.smooth();
};

Здесь onMouseUp завершает линию и добавляет последнюю точку. Вызов path.smooth() делает линию более естественной.

Создание интерактивных объектов

onMouseUp часто используется для определения завершения взаимодействия с объектом, например, перемещения фигуры:

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

var draggedItem = null;

tool.onMouseD own = function(event) {
    if (circle.contains(event.point)) {
        draggedItem = circle;
    }
};

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

tool.onMous eUp = function(event) {
    if (draggedItem) {
        console.log('Фигура перемещена на', draggedItem.position);
        draggedItem = null;
    }
};

Здесь onMouseUp фиксирует момент окончания перетаскивания и сбрасывает переменную draggedItem, чтобы избежать дальнейшего смещения объекта.

Использование с инструментами (Tool)

Paper.js поддерживает несколько инструментов одновременно. Каждому инструменту можно назначить свой onMouseUp, что позволяет создавать разные режимы работы:

var drawTool = new Tool();
drawTool.onMous eUp = function(event) {
    console.log('Режим рисования: точка отпущена в', event.point);
};

var selectTool = new Tool();
selectTool.onMous eUp = function(event) {
    console.log('Режим выделения: клик на', event.point);
};

// Активный инструмент выбирается через select()
drawTool.activate();

Функция activate() переключает текущий инструмент, а onMouseUp срабатывает только для активного.

Совмещение с клавишами-модификаторами

Можно реализовать различное поведение в зависимости от нажатых клавиш:

tool.onMous eUp = function(event) {
    if (event.modifiers.shift) {
        console.log('Shift удерживается: особое действие на', event.point);
    } else {
        console.log('Обычный клик на', event.point);
    }
};

Свойство modifiers возвращает объект вида { shift: true, ctrl: false, alt: false, meta: false }.

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

  • onMouseUp срабатывает только после нажатия кнопки мыши на холсте, а не при отпускании вне canvas.
  • Для сложных интерфейсов рекомендуется использовать разделение логики по событиям: onMouseDown для начала действия, onMouseDrag для обновления состояния, onMouseUp для завершения.
  • События мыши в Paper.js являются высокоуровневыми и поддерживают удобную работу с координатами Paper.js, что избавляет от необходимости ручного пересчета координат относительно холста.

Заключение по использованию onMouseUp

Функция onMouseUp в Paper.js является универсальным инструментом для:

  • завершения интерактивных действий,
  • фиксации положения объектов,
  • обработки кликов с модификаторами,
  • создания многошаговых операций по взаимодействию с векторными элементами.

Её интеграция с Tool позволяет строить сложные, гибкие пользовательские интерфейсы, где отпускание мыши становится логической точкой завершения действия.

Оглавление