Работа со сложной геометрией

Paper.js строится вокруг векторной графики, где каждая фигура, линия или кривая — это объект, обладающий набором свойств и методов. Центральными элементами являются Path, Segment, Point, Curve и Shape. Их понимание позволяет эффективно управлять сложными геометрическими конструкциями.

Path — последовательность сегментов, соединённых кривыми или прямыми линиями. Каждый сегмент задаётся точкой Point, а при необходимости — управляющими точками для кривых Безье.

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));

Segment — отдельный элемент Path. Состоит из:

  • point — координаты вершины.
  • handleIn и handleOut — управляющие точки для кривых Безье.
var segment = new Segment(new Point(200, 200), new Point(-30, 0), new Point(30, 0));

Point — базовый объект для работы с координатами. Поддерживает операции сложения, вычитания, умножения, нормализации, вычисления расстояний и углов между точками.

var p1 = new Point(100, 100);
var p2 = new Point(200, 150);
var distance = p1.getDistance(p2);

Создание сложных кривых и фигур

Кривые Безье

Paper.js позволяет строить кривые Безье, задавая handleIn и handleOut для сегментов Path. Управляющие точки позволяют создавать плавные переходы и сложные формы.

var curve = new Path();
curve.strokeColor = 'blue';
curve.add(new Segment(new Point(50, 200), null, new Point(50, -50)));
curve.add(new Segment(new Point(150, 200), new Point(-50, 50), null));

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

  • Открытые пути — используются для линий и полилиний.
  • Замкнутые пути — создаются с помощью path.closed = true и позволяют работать с заливкой, вычислением площади, пересечениями.
var polygon = new Path.RegularPolygon(new Point(200, 200), 5, 100);
polygon.fillColor = 'green';
polygon.closed = true;

Операции с геометрией

Объединение, пересечение и вычитание фигур

Paper.js поддерживает булевы операции между Path-объектами через методы: unite(), intersect(), subtract(), exclude().

var circle = new Path.Circle(new Point(300, 300), 50);
var rectangle = new Path.Rectangle(new Point(280, 280), new Size(100, 50));
var union = circle.unite(rectangle);
union.fillColor = 'red';

Сегментация и упрощение

  • path.splitAt(offset) — разрезает путь в указанной позиции.
  • path.flatten() — преобразует кривые в сегменты с прямыми линиями, упрощая сложные кривые.
  • path.simplify() — уменьшает количество сегментов, сохраняя форму.
var path = new Path();
path.add(new Point(50, 50));
path.add(new Point(100, 100));
path.add(new Point(150, 50));
path.simplify();

Работа с координатными системами и трансформации

Paper.js использует систему координат Canvas, где точка (0,0) находится в левом верхнем углу. Для работы с фигурами применяются методы трансформации:

  • translate(point) — смещение.
  • rotate(angle, center) — вращение относительно центра.
  • scale(factor, center) — масштабирование.
  • shear(matrix) — наклон.
var rect = new Path.Rectangle(new Point(50, 50), new Size(100, 50));
rect.rotate(45, rect.bounds.center);
rect.scale(1.5, rect.bounds.center);

Использование сложных кривых для динамических эффектов

Path.curves позволяет получить массив кривых внутри пути и работать с каждой кривой отдельно. Можно анимировать кривые, изменяя их segment.point или handleIn/Out, что особенно полезно для сложных анимационных сцен.

var path = new Path();
path.strokeColor = 'black';
path.add(new Point(50, 300));
path.add(new Point(150, 350), new Point(50, 50), new Point(-50, -50));

for (var i = 0; i < path.curves.length; i++) {
    path.curves[i].segments[0].point.y += 10;
}

Работа с геометрическими вычислениями

  • path.length — длина пути.
  • path.getPointAt(offset) — точка на пути на указанном расстоянии.
  • path.getTangentAt(offset) — касательная к пути.
  • path.getNormalAt(offset) — нормаль к пути.

Эти методы позволяют создавать анимации по траекториям, вычислять позиции объектов вдоль кривых, строить параллельные линии и offset paths.

var path = new Path.Circle(new Point(400, 400), 100);
var point = path.getPointAt(50);
var tangent = path.getTangentAt(50);
var normal = path.getNormalAt(50);

Контурные операции и пересечение с другими объектами

Для анализа сложных фигур используются методы:

  • path.contains(point) — проверяет, находится ли точка внутри фигуры.
  • path.intersects(path) — проверяет пересечение двух объектов.
  • path.getIntersections(path) — возвращает массив точек пересечения.
var circle = new Path.Circle(new Point(200, 200), 50);
var rect = new Path.Rectangle(new Point(180, 180), new Size(100, 50));
var intersections = circle.getIntersections(rect);

intersections.forEach(function(intersection) {
    new Path.Circle(intersection.point, 5).fillColor = 'black';
});

Использование регулярных и нестандартных форм

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

var star = new Path.Star(new Point(300, 300), 5, 30, 70);
star.fillColor = 'yellow';

Каждая фигура может быть изменена динамически, применяя методы трансформации и редактирования сегментов.

Итог

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

Оглавление