Path и базовые операции

Path — ключевая сущность в Paper.js, представляющая последовательность сегментов, соединённых линиями или кривыми. Любая сложная фигура, от простой линии до сложного контура, строится именно на основе Path.

Каждый путь состоит из:

  • сегментов (segments) — опорных точек
  • кривых (curves) — соединений между сегментами
  • ручек управления (handles) — векторов для построения кривых Безье

Создание пути

Базовое создание пустого пути:

var path = new Path();
path.strokeColor = 'black';

Добавление сегментов:

path.add(new Point(50, 50));
path.add(new Point(150, 50));
path.add(new Point(150, 150));

Альтернативный способ — создание пути сразу с сегментами:

var path = new Path({
    segments: [[50, 50], [150, 50], [150, 150]],
    strokeColor: 'black'
});

Основные типы путей

Линия

var path = new Path.Line({
    from: [50, 50],
    to: [150, 150],
    strokeColor: 'black'
});

Прямоугольник

var rect = new Path.Rectangle({
    point: [50, 50],
    size: [100, 80],
    strokeColor: 'black'
});

Круг

var circle = new Path.Circle({
    center: [100, 100],
    radius: 50,
    strokeColor: 'black'
});

Эллипс

var ellipse = new Path.Ellipse({
    point: [50, 50],
    size: [150, 100],
    strokeColor: 'black'
});

Свойства Path

Цвета

  • strokeColor — цвет линии
  • fillColor — цвет заливки
path.strokeColor = 'blue';
path.fillColor = 'lightblue';

Толщина линии

path.strokeWidth = 5;

Прозрачность

path.opacity = 0.5;

Замкнутость пути

path.closed = true;

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

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

Доступ к сегментам

var segment = path.segments[0];

Изменение точки

segment.point.x += 20;
segment.point.y += 10;

Добавление сегмента в конкретную позицию

path.insert(1, new Point(100, 100));

Удаление сегмента

path.removeSegment(0);

Кривые Безье

Каждый сегмент может содержать две ручки:

  • handleIn
  • handleOut

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

var path = new Path();
path.strokeColor = 'black';

path.add({
    point: [50, 150],
    handleOut: [50, -100]
});

path.add({
    point: [150, 150],
    handleIn: [-50, -100]
});

Ручки определяют направление и силу изгиба.

Трансформации пути

Перемещение

path.position += new Point(50, 0);

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

path.scale(1.5);

Вращение

path.rotate(45);

Наклон (shear)

path.shear(0.5, 0);

Работа с границами (bounds)

Каждый путь имеет ограничивающий прямоугольник:

var bounds = path.bounds;

Свойства:

  • bounds.width
  • bounds.height
  • bounds.center

Пример:

path.position = view.center;

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

Paper.js поддерживает операции над путями:

Объединение

var result = path1.unite(path2);

Пересечение

var result = path1.intersect(path2);

Вычитание

var result = path1.subtract(path2);

Исключающее ИЛИ

var result = path1.exclude(path2);

После выполнения создаётся новый путь.

Разбиение и сглаживание

Упрощение пути

path.simplify();

Удаляет лишние точки, сохраняя форму.

Сглаживание

path.smooth();

Делает контур более плавным.

Проверка попадания (hit testing)

Определение, находится ли точка внутри пути:

if (path.contains(new Point(100, 100))) {
    console.log('Внутри');
}

Длина пути и позиция на нём

Общая длина

var length = path.length;

Точка на пути

var point = path.getPointAt(100);

Нормаль

var normal = path.getNormalAt(100);

Тангенс

var tangent = path.getTangentAt(100);

Разделение пути

var newPath = path.splitAt(100);

Разделяет путь на два в указанной позиции.

Удаление пути

path.remove();

Удаляет объект из сцены.

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

Path применяется для:

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

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

Оглавление