onMouseDown

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

Синтаксис и подключение

Для использования события onMouseDown необходимо определить его в контексте объекта Paper.js:

tool.onMouseD own = function(event) {
    // действия при нажатии кнопки мыши
};

Пояснения:

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

Создание нового инструмента:

var tool = new Tool();

Каждое событие мыши в Paper.js передаёт объект MouseEvent, содержащий следующие свойства:

event.point – координаты точки на холсте, где произошло нажатие, представленная объектом Point.
event.count – количество последовательных кликов (например, двойной клик будет 2).
event.event – нативный объект события DOM, предоставляющий доступ к дополнительным свойствам, таким как button или ctrlKey.

Простое использование

Простейший пример — создание круга в месте нажатия:

tool.onMouseD own = function(event) {
    var circle = new Path.Circle({
        center: event.point,
        radius: 20,
        fillColor: 'red'
    });
};

В этом примере каждый клик мыши создаёт красный круг радиусом 20 пикселей в точке клика. Это демонстрирует основную работу onMouseDown с координатами и динамическое создание объектов.

Работа с модификаторами клавиш

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

tool.onMouseD own = function(event) {
    if (event.event.shiftKey) {
        var rect = new Path.Rectangle({
            point: [event.point.x - 15, event.point.y - 15],
            size: [30, 30],
            fillColor: 'blue'
        });
    } else {
        var circle = new Path.Circle({
            center: event.point,
            radius: 15,
            fillColor: 'green'
        });
    }
};

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

Использование с drag-эффектами

Событие onMouseDown часто комбинируется с onMouseDrag и onMouseUp для реализации интерактивного перемещения объектов:

var selectedItem;

tool.onMouseD own = function(event) {
    selectedItem = project.hitTest(event.point);
};

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

tool.onMous eUp = function(event) {
    selectedItem = null;
};

В этом примере:

project.hitTest(point) проверяет, есть ли объект под курсором.
При удержании и перетаскивании (onMouseDrag) объект перемещается на величину event.delta.
После отпускания кнопки (onMouseUp) переменная selectedItem сбрасывается.

Особенности работы с разными кнопками мыши

MouseEvent содержит свойство event.button для определения, какая кнопка мыши была нажата:

0 — левая кнопка
1 — средняя кнопка (колёсико)
2 — правая кнопка

Пример с различной реакцией на кнопки:

tool.onMouseD own = function(event) {
    switch(event.event.button) {
        case 0:
            console.log('Левая кнопка');
            break;
        case 1:
            console.log('Средняя кнопка');
            break;
        case 2:
            console.log('Правая кнопка');
            break;
    }
};

Комбинирование с визуальными эффектами

Событие onMouseDown идеально подходит для генерации динамических эффектов. Например, создание анимированного взрыва частиц:

tool.onMouseD own = function(event) {
    for (var i = 0; i < 10; i++) {
        var particle = new Path.Circle({
            center: event.point,
            radius: Math.random() * 5 + 2,
            fillColor: new Color(Math.random(), Math.random(), Math.random())
        });

        particle.tween(
            { scaling: 0, opacity: 0 },
            500,
            'easeOutCubic'
        );
    }
};

Каждый клик создаёт несколько разноцветных частиц, которые постепенно исчезают, демонстрируя работу onMouseDown в связке с анимацией.