Circle

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

Создание окружности

В Paper.js окружность создаётся через конструктор Path.Circle. Существует несколько способов задания параметров:

1. Через центр и радиус

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

Ключевые параметры:

  • center — координаты центра окружности
  • radius — радиус
  • fillColor — цвет заливки

2. Через объект Point

var center = new Point(200, 150);

var circle = new Path.Circle(center, 75);
circle.strokeColor = 'black';

3. Через прямоугольник (bounding box)

var rectangle = new Rectangle(new Point(50, 50), new Size(100, 100));
var circle = new Path.Circle(rectangle);

В этом случае окружность вписывается в заданный прямоугольник.

Основные свойства

Объект Circle наследует свойства класса Path, поэтому обладает широким набором параметров.

Геометрические свойства

  • position — центр фигуры
  • bounds — ограничивающий прямоугольник
  • area — площадь окружности
  • length — длина контура (периметр)
console.log(circle.area);
console.log(circle.length);

Визуальные свойства

  • fillColor — цвет заливки
  • strokeColor — цвет обводки
  • strokeWidth — толщина линии
  • opacity — прозрачность
circle.fillColor = 'red';
circle.strokeColor = 'black';
circle.strokeWidth = 2;
circle.opacity = 0.5;

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

Несмотря на то, что окружность выглядит как примитив, внутри она представлена как путь из сегментов.

console.log(circle.segments.length);

Обычно окружность состоит из 4 сегментов, соединённых кривыми Безье.

Каждый сегмент содержит:

  • точку (point)
  • входящий и исходящий векторы (handleIn, handleOut)

Трансформации

Перемещение

circle.position.x += 50;
circle.position.y += 20;

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

circle.scale(1.5);

Вращение

circle.rotate(45);

Вращение происходит вокруг центра объекта, если не указано иное.

Наклон (skew)

circle.skew(20, 10);

Анимация окружности

Paper.js предоставляет удобный механизм анимации через обработчик onFrame.

function onFrame(event) {
    circle.scale(1 + Math.sin(event.time) * 0.01);
}

В данном примере окружность плавно “пульсирует”.

Обработка событий

Circle может реагировать на пользовательские действия:

Клик

circle.onCl ick = function(event) {
    circle.fillColor = 'green';
};

Наведение мыши

circle.onMouseEn ter = function() {
    circle.strokeColor = 'red';
};

circle.onMouseLe ave = function() {
    circle.strokeColor = 'black';
};

Работа с группами

Окружности можно объединять в группы:

var circle1 = new Path.Circle([100, 100], 40);
var circle2 = new Path.Circle([150, 100], 40);

var group = new Group([circle1, circle2]);
group.fillColor = 'purple';

Группа позволяет управлять несколькими объектами как единым целым.

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

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

Объединение

var result = circle1.unite(circle2);
result.fillColor = 'orange';

Пересечение

var intersection = circle1.intersect(circle2);
intersection.fillColor = 'red';

Вычитание

var difference = circle1.subtract(circle2);
difference.fillColor = 'blue';

Клонирование

var copy = circle.clone();
copy.position.x += 100;

Клон полностью повторяет исходный объект, включая стили.

Удаление

circle.remove();

Удаляет объект из проекта.

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

1. Генерация сетки окружностей

for (var x = 0; x < 500; x += 50) {
    for (var y = 0; y < 500; y += 50) {
        new Path.Circle({
            center: [x, y],
            radius: 10,
            fillColor: 'black'
        });
    }
}

2. Эффект волны

function onFrame(event) {
    circle.radius = 50 + Math.sin(event.time * 3) * 20;
}

3. След за курсором

function onMouseMove(event) {
    new Path.Circle({
        center: event.point,
        radius: 5,
        fillColor: 'blue'
    });
}

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

  • Избегать создания большого количества объектов в каждом кадре
  • Использовать removeOnMove() или removeOnDown() для временных элементов
  • Группировать объекты для упрощения управления
  • Минимизировать сложные булевы операции в реальном времени

Взаимодействие с другими примитивами

Circle легко комбинируется с:

  • Path.Rectangle
  • Path.Line
  • Path.Star
  • CompoundPath

Пример:

var circle = new Path.Circle([200, 200], 80);
var rect = new Path.Rectangle([150, 150], [100, 100]);

var shape = circle.intersect(rect);
shape.fillColor = 'green';

Особенности реализации

  • Circle не является отдельным классом — это фабричный метод Path.Circle
  • Внутренне используется аппроксимация кривыми Безье
  • Высокая точность отображения даже при масштабировании

Расширенные техники

Динамическое изменение радиуса

circle.radius += 1;

Важно: при прямом изменении радиуса Paper.js пересчитывает сегменты.

Центрирование относительно другого объекта

circle.position = otherObject.bounds.center;

Ограничение движения

circle.position.x = Math.min(Math.max(circle.position.x, 0), view.size.width);

Связь с системой координат

  • (0, 0) — верхний левый угол холста
  • ось X направлена вправо
  • ось Y направлена вниз

Circle полностью подчиняется этим правилам, включая трансформации и вычисления.

Работа с несколькими окружностями

Создание сложных сцен:

var circles = [];

for (var i = 0; i < 20; i++) {
    var c = new Path.Circle({
        center: Point.random() * view.size,
        radius: 20,
        fillColor: 'blue'
    });
    circles.push(c);
}

Итерация по массиву

circles.forEach(function(c) {
    c.fillColor.hue += 1;
});

Градиенты

circle.fillColor = {
    gradient: {
        stops: ['yellow', 'red']
    },
    origin: circle.bounds.topLeft,
    destination: circle.bounds.bottomRight
};

Маскирование

Circle может использоваться как маска:

var mask = new Path.Circle([200, 200], 100);
var image = new Raster('image.jpg');

image.position = mask.position;
image.clipped = true;

Итоговая структура объекта

Circle — это:

  • Path с 4 сегментами
  • поддержка всех операций Path
  • интеграция с системой событий
  • высокая производительность при отрисовке
  • универсальный строительный блок для сложной графики
Оглавление