onKeyUp

В Paper.js событие onKeyUp используется для отслеживания момента отпускания клавиши на клавиатуре. Оно является частью системы событий документа (PaperScope) и позволяет управлять интерактивным поведением объектов на холсте в ответ на пользовательский ввод.

Подключение и базовая структура

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

var tool = new Tool();

tool.onKe yUp = function(event) {
    console.log('Отпущена клавиша:', event.key);
};
  • event.key – строка, содержащая значение отпущенной клавиши.
  • event.character – символ, который соответствует нажатой клавише (с учётом регистра).
  • event.modifiers – объект с булевыми свойствами shift, control, alt, meta, отражающими состояние модификаторов.

Отличия от onKeyDown

  • onKeyDown срабатывает в момент нажатия клавиши.
  • onKeyUp срабатывает после отпускания клавиши.
  • Использование onKeyUp позволяет точно отслеживать завершение действия пользователя и предотвращает многократные срабатывания при удержании клавиши.

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

  1. Перемещение объекта после отпускания клавиши
var circle = new Path.Circle({
    center: [100, 100],
    radius: 30,
    fillColor: 'red'
});

var step = 10;

tool.onKe yUp = function(event) {
    switch(event.key) {
        case 'up':
            circle.position.y -= step;
            break;
        case 'down':
            circle.position.y += step;
            break;
        case 'left':
            circle.position.x -= step;
            break;
        case 'right':
            circle.position.x += step;
            break;
    }
};
  1. Создание нового объекта при отпускании клавиши
tool.onKe yUp = function(event) {
    if(event.character === 'c') {
        var rect = new Path.Rectangle({
            point: [Math.random() * view.size.width, Math.random() * view.size.height],
            size: [50, 50],
            fillColor: 'blue'
        });
    }
};
  1. Комбинирование с модификаторами
tool.onKe yUp = function(event) {
    if(event.modifiers.shift && event.key === 'a') {
        console.log('Shift + A отпущены');
    }
};

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

  • Для управления объектами на холсте лучше использовать сочетание onKeyDown и onKeyUp, чтобы разделять момент начала действия и его завершения.
  • Проверка модификаторов позволяет создавать сложные сочетания клавиш, например, Ctrl + Z для отмены действия.
  • В интерактивных приложениях onKeyUp полезен для завершения анимаций, изменения состояния объектов и запуска функций после завершения ввода.

Ограничения и особенности

  • Событие onKeyUp не срабатывает при удержании клавиши. Для повторяющихся действий используется onKeyDown.
  • Символы event.character зависят от раскладки клавиатуры. Для универсальной обработки лучше использовать event.key.
  • В Paper.js onKeyUp применяется только при активном инструменте (Tool) или глобальном скопе (paper.project).

Примеры комплексного использования

var tool = new Tool();
var path;

tool.onKeyD own = function(event) {
    if(event.key === 'p') {
        path = new Path();
        path.strokeColor = 'green';
    }
};

tool.onKe yUp = function(event) {
    if(event.key === 'p' && path) {
        path.simplify();
        path = null;
        console.log('Путь завершён');
    }
};

В этом примере клавиша p запускает рисование пути при нажатии и завершает его при отпускании, одновременно упрощая кривую методом simplify().

Советы по производительности

  • Не рекомендуется выполнять тяжёлые вычисления в обработчике onKeyUp. Событие должно использоваться для управления состояниями или запуска коротких функций.
  • Для крупных проектов можно централизованно обрабатывать события клавиатуры, используя один инструмент и делегируя действия через карту key → функция.

Выводы по работе с onKeyUp

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

Оглавление