Stroke и обводка

В Paper.js обводка фигур реализуется через свойство strokeColor, а ширина линии задаётся через strokeWidth. Обводка используется для выделения контуров объектов, таких как Path, Rectangle, Circle или CompoundPath. Обводка может быть одноцветной, градиентной, с прозрачностью и различными стилями концов и соединений.

var circle = new Path.Circle({
    center: [150, 150],
    radius: 50,
    strokeColor: 'red',  // цвет обводки
    strokeWidth: 5       // толщина линии
});

Свойства обводки

  • strokeColor — задаёт цвет линии. Может быть строкой цвета ('red', 'blue') или объектом Color.

  • strokeWidth — определяет толщину линии в пикселях.

  • strokeCap — стиль окончания линии. Возможные значения:

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

  • strokeJoin — стиль соединения сегментов:

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

  • dashArray — массив чисел, определяющий штриховой рисунок линии.

  • dashOffset — смещение для штриховой линии.

var line = new Path.Line({
    from: [50, 50],
    to: [200, 50],
    strokeColor: 'blue',
    strokeWidth: 8,
    strokeCap: 'round',
    strokeJoin: 'round',
    dashArray: [10, 4] // чередование длины линии и пропуска
});

Работа с прозрачностью и градиентами

Обводку можно сделать полупрозрачной с помощью альфа-канала:

var rectangle = new Path.Rectangle({
    point: [100, 100],
    size: [150, 100],
    strokeColor: new Color(0, 1, 0, 0.5), // зелёная с прозрачностью 50%
    strokeWidth: 6
});

Градиентная обводка создаётся через объект Gradient и GradientStop:

var gradient = new Gradient(['red', 'yellow']);
var path = new Path.Circle({
    center: [300, 200],
    radius: 60,
    strokeColor: gradient,
    strokeWidth: 10
});

Модификация обводки после создания объекта

Объекты Paper.js позволяют динамически изменять свойства обводки:

circle.strokeColor = 'blue';
circle.strokeWidth = 12;
circle.strokeCap = 'square';

Можно комбинировать с анимацией, например, изменяя strokeWidth плавно:

function onFrame(event) {
    circle.strokeWidth = 5 + Math.sin(event.time * 3) * 3;
}

Штриховые линии и эффекты

Свойство dashArray позволяет создавать сложные штриховые линии. Элементы массива чередуются: длина линии и длина пропуска.

var zigzag = new Path();
zigzag.add([50, 300]);
zigzag.add([200, 300]);
zigzag.strokeColor = 'purple';
zigzag.strokeWidth = 4;
zigzag.dashArray = [15, 5, 5, 5]; // комбинированный рисунок

dashOffset позволяет смещать начальную точку штрихов, создавая эффект движения:

function onFrame(event) {
    zigzag.dashOffset -= 2;
}

Особенности соединений и скруглений

  • Острые углы на пересечениях сегментов (miter) могут быть обрезаны, если длина “mitre limit” слишком мала. В Paper.js это регулируется свойством miterLimit.
  • Скруглённые соединения (round) делают углы более плавными, особенно при анимации.
  • Срезанные соединения (bevel) полезны для создания графических схем с угловатыми линиями.
var triangle = new Path.RegularPolygon({
    center: [400, 100],
    sides: 3,
    radius: 60,
    strokeColor: 'black',
    strokeWidth: 8,
    strokeJoin: 'bevel'
});

CompoundPath и Stroke

Объединение нескольких фигур в один объект CompoundPath позволяет применить общую обводку ко всем сегментам:

var compound = new CompoundPath({
    children: [
        new Path.Circle({ center: [100, 400], radius: 30 }),
        new Path.Rectangle({ point: [130, 370], size: [60, 60] })
    ],
    strokeColor: 'orange',
    strokeWidth: 5
});

Обводка при этом ведёт себя как единое целое, что важно для сложных графических элементов.

Итоговые рекомендации по Stroke

  • Для тонкой графики использовать strokeWidth 1–3px, для выделенной линии — 5–10px.
  • Скруглённые концы (round) лучше подходят для плавных кривых.
  • Штриховые линии с dashArray отлично подходят для динамических эффектов или диаграмм.
  • Прозрачность и градиенты добавляют глубину и визуальный интерес.

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

Оглавление