События клавиатуры

Библиотека SVG.js обеспечивает удобное взаимодействие с элементами SVG, включая обработку событий клавиатуры. В отличие от стандартного DOM, где события keydown, keyup и keypress привязываются к элементам <input> или document, в SVG.js события клавиатуры обычно отслеживаются через контейнер SVG или глобально через window/document. Это связано с тем, что SVG-элементы не получают фокус по умолчанию.

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

Для перехвата нажатий клавиш используется метод on:

import { SVG } from '@svgdotjs/svg.js';

const draw = SVG().addTo('body').size(600, 400);

document.addEventListener('keydown', function(event) {
    console.log(`Нажата клавиша: ${event.key}, код: ${event.code}`);
});

Ключевые моменты:

  • event.key возвращает символ клавиши, учитывая раскладку.
  • event.code указывает физическую клавишу на клавиатуре.
  • Для SVG-элементов событие необходимо «пробросить» через document, так как сами фигуры не получают фокус.

Реакция SVG-элементов на клавиатуру

Чтобы управлять объектами SVG с помощью клавиш, сначала нужно сохранить ссылки на объекты:

const rect = draw.rect(100, 100).fill('blue').move(50, 50);

document.addEventListener('keydown', function(event) {
    switch(event.key) {
        case 'ArrowUp':
            rect.dy(-10); // смещение по оси Y вверх
            break;
        case 'ArrowDown':
            rect.dy(10); // смещение вниз
            break;
        case 'ArrowLeft':
            rect.dx(-10); // смещение влево
            break;
        case 'ArrowRight':
            rect.dx(10); // смещение вправо
            break;
    }
});

Особенности:

  • Методы .dx() и .dy() позволяют изменять координаты без прямого обращения к x и y.
  • switch по event.key упрощает обработку нескольких клавиш.

Поддержка модификаторов

События клавиатуры поддерживают модификаторы Shift, Ctrl, Alt, Meta. Их можно использовать для расширенного управления объектами SVG:

document.addEventListener('keydown', function(event) {
    if(event.shiftKey && event.key === 'ArrowUp') {
        rect.dy(-50); // сильное смещение при Shift + стрелка
    } else if(event.ctrlKey && event.key === 'c') {
        console.log('Комбинация Ctrl+C сработала');
    }
});

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

Обработка повторного нажатия клавиш

Браузеры генерируют повторные keydown события, если клавиша удерживается. Чтобы контролировать скорость движения объектов SVG, можно использовать флаг:

let keyHeld = {};

document.addEventListener('keydown', function(event) {
    if(!keyHeld[event.key]) {
        keyHeld[event.key] = true;
        handleKey(event.key);
    }
});

document.addEventListener('keyup', function(event) {
    keyHeld[event.key] = false;
});

function handleKey(key) {
    switch(key) {
        case 'ArrowUp': rect.dy(-10); break;
        case 'ArrowDown': rect.dy(10); break;
        case 'ArrowLeft': rect.dx(-10); break;
        case 'ArrowRight': rect.dx(10); break;
    }
}

Преимущество: предотвращается чрезмерная скорость движения при удержании клавиши.

Интеграция с анимациями SVG.js

SVG.js позволяет комбинировать события клавиатуры с анимацией:

document.addEventListener('keydown', function(event) {
    if(event.key === 'ArrowRight') {
        rect.animate(300).dx(50).fill('green');
    }
});

Особенности:

  • Метод .animate(duration) создаёт плавное движение и изменения атрибутов.
  • Можно изменять сразу несколько свойств: положение, цвет, размер.
  • Взаимодействие с клавиатурой создаёт динамическое поведение графики.

Фокус и доступность

Чтобы SVG-элементы реагировали на события клавиатуры без глобальных обработчиков:

rect.attr({ tabindex: 0 }); // делает элемент фокусируемым
rect.node.addEventListener('keydown', function(event) {
    if(event.key === 'Enter') {
        rect.fill('red');
    }
});
rect.node.focus(); // программно установить фокус

Примечания:

  • tabindex="0" делает элемент доступным для навигации через Tab.
  • Метод .node возвращает нативный DOM-элемент SVG, на котором можно устанавливать события напрямую.
  • Такой подход повышает доступность интерфейса.

Практические советы

  • Для управления несколькими элементами удобно хранить их в массиве и применять события к текущему выбранному объекту.
  • Использовать preventDefault() для предотвращения прокрутки страницы стрелками:
document.addEventListener('keydown', function(event) {
    if(['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
        event.preventDefault();
        handleArrow(event.key);
    }
});
  • Комбинировать с SVG.js методами .transform(), .scale(), .rotate() для расширенного взаимодействия.

События клавиатуры в SVG.js позволяют создавать интерактивные графические интерфейсы, управлять объектами и анимациями, сочетая нативные возможности DOM с методами библиотеки для плавного и точного контроля.

Оглавление