onKeyDown

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

Создание инструмента для обработки клавиатуры

Для начала необходимо создать объект Tool, к которому будет привязано событие:

var tool = new Tool();

События клавиатуры в Paper.js привязываются к инструменту, а не к самому проекту или слою. Это позволяет иметь несколько инструментов с разными обработчиками, которые активируются в зависимости от текущего активного инструмента.

Синтаксис onKeyDown

tool.onKeyD own = function(event) {
    // Обработка нажатия клавиши
};
  • event.key – строка, содержащая символ нажатой клавиши (например, 'a', 'Enter', 'ArrowUp').
  • event.character – символ, который генерируется при обычных текстовых клавишах, учитывая раскладку и регистр.
  • event.modifiers – объект с логическими свойствами shift, control, alt, meta, указывающими, какие модификаторы были зажаты при нажатии клавиши.

Пример использования onKeyDown

var tool = new Tool();

tool.onKeyD own = function(event) {
    if (event.key === 'a') {
        console.log('Нажата клавиша "a"');
    } else if (event.key === 'space') {
        console.log('Нажата пробел');
    } else if (event.key === 'up') {
        console.log('Стрелка вверх');
    }
    
    if (event.modifiers.shift) {
        console.log('Shift зажат');
    }
};

В этом примере обработчик различает конкретные клавиши и учитывает наличие модификаторов.

Отличия key и character

  • event.key – всегда возвращает символ клавиши в стандартизированном виде ('a', 'enter', 'left', 'space'), независим от регистра.
  • event.character – возвращает именно символ, который был введён, с учётом раскладки и Shift ('A' для заглавной буквы).
tool.onKeyD own = function(event) {
    console.log('Key:', event.key);
    console.log('Character:', event.character);
};

Это различие важно при разработке текстовых инструментов или игровых механик.

Использование onKeyDown для управления объектами

Событие onKeyDown часто применяется для перемещения объектов, изменения их свойств или управления анимацией:

var circle = new Path.Circle(new Point(100, 100), 50);
circle.fillColor = 'blue';

var tool = new Tool();

tool.onKeyD own = function(event) {
    switch(event.key) {
        case 'up':
            circle.position.y -= 10;
            break;
        case 'down':
            circle.position.y += 10;
            break;
        case 'left':
            circle.position.x -= 10;
            break;
        case 'right':
            circle.position.x += 10;
            break;
    }
};

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

Обработка комбинаций клавиш

С помощью event.modifiers можно создавать комбинации клавиш:

tool.onKeyD own = function(event) {
    if (event.key === 'z' && event.modifiers.control) {
        console.log('Ctrl + Z: Отмена действия');
    }
    
    if (event.key === 's' && event.modifiers.control) {
        console.log('Ctrl + S: Сохранение проекта');
    }
};

Это позволяет реализовать привычные комбинации из приложений напрямую в Paper.js.

Советы по использованию

  • Событие onKeyDown работает только при активном инструменте. Если инструмент не активен, нажатия не будут регистрироваться.
  • Для обработки глобальных клавиш вне инструментов можно использовать DOM-события keydown в сочетании с Paper.js, но для интеграции с Paper.js удобнее именно Tool.onKeyDown.
  • Использование switch или if для ключей позволяет легко расширять обработку на дополнительные клавиши.

Связь с onKeyUp

Для полноценного управления клавиатурой рекомендуется использовать событие onKeyUp:

tool.onKe yUp = function(event) {
    console.log('Отпущена клавиша:', event.key);
};

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

Заключение по возможностям onKeyDown

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

onKeyDown — основной механизм Paper.js для интеграции клавиатурного ввода с визуальными объектами на холсте, обеспечивающий высокую гибкость и точный контроль над пользовательским взаимодействием.

Оглавление