Отображение handles

В Paper.js термин handle обозначает управляющие точки кривых Безье, используемые для контроля формы сегментов путей. Каждый сегмент пути (Segment) может иметь handleIn и handleOut, определяющие кривизну линии перед и после сегмента. Управление этими handle позволяет создавать плавные кривые, а их визуализация помогает лучше понимать структуру векторных объектов.

Структура сегмента и handle

Сегмент в Paper.js представлен объектом Segment и содержит следующие свойства:

  • point — точка сегмента (координаты на холсте).
  • handleIn — вектор от точки сегмента к предыдущей точке кривой. Управляет входящей кривизной.
  • handleOut — вектор от точки сегмента к следующей точке кривой. Управляет исходящей кривизной.

Пример создания сегмента с ручками:

var segment = new Segment({
    point: [100, 100],
    handleIn: [-30, 0],
    handleOut: [30, 0]
});

Здесь создаётся сегмент с точкой [100, 100] и ручками длиной 30 пикселей влево и вправо. Эти значения напрямую влияют на форму кривой Безье.

Включение отображения handle

Для визуализации handle используется свойство selected у элементов Segment. Если сегмент или путь выделен, Paper.js автоматически отобразит его handle на холсте. Основные способы:

  1. Выделение сегмента напрямую:
segment.selected = true;
  1. Выделение всего пути:
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.fullySelected = true;

fullySelected = true позволяет показывать все сегменты и handle сразу, создавая визуальное представление всей структуры кривой.

Настройка визуализации handle

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

  • Цвет handle определяется стилем пути (strokeColor) и цветом выделения (selectedColor).
  • Размер handle можно регулировать через атрибут handleSize у сегмента, но чаще используется глобальная настройка view.draw(), которая отображает их стандартными кругами и линиями.

Пример кастомного отображения handle:

path.fullySelected = true;

// Изменяем цвет handle для наглядности
path.strokeColor = 'black';
path.selectedColor = 'red';

Теперь выделенные сегменты будут с красными ручками, а линии — чёрными, что облегчает редактирование кривых.

Динамическое управление handle

Handles можно изменять в процессе выполнения кода, что позволяет создавать интерактивные кривые. Основные операции:

  • Изменение handle после создания сегмента:
segment.handleIn = new Point(-50, -20);
segment.handleOut = new Point(50, 20);
  • Использование событий мыши для динамической визуализации:
path.onMouseD rag = function(event) {
    path.firstSegment.handleOut = event.point.subtract(path.firstSegment.point);
}

Такой подход позволяет реализовать интерактивное редактирование кривой на холсте.

Влияние handle на кривую

  • handleIn влияет на кривую перед сегментом, определяя направление входящей кривизны.
  • handleOut влияет на кривую после сегмента, определяя направление исходящей кривизны.
  • Если оба handle равны нулю ([0,0]), сегмент соединяется с соседними сегментами прямыми линиями.

Вспомогательные методы

  • segment.hasHandles() — проверяет, есть ли у сегмента активные handle.
  • segment.selected и path.fullySelected — управляют видимостью handle.
  • path.smooth() — автоматически выравнивает handle для плавного соединения сегментов.

Пример использования smooth():

path.smooth({ type: 'continuous' });
path.fullySelected = true;

В этом случае все handle будут автоматически откорректированы для плавного перехода между сегментами.

Советы по работе с handle

  • Для редактирования кривых используйте комбинацию handleIn и handleOut, а не только point.
  • fullySelected полезно при отладке и визуальном анализе кривой.
  • При динамических изменениях handle важно перерисовывать view.update(), чтобы изменения отображались на холсте.

Handles в Paper.js — мощный инструмент для точного управления формой кривых Безье. Их правильное использование позволяет создавать сложные и плавные векторные объекты с минимальными усилиями.

Оглавление