Обводка пунктиром

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

Основные методы и свойства

  1. stroke({ color, width, linecap, dasharray, dashoffset }) Этот метод используется для настройки всех параметров обводки. Среди них ключевыми для пунктирной линии являются:

    • dasharray — массив чисел или строка, задающая длины штрихов и промежутков.
    • dashoffset — смещение начала пунктирной линии.
    • linecap — стиль окончания штриха (butt, round, square).

Пример:

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

const rect = draw.rect(200, 100).fill('none').stroke({
  color: '#f06',
  width: 4,
  linecap: 'round',
  dasharray: [10, 5],
  dashoffset: 0
});

В этом примере создается прямоугольник с штрихами длиной 10 пикселей и промежутками 5 пикселей. Ключевой момент — linecap: 'round', который скругляет концы штрихов для более мягкого визуального эффекта.

Настройка последовательностей штрихов

Свойство dasharray принимает как массив чисел, так и строку, разделённую пробелами или запятыми:

// Массив чисел
dasharray: [5, 10, 2, 8]

// Строка
dasharray: '5 10 2 8'

Каждое число задаёт длину штриха или промежутка. Если элементов нечётное количество, массив повторяется автоматически, создавая непрерывный паттерн.

Динамическая анимация пунктирной линии

SVG.js поддерживает плавное изменение dashoffset, что позволяет создавать эффект “движущейся линии”:

rect.animate(2000, '<>').stroke({ dashoffset: 25 }).loop();

Здесь loop() обеспечивает непрерывное повторение анимации, создавая иллюзию движения штрихов вдоль контура объекта.

Комбинация с кривыми и сложными формами

Пунктирная обводка одинаково хорошо применяется к любым объектам SVG: прямоугольникам, кругам, эллипсам, линиям и путям (path). Для кривых Бéзье или сложных путей важно учитывать, что длина штриха учитывается по длине всего контура, а не по отдельным сегментам.

const path = draw.path('M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80')
  .fill('none')
  .stroke({ color: '#00f', width: 3, dasharray: [15, 10] });

Интерактивное управление обводкой

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

path.on('mouseover', () => {
  path.stroke({ dasharray: [5, 5], color: '#f00' });
});

path.on('mouseout', () => {
  path.stroke({ dasharray: [15, 10], color: '#00f' });
});

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

Поддержка нескольких слоёв и комбинированных линий

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

draw.line(0, 50, 400, 50)
  .stroke({ width: 2, color: '#ccc', dasharray: [5, 5] });

draw.line(0, 50, 400, 50)
  .stroke({ width: 2, color: '#333', dasharray: [15, 10], dashoffset: 5 });

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

  • Для плавного визуального эффекта использовать linecap: 'round', особенно на кривых или коротких сегментах.
  • Анимации с dashoffset создают динамическое ощущение движения, но важно корректно рассчитывать длину штрихов для непрерывности паттерна.
  • Комбинируя несколько слоёв с разными dasharray, можно создавать сложные графические эффекты без увеличения сложности SVG-структуры.
  • Для адаптивных интерфейсов стоит учитывать масштабирование: значения dasharray в пикселях могут изменять визуальное восприятие при ресайзе. В таких случаях используют процентные или вычисляемые значения.

Пунктирная обводка в SVG.js — это не просто декоративный элемент. Это мощный инструмент для визуализации, анимации и интерактивных эффектов, который легко интегрируется в сложные графические интерфейсы и игры на JavaScript.

Оглавление