Пунктирные линии

Для работы с пунктирными линиями сначала необходимо инициализировать объект Two.js и создать холст. Two.js поддерживает два основных рендерера: SVG и Canvas. Инициализация выглядит следующим образом:

const elem = document.getElementById('draw-area');
const params = { width: 800, height: 600 };
const two = new Two(params).appendTo(elem);

Здесь draw-area — это контейнер на странице, в который будет вставлен SVG или Canvas. Объект two управляет всеми графическими элементами и анимациями.

Создание линий и настройка стиля

Основной элемент для рисования линий в Two.js — это Line или Path. Для простых прямых линий используется:

const line = two.makeLine(50, 50, 300, 50);

Ключевые свойства линии:

  • stroke: цвет линии ('#ff0000').
  • linewidth: толщина линии.
  • opacity: прозрачность.
  • cap: форма концов линии ('butt', 'round', 'square').
line.stroke = '#3498db';
line.linewidth = 4;
line.cap = 'round';

Создание пунктирного эффекта

Two.js не имеет отдельного свойства dashed для линий, как CSS. Пунктир создаётся через SVG-путь, используя свойство stroke-dasharray. Для линии можно задать:

line.dashes = [10, 5]; // 10px линия, 5px пробел
line.visible = true;    // обязательно для рендеринга

Свойство dashes поддерживает массив чисел, где каждое число задаёт длину линии или пробела. Пример более сложного паттерна:

line.dashes = [15, 5, 5, 5]; // длинная линия, короткий пробел, короткая линия, пробел

Two.js автоматически применяет эту настройку к SVG и Canvas. Для Canvas паттерн дублируется вдоль линии.

Пунктирные кривые и сложные формы

Для создания кривых используют Two.Path или Two.Polygon. Пример кривой Безье:

const path = two.makePath(
  new Two.Anchor(50, 150),
  new Two.Anchor(150, 50, 100, 0),
  new Two.Anchor(250, 150)
);

path.stroke = '#e74c3c';
path.linewidth = 3;
path.dashes = [8, 4];
path.noFill(); // убираем заливку

Обратите внимание: Two.Anchor поддерживает контрольные точки для кривых. noFill() отключает заливку, чтобы отображалась только пунктирная линия.

Анимация пунктирных линий

Динамический эффект движения пунктирной линии достигается через свойство dashOffset:

two.bind('upd ate', function(frameCount) {
  line.dashOffset = (line.dashOffset || 0) - 2;
}).play();

Каждый кадр сдвигает паттерн на 2 пикселя, создавая иллюзию движения линии. Для кривых и многоугольников dashOffset работает аналогично.

Комбинирование пунктирных линий с другими объектами

Two.js позволяет совмещать линии с фигурами и группами. Пример:

const circle = two.makeCircle(400, 300, 80);
circle.stroke = '#2ecc71';
circle.linewidth = 5;
circle.dashes = [12, 6];

const group = two.makeGroup(line, circle);
group.translation.se t(50, 50);

Пунктирные линии остаются интерактивными и корректно трансформируются вместе с группой.

Настройка адаптивности

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

function updateDashes(scale) {
  line.dashes = [10 * scale, 5 * scale];
  circle.dashes = [12 * scale, 6 * scale];
}

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

Резюме по работе с пунктирными линиями

  1. Линии создаются через makeLine или makePath.
  2. Свойство dashes задаёт длины линий и пробелов.
  3. dashOffset используется для анимации движения.
  4. Пунктирные линии можно комбинировать с группами и фигурами.
  5. Для кривых и сложных форм Two.js полностью поддерживает пунктирные паттерны через массивы чисел.

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

Оглавление