StrokeWidth, strokeCap, strokeJoin

Свойство strokeWidth определяет толщину контура объекта в Paper.js. Оно принимает числовое значение в пикселях и влияет на визуальное восприятие линий и фигур.

Пример использования:

var path = new Path();
path.strokeColor = 'black';
path.strokeWidth = 5; // Толщина линии 5 пикселей
path.add(new Point(50, 50));
path.add(new Point(150, 150));

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

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

Контроль окончания линий: strokeCap

Свойство strokeCap управляет формой концов линий. Оно принимает следующие значения:

  • 'butt' — линии обрываются строго в точке конца сегмента.
  • 'round' — на концах линии добавляются полукруглые закругления.
  • 'square' — линии оканчиваются квадратом, выступающим за пределы сегмента на половину толщины линии.

Пример:

var path = new Path();
path.strokeColor = 'blue';
path.strokeWidth = 10;
path.strokeCap = 'round'; // Закругленные концы
path.add(new Point(50, 100));
path.add(new Point(200, 100));

Замечания по strokeCap:

  • Влияет только на открытые контуры (Path с не замкнутыми точками).
  • На замкнутых контурах конец линии сливается с началом, и strokeCap не имеет эффекта.
  • Использование round или square делает линии визуально длиннее по сравнению с 'butt'.

Управление соединениями линий: strokeJoin

Свойство strokeJoin отвечает за форму углов, образованных сегментами линий. Возможные значения:

  • 'miter' — стандартное соединение с острым углом (по умолчанию).
  • 'round' — углы закругляются полукругом.
  • 'bevel' — углы обрезаются по диагонали, образуя срезанный угол.

Пример:

var path = new Path();
path.strokeColor = 'red';
path.strokeWidth = 12;
path.strokeJoin = 'bevel';
path.add(new Point(100, 50));
path.add(new Point(150, 150));
path.add(new Point(50, 150));

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

  • Свойство актуально только для углов внутри открытых или замкнутых контуров.
  • При 'miter' можно управлять величиной выступа острого угла через miterLimit. Если угол слишком острый, соединение автоматически преобразуется в 'bevel'.
  • 'round' делает углы более плавными и подходит для декоративных линий.
  • 'bevel' полезен для визуализации графических схем и архитектурных чертежей, где острые углы нежелательны.

Взаимодействие strokeWidth, strokeCap и strokeJoin

  • Толщина линии напрямую влияет на видимость эффекта strokeCap и strokeJoin. Тонкие линии делают углы и окончания менее заметными, толстые линии — более выразительными.
  • strokeCap и strokeJoin применяются одновременно: при толстых линиях с закругленными концами и углами линии становятся визуально мягкими и органичными.
  • При изменении толщины линии на лету можно наблюдать динамическое изменение визуального эффекта соединений и концов.
var path = new Path();
path.strokeColor = 'green';
path.strokeWidth = 20;
path.strokeCap = 'round';
path.strokeJoin = 'round';
path.add(new Point(50, 50));
path.add(new Point(150, 100));
path.add(new Point(100, 200));

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

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

  • Для технических чертежей и схем рекомендуется strokeJoin = 'miter' и strokeCap = 'butt'.
  • Для художественных или декоративных линий лучше использовать 'round' для обоих свойств, что создаёт мягкие визуальные эффекты.
  • При работе с анимацией важно учитывать, что увеличение strokeWidth может изменить воспринимаемый размер и позицию линии относительно других объектов.
  • Использование дробных значений strokeWidth позволяет достигать более точной визуализации при масштабировании.

Настройка этих трёх свойств обеспечивает полный контроль над визуальной формой линий, от толщины до характера углов и концов, что делает Paper.js мощным инструментом для создания векторной графики.

Оглавление