Замкнутые и открытые пути

В библиотеке Paper.js основным элементом для построения графики является объект Path. Он представляет собой последовательность сегментов, соединённых линиями или кривыми. Поведение пути существенно зависит от того, является ли он замкнутым (closed) или открытым (open).

Путь состоит из:

  • точек (segments)
  • управляющих векторов (для кривых Безье)
  • свойств отображения (цвет обводки, заливки и т.д.)

Ключевое свойство:

path.closed
  • true — путь замкнут
  • false — путь открыт

Открытые пути

Открытый путь — это последовательность сегментов, где первая и последняя точки не соединены.

Особенности открытых путей:

  • отсутствует автоматическое соединение концов
  • не может иметь корректную заливку (fill)
  • используется для линий, кривых, контуров

Пример создания:

var path = new Path();
path.add(new Point(50, 50));
path.add(new Point(150, 50));
path.add(new Point(150, 150));

path.strokeColor = 'black';

В этом примере создаётся ломаная линия из трёх точек.

Кривые в открытых путях

Paper.js автоматически интерпретирует сегменты как кривые, если заданы управляющие векторы:

var path = new Path();
path.add(new Segment(new Point(50, 100), null, new Point(50, 0)));
path.add(new Segment(new Point(150, 100), new Point(-50, 0), null));

path.strokeColor = 'black';

Замкнутые пути

Замкнутый путь — это путь, у которого последняя точка соединена с первой.

Способы создания:

  1. Через свойство:
path.closed = true;
  1. Через конструктор:
var path = new Path({
    segments: [[50, 50], [150, 50], [150, 150]],
    closed: true
});

Особенности замкнутых путей:

  • образуют область
  • поддерживают заливку (fillColor)
  • используются для фигур: кругов, многоугольников, сложных форм

Пример:

var path = new Path();
path.add(new Point(50, 50));
path.add(new Point(150, 50));
path.add(new Point(150, 150));
path.closed = true;

path.strokeColor = 'black';
path.fillColor = 'red';

Визуальные различия

Характеристика Открытый путь Замкнутый путь
Соединение концов Нет Да
Заливка Нет Да
Использование Линии, дуги Фигуры

Автоматическое замыкание фигур

Некоторые встроенные классы всегда создают замкнутые пути:

var circle = new Path.Circle({
    center: [100, 100],
    radius: 50,
    fillColor: 'blue'
});
var rectangle = new Path.Rectangle({
    point: [50, 50],
    size: [100, 80],
    fillColor: 'green'
});

Такие объекты по умолчанию имеют closed = true.

Изменение состояния пути

Путь можно динамически переключать между открытым и замкнутым состоянием:

path.closed = false; // открыть
path.closed = true;  // замкнуть

Поведение при изменении:

  • при замыкании добавляется соединение между последним и первым сегментом
  • при размыкании это соединение удаляется

Геометрические последствия

1. Заливка

Заливка работает только для замкнутых путей:

path.fillColor = 'yellow';

Если путь открыт — заливка не отображается.

2. Направление обхода (orientation)

Замкнутые пути имеют направление:

  • по часовой стрелке
  • против часовой стрелки

Это важно для:

  • булевых операций
  • правил заливки (nonzero, evenodd)

Булевы операции

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

  • unite
  • intersect
  • subtract
  • exclude

Пример:

var path1 = new Path.Circle([100, 100], 50);
var path2 = new Path.Circle([150, 100], 50);

var result = path1.unite(path2);
result.fillColor = 'orange';

Если один из путей открыт — операция либо не выполнится, либо даст некорректный результат.

Длина пути и измерения

Открытые и замкнутые пути по-разному интерпретируются при вычислении длины:

var length = path.length;
  • у открытого пути — сумма сегментов
  • у замкнутого — включает замыкающее соединение

Работа с сегментами

Для замкнутых путей:

path.segments[0] === path.firstSegment
path.segments[path.segments.length - 1] === path.lastSegment

Но при этом:

  • первый и последний сегмент не дублируются
  • замыкание — логическое, а не физическое добавление точки

Разбиение и соединение путей

Разбиение (split)

var part = path.splitAt(50);
  • замкнутый путь становится открытым после разбиения

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

path1.join(path2);
  • объединяет два открытых пути
  • может образовать замкнутый путь

Сглаживание (smooth)

Метод smooth() ведёт себя по-разному:

path.smooth();
  • у открытого пути края остаются “жёсткими”
  • у замкнутого — сглаживание происходит по кругу

Практические сценарии использования

Открытые пути:

  • линии графиков
  • траектории движения
  • контуры без заливки
  • стрелки и направляющие

Замкнутые пути:

  • фигуры интерфейса
  • маски
  • области заливки
  • сложные формы и иконки

Проверка состояния пути

if (path.closed) {
    // замкнутый путь
} else {
    // открытый путь
}

Преобразование открытого пути в фигуру

path.closed = true;
path.fillColor = 'blue';

Важно учитывать:

  • форма должна быть геометрически корректной
  • иначе заливка может выглядеть неожиданно

Ошибки и типичные проблемы

1. Отсутствие заливки Причина:

path.closed === false

2. Некорректные булевы операции Причина:

  • один из путей открыт

3. Непредсказуемое сглаживание Причина:

  • не учитывается замкнутость

Оптимизация работы

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

Взаимодействие с hitTest

Замкнутые пути реагируют на клики внутри области:

project.hitTest(point);
  • замкнутый путь — срабатывает внутри и по границе
  • открытый — только по линии

Итоговая структура различий

  • Топология: линия vs область
  • Отрисовка: только stroke vs stroke + fill
  • Геометрия: линейная vs замкнутая
  • Операции: ограниченные vs полноценные

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

Оглавление