Модификаторы клавиш

Paper.js предоставляет мощный механизм для работы с событиями клавиатуры, включая модификаторы клавиш — Shift, Ctrl (Cmd на Mac) и Alt. Модификаторы часто используются для расширения функциональности интерактивных инструментов, например, изменения поведения при рисовании или перемещении объектов.

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

События клавиатуры в Paper.js доступны через обработчики onKeyDown и onKeyUp. Каждый объект события содержит несколько ключевых свойств:

  • event.key — строка, представляющая нажатую клавишу ('a', 'Enter', 'ArrowUp' и т.д.).

  • event.character — символ, соответствующий клавише (с учетом регистра и текущей раскладки).

  • event.modifiers — объект, описывающий активные модификаторы:

    {
    shift: true/false,
    control: true/false,
    meta: true/false,   // Cmd на macOS
    alt: true/false
}

  • event.isShift, event.isControl, event.isMeta, event.isAlt — булевы свойства для быстрой проверки состояния модификаторов.

Проверка состояния модификаторов

Наиболее часто встречается ситуация, когда нужно изменить поведение инструмента при удержании Shift или Ctrl:

function onKeyDown(event) {
    if (event.shift) {
        console.log('Shift удерживается');
    }
    if (event.control) {
        console.log('Ctrl удерживается');
    }
    if (event.alt) {
        console.log('Alt удерживается');
    }
    if (event.meta) {
        console.log('Cmd удерживается (Mac)');
    }
}

Аналогично можно использовать короткие булевы свойства:

if (event.isShift) {
    // логика для Shift
}

Комбинированные модификаторы

Paper.js позволяет отслеживать комбинации модификаторов. Например, комбинация Ctrl+Shift:

function onKeyDown(event) {
    if (event.control && event.shift) {
        console.log('Комбинация Ctrl+Shift нажата');
    }
}

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

Использование модификаторов в инструментах

Инструменты Paper.js (Tool) поддерживают события клавиатуры и мыши. Модификаторы часто применяются для изменения поведения инструмента:

var tool = new Tool();

tool.onMouseD rag = function(event) {
    if (event.modifiers.shift) {
        // ограничиваем движение по горизонтали
        event.delta.y = 0;
    }
    if (event.modifiers.control) {
        // ограничиваем движение по вертикали
        event.delta.x = 0;
    }
    var path = new Path.Line({
        from: event.downPoint,
        to: event.point,
        strokeColor: 'black'
    });
};

Здесь используется объект event.modifiers, который содержит актуальное состояние всех модификаторов на момент события мыши.

Модификаторы и выделение объектов

При работе с объектами Paper.js модификаторы часто помогают реализовать множественный выбор и перемещение:

var selectedItems = [];

tool.onMouseD own = function(event) {
    var hitResult = project.hitTest(event.point, { fill: true, stroke: true });
    if (!hitResult) return;

    if (event.modifiers.shift) {
        // добавляем к текущему выделению
        selectedItems.push(hitResult.item);
        hitResult.item.selected = true;
    } else {
        // стандартное выделение (снятие с других объектов)
        selectedItems.forEach(item => item.selected = false);
        selectedItems = [hitResult.item];
        hitResult.item.selected = true;
    }
};

Shift позволяет добавлять объекты к текущему выделению, а отсутствие модификатора — заменяет выделение.

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

  1. Всегда проверять состояние модификаторов через event.modifiers, это более надежно и совместимо с разными платформами.
  2. Использовать meta вместо control на macOS, если требуется учитывать Cmd.
  3. Объединять модификаторы для сложной логики: Shift+Alt, Ctrl+Shift и т.д.
  4. При работе с инструментами комбинировать мышь и клавиатуру, чтобы создавать гибкие и интерактивные действия, например, ограничение направления или масштабирование объектов.

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

var tool = new Tool();
var path;

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

tool.onMouseD rag = function(event) {
    if (event.modifiers.shift) {
        // рисование строго горизонтальных или вертикальных линий
        var last = path.lastSegment.point;
        var delta = event.delta;
        if (Math.abs(delta.x) > Math.abs(delta.y)) {
            delta.y = 0;
        } else {
            delta.x = 0;
        }
        path.add(last.add(delta));
    } else {
        path.add(event.point);
    }
};

tool.onKeyD own = function(event) {
    if (event.key === 'z' && event.modifiers.control) {
        // Ctrl+Z — откат последнего сегмента
        path.removeSegment(path.segments.length - 1);
    }
};

В этом примере показано интерактивное рисование с ограничением направлений и поддержкой комбинаций клавиш, что иллюстрирует силу модификаторов в Paper.js.

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

Оглавление