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

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

function onKeyDown(event) {
    console.log(event.key); // Выводит символ или имя клавиши
}

События клавиатуры подключаются глобально, и обработчики обычно задаются через функции с именем onKeyDown или onKeyUp. Paper.js автоматически передает объект KeyEvent в эти функции.

Свойства объекта KeyEvent

KeyEvent содержит набор свойств, которые позволяют точно определить характер нажатия клавиши:

  • event.key – строка, указывающая символ клавиши или её имя ('a', 'enter', 'space', 'shift' и др.).

  • event.character – символ, соответствующий нажатой клавише с учётом модификаторов (shift, capslock). Отличается от event.key, так как показывает именно отображаемый символ.

  • event.modifiers – объект с булевыми значениями, отражающий состояние клавиш-модификаторов:

    {
    shift: true/false,
    control: true/false,
    alt: true/false,
    meta: true/false
}

  • event.event – исходное DOM-событие KeyboardEvent, которое позволяет использовать свойства и методы нативного события.

  • event.type – тип события ('keydown' или 'keyup').

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

function onKeyDown(event) {
    if (event.key === 'space') {
        console.log('Пробел был нажат');
    }
    
    if (event.modifiers.shift) {
        console.log('Shift был зажат при нажатии клавиши', event.key);
    }
    
    console.log('Символ:', event.character);
}

В этом примере различаются имя клавиши (key) и отображаемый символ (character), что важно для обработки текстового ввода и управления действиями на холсте.

Основные методы и поведение

KeyEvent не имеет собственных методов изменения состояния клавиш, но через event.event можно использовать все стандартные методы DOM KeyboardEvent, например:

  • preventDefault() – предотвращает стандартное поведение браузера при нажатии клавиши.
  • stopPropagation() – останавливает дальнейшее распространение события в DOM.
function onKeyDown(event) {
    if (event.key === 'tab') {
        event.event.preventDefault(); // предотвращаем переход между элементами формы
    }
}

Использование модификаторов для сложных комбинаций

Модификаторы позволяют обрабатывать сочетания клавиш, что полезно для игровых проектов или интерактивных приложений:

function onKeyDown(event) {
    if (event.key === 'z' && event.modifiers.control) {
        console.log('Ctrl+Z — отмена действия');
    }
    
    if (event.key === 's' && event.modifiers.meta) {
        console.log('Cmd+S — сохранение проекта');
    }
}

Ключевым моментом является правильная проверка event.modifiers, так как разные платформы могут интерпретировать клавиши control и meta по-разному.

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

Свойство event.character удобно использовать для обработки текстового ввода:

let inputText = '';

function onKeyDown(event) {
    if (event.character && event.key.length === 1) {
        inputText += event.character;
    }
    
    if (event.key === 'backspace') {
        inputText = inputText.slice(0, -1);
    }
    
    console.log(inputText);
}

В этом примере обеспечивается корректная обработка ввода символов и удаление с помощью backspace, что невозможно реализовать только через event.key.

Практические рекомендации

  • Для игровой логики чаще используется event.key и проверка модификаторов.
  • Для текстового ввода стоит ориентироваться на event.character.
  • Всегда использовать preventDefault() для клавиш, которые могут запускать стандартные действия браузера (например, space, tab, стрелки).
  • Обработчики onKeyDown и onKeyUp должны быть короткими и быстрыми, чтобы не блокировать основной рендеринг Paper.js.

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

Оглавление