Типы окончаний линий

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

Свойство cap

Каждый объект, имеющий контур, поддерживает свойство cap, которое управляет видом окончания линии. Типы значений:

  1. butt

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

  2. round

    • Конец линии закругляется полукругом, радиус которого равен половине толщины линии (linewidth / 2).
    • Создает плавные и мягкие переходы, часто применяется в иллюстрациях и инфографике.

  3. square

    • Конец линии выступает за точку окончания на величину, равную половине толщины линии.
    • Прямоугольный тип окончания с визуально увеличенной длиной линии.
    • Удобен для линий, которые должны визуально перекрываться или сочетаться с другими объектами.

Пример установки:

const line = two.makeLine(50, 50, 150, 50);
line.cap = 'round'; // Закругленные окончания
two.update();

Применение к многоугольникам и кривым

Свойство cap влияет не только на отдельные линии, но и на сложные фигуры, составленные из сегментов:

  • Полилинии (Polyline) Концы полилинии наследуют тип окончания линии. Если полилиния разомкнута, cap определяет, как будут выглядеть концы.

  • Кривые Безье и сплайны (Path, Curve) Даже при плавных изгибах окончание линии визуально заметно, особенно при большой толщине. Использование round делает изгиб более естественным, а butt сохраняет строгую геометрию.

Взаимосвязь с соединениями линий (join)

Тип окончания линии тесно связан с типами соединений сегментов:

  • join управляет стыком между сегментами (miter, round, bevel).
  • cap определяет конец линии, а join — внутренние соединения.
  • Например, при round на конце линии и bevel на соединениях создается аккуратная графика без острых выступов.
line.cap = 'square';
line.join = 'bevel';
two.update();

Влияние толщины линии

В Two.js ширина линии (linewidth) напрямую влияет на визуальный эффект окончания:

  • round и square расширяются пропорционально linewidth.
  • Маленькая толщина делает окончания едва заметными, большие значения создают выраженные концевые формы.
  • Оптимальный подход — подбирать толщину линии с учетом типа окончания для сохранения эстетики.

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

  • Для схем и графиков чаще используют butt для точности.
  • Для художественных линий и иллюстраций лучше round — создается плавный визуальный эффект.
  • square полезен при необходимости визуально увеличить длину линии без изменения координат.
  • Совмещение с прозрачностью (opacity) и градиентами линии усиливает выразительность концов.

Поддержка SVG и Canvas

Two.js автоматически транслирует cap в соответствующие свойства:

  • Canvas: ctx.lineCap принимает butt, round, square.
  • SVG: свойство stroke-linecap принимает те же значения.
  • При смене рендерера внешний вид линий сохраняется, что обеспечивает кросс-платформенную совместимость.

Типы окончаний линий в Two.js — важный инструмент, позволяющий управлять эстетикой и точностью визуализации. Правильный выбор cap в сочетании с join, linewidth и цветом обеспечивает гибкое и выразительное оформление графики.

Оглавление