Обводка: толщина, цвет, прозрачность

Обводка (stroke) в Two.js отвечает за визуальное оформление контура фигур. Управление обводкой включает настройку толщины линии, цвета, прозрачности, а также дополнительных параметров, влияющих на стиль отображения.

Каждый графический объект (например, Two.Path, Two.Rectangle, Two.Circle) обладает набором свойств, связанных с обводкой.

Толщина обводки (linewidth)

Толщина линии задаётся свойством linewidth. Значение указывается в пикселях.

var circle = two.makeCircle(200, 200, 50);
circle.linewidth = 5;

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

  • Значение 0 делает обводку невидимой.
  • Значения больше 1 визуально утолщают контур.
  • При масштабировании сцены толщина может визуально изменяться, если используется трансформация.

Влияние на рендеринг:

  • В Canvas-режиме толщина напрямую влияет на ширину линии.
  • В SVG-режиме соответствует атрибуту stroke-width.

Цвет обводки (stroke)

Цвет задаётся через свойство stroke. Поддерживаются различные форматы:

circle.stroke = 'red';
circle.stroke = '#FF0000';
circle.stroke = 'rgb(255, 0, 0)';
circle.stroke = 'rgba(255, 0, 0, 0.5)';

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

  • Именованные цвета ('blue', 'green')
  • HEX ('#00FF00')
  • RGB / RGBA
  • HSL / HSLA

Отключение обводки:

circle.stroke = 'transparent';

или

circle.noStroke();

Прозрачность обводки (opacity)

Прозрачность управляется свойством opacity, которое применяется ко всему объекту, включая обводку и заливку:

circle.opacity = 0.5;

Диапазон значений:

  • 0 — полностью прозрачный
  • 1 — полностью непрозрачный

Важная деталь:

Если требуется задать прозрачность только обводки, используется формат rgba:

circle.stroke = 'rgba(255, 0, 0, 0.3)';

Совмещение параметров

Пример комплексной настройки:

var rect = two.makeRectangle(150, 150, 100, 100);

rect.fill = '#EEE';
rect.stroke = 'rgba(0, 0, 255, 0.7)';
rect.linewidth = 8;
rect.opacity = 0.9;

Результат:

  • Толстая синяя полупрозрачная обводка
  • Лёгкая прозрачность всей фигуры
  • Светлая заливка

Стиль соединений и концов линий

Соединения (join)

Свойство join управляет тем, как соединяются сегменты линии:

path.join = 'miter';  // острый угол
path.join = 'round';  // скруглённый
path.join = 'bevel';  // срезанный

Концы линий (cap)

Свойство cap определяет вид концов линий:

path.cap = 'butt';   // обрезанный
path.cap = 'round';  // закруглённый
path.cap = 'square'; // квадратный

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

Two.js поддерживает пунктир через свойство dashes:

line.dashes = [10, 5];

Объяснение:

  • 10 — длина штриха
  • 5 — длина промежутка

Можно создавать сложные шаблоны:

line.dashes = [5, 3, 2, 3];

Масштабирование и обводка

При масштабировании объекта:

rect.scale = 2;

толщина обводки также масштабируется. Для сохранения фиксированной толщины требуется учитывать это вручную, уменьшая linewidth.

Производительность и особенности

  • Большая толщина обводки увеличивает нагрузку при сложных сценах.
  • Пунктирные линии могут снижать производительность в Canvas-режиме.
  • SVG-рендеринг более точно отображает сложные стили обводки.

Частые ошибки

Невидимая обводка

shape.linewidth = 0;

Конфликт прозрачности

shape.opacity = 0; // скрывает всё, включая обводку

Неправильный формат цвета

shape.stroke = '255,0,0'; // ошибка

Практический пример

var star = two.makeStar(200, 200, 50, 100, 5);

star.fill = 'yellow';
star.stroke = 'rgba(255, 165, 0, 0.8)';
star.linewidth = 6;
star.join = 'round';
star.cap = 'round';
star.dashes = [8, 4];

two.update();

Что происходит:

  • Звезда с жёлтой заливкой
  • Оранжевая полупрозрачная обводка
  • Скруглённые углы и концы
  • Пунктирный контур

Взаимодействие с группами

Если объект находится в группе:

group.add(circle);
group.opacity = 0.5;

то прозрачность применяется ко всем дочерним элементам, включая обводку.

Итоговая структура свойств обводки

Свойство Назначение
stroke Цвет обводки
linewidth Толщина линии
opacity Общая прозрачность
join Соединение сегментов
cap Концы линий
dashes Пунктир

Гибкость этих параметров позволяет формировать как простые, так и сложные визуальные стили контуров в Two.js, включая имитацию ручного рисования, декоративные линии и интерфейсные элементы.

Оглавление