Навигация с клавиатуры

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

Отслеживание событий клавиатуры

Для обработки нажатий клавиш используется стандартная система событий DOM: keydown, keyup и keypress. В сочетании с SVG.js это позволяет управлять объектами SVG в реальном времени. Пример базового подключения:

document.addEventListener('keydown', function(event) {
    console.log(`Нажата клавиша: ${event.key}`);
});
  • keydown — срабатывает при нажатии клавиши.
  • keyup — срабатывает при отпускании клавиши.
  • keypress — устаревшее событие, чаще используется keydown.

Перемещение объектов SVG

SVG.js позволяет изменять атрибуты объектов, такие как x, y, cx, cy, transform. Для перемещения объекта можно использовать метод move() или dmove():

const draw = SVG().addTo('body').size(600, 400);
const rect = draw.rect(50, 50).fill('#f06').move(100, 100);

document.addEventListener('keydown', function(event) {
    const step = 10;
    switch(event.key) {
        case 'ArrowUp':
            rect.dmove(0, -step);
            break;
        case 'ArrowDown':
            rect.dmove(0, step);
            break;
        case 'ArrowLeft':
            rect.dmove(-step, 0);
            break;
        case 'ArrowRight':
            rect.dmove(step, 0);
            break;
    }
});
  • dmove(dx, dy) перемещает объект относительно текущей позиции.
  • move(x, y) задаёт абсолютное положение объекта.

Анимация через клавиатуру

Для создания плавных анимаций можно использовать встроенный метод animate():

document.addEventListener('keydown', function(event) {
    if (event.key === 'ArrowRight') {
        rect.animate(300).dmove(50, 0);
    }
});
  • animate(duration) создаёт анимацию с заданной длительностью в миллисекундах.
  • Методы dx(), dy(), dmove() могут использоваться для анимации координат.

Ограничение перемещения

Чтобы объект не выходил за пределы SVG-контейнера, можно проверять текущие координаты перед перемещением:

const containerWidth = 600;
const containerHeight = 400;

document.addEventListener('keydown', function(event) {
    const step = 10;
    let {x, y} = rect.bbox(); 

    switch(event.key) {
        case 'ArrowUp':
            if (y - step >= 0) rect.dmove(0, -step);
            break;
        case 'ArrowDown':
            if (y + rect.height() + step <= containerHeight) rect.dmove(0, step);
            break;
        case 'ArrowLeft':
            if (x - step >= 0) rect.dmove(-step, 0);
            break;
        case 'ArrowRight':
            if (x + rect.width() + step <= containerWidth) rect.dmove(step, 0);
            break;
    }
});

Использование метода bbox() позволяет получать размеры и координаты объекта в любой момент.

Работа с несколькими объектами

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

const group = draw.group();
const circle = draw.circle(50).fill('#0f6').move(150, 150);
const square = draw.rect(50, 50).fill('#06f').move(200, 150);
group.add(circle).add(square);

document.addEventListener('keydown', function(event) {
    const step = 10;
    if (event.key === 'ArrowUp') group.dmove(0, -step);
    if (event.key === 'ArrowDown') group.dmove(0, step);
});

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

События с задержкой и повторением

Чтобы обеспечить плавное перемещение при удержании клавиши, используется сочетание keydown и setInterval:

let interval;

document.addEventListener('keydown', function(event) {
    if (interval) return;
    if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
        interval = setInterval(() => {
            switch(event.key) {
                case 'ArrowUp': rect.dmove(0, -5); break;
                case 'ArrowDown': rect.dmove(0, 5); break;
                case 'ArrowLeft': rect.dmove(-5, 0); break;
                case 'ArrowRight': rect.dmove(5, 0); break;
            }
        }, 50);
    }
});

document.addEventListener('keyup', function(event) {
    clearInterval(interval);
    interval = null;
});

Такой подход обеспечивает непрерывное движение объекта при удержании клавиши.

Управление сложными трансформациями

SVG.js поддерживает комплексные трансформации через метод transform():

document.addEventListener('keydown', function(event) {
    switch(event.key) {
        case 'r': // вращение на 15 градусов
            rect.transform({ rotation: rect.transform().rotation + 15 });
            break;
        case 's': // масштабирование
            rect.transform({ scaleX: 1.1, scaleY: 1.1 });
            break;
    }
});
  • rotation — угол поворота в градусах.
  • scaleX, scaleY — масштабирование по оси X и Y.
  • Можно комбинировать несколько трансформаций одновременно.

Комбинация клавиш и условная логика

Для расширенного управления можно использовать модификаторы клавиш (Shift, Ctrl, Alt):

document.addEventListener('keydown', function(event) {
    const step = event.shiftKey ? 20 : 5;
    switch(event.key) {
        case 'ArrowUp': rect.dmove(0, -step); break;
        case 'ArrowDown': rect.dmove(0, step); break;
    }
});

Shift увеличивает шаг перемещения, а комбинация с Ctrl или Alt может использоваться для изменения других свойств (цвет, прозрачность, угол).

Интеграция с анимационным циклом

Для сложных интерфейсов и игр целесообразно использовать цикл requestAnimationFrame, синхронизируя события клавиатуры с отрисовкой:

let keys = {};
document.addEventListener('keydown', e => keys[e.key] = true);
document.addEventListener('keyup', e => keys[e.key] = false);

function animate() {
    if (keys['ArrowRight']) rect.dmove(2, 0);
    if (keys['ArrowLeft']) rect.dmove(-2, 0);
    requestAnimationFrame(animate);
}
animate();

Такой подход обеспечивает более плавное управление, чем реагирование на события keydown напрямую, и предотвращает задержки при удержании клавиш.

Заключение

Навигация с клавиатуры в SVG.js строится на сочетании DOM-событий и методов библиотеки для управления позициями, размерами и трансформациями объектов. Использование групп, анимаций и циклов requestAnimationFrame позволяет создавать интерактивные и отзывчивые интерфейсы. Такой подход совместим с любыми типами элементов: прямоугольниками, кругами, линиями, текстом и сложными SVG-композициями.

Оглавление