Кривые Безье — фундаментальный инструмент векторной графики, используемый для построения гладких и управляемых линий. В библиотеке Two.js они лежат в основе большинства сложных форм и контуров. Кривая задаётся набором контрольных точек, положение которых определяет её форму.
Существует два наиболее распространённых типа:
Оба типа активно применяются в Two.js при работе с путями
(Two.Path) и сегментами (Two.Anchor).
Квадратичная кривая определяется тремя точками:
Формула:
[ B(t) = (1 - t)^2 P_0 + 2(1 - t)t P_1 + t^2 P_2, t ]
B(t) = (1 - t)^2 P_0 + 2(1 - t)t P_1 + t^2 P_2
Контрольная точка влияет на «изгиб» кривой, но сама не лежит на ней.
В Two.js каждая точка пути представлена объектом
Two.Anchor. Для квадратичной кривой используется одна
управляющая точка (handle), обычно задаваемая через свойства:
controls.leftcontrols.rightОднако для квадратичной кривой фактически используется только один управляющий вектор.
Пример создания квадратичной кривой:
const two = new Two({ width: 500, height: 500 }).appendTo(document.body);
const path = new Two.Path([
new Two.Anchor(50, 250),
new Two.Anchor(250, 50),
new Two.Anchor(450, 250)
], false, false, true);
path.stroke = 'black';
path.linewidth = 2;
two.add(path);
two.update();Здесь центральная точка играет роль контрольной, формируя изгиб.
Изменение координат контрольной точки приводит к изменению формы кривой:
Кубическая кривая определяется четырьмя точками:
Формула:
[ B(t) = (1 - t)^3 P_0 + 3(1 - t)^2 t P_1 + 3(1 - t)t^2 P_2 + t^3 P_3]
B(t) = (1 - t)^3 P_0 + 3(1 - t)^2 t P_1 + 3(1 - t)t^2 P_2 + t^3 P_3
Две контрольные точки дают значительно больше гибкости по сравнению с квадратичной кривой.
В Two.js каждая точка (Two.Anchor) может иметь два
управляющих вектора:
controls.left — входящая ручкаcontrols.right — исходящая ручкаПример:
const a = new Two.Anchor(100, 300);
const b = new Two.Anchor(400, 300);
a.controls.right.set(100, -200);
b.controls.left.set(-100, -200);
const path = new Two.Path([a, b], false, false, true);
path.stroke = 'blue';
path.linewidth = 3;
two.add(path);
two.update();Здесь:
a.controls.right задаёт первую контрольную точкуb.controls.left задаёт вторуюКривая всегда:
Это позволяет контролировать:
Объект Two.Path представляет собой последовательность
точек (Anchor), соединённых линиями или кривыми.
Тип соединения определяется наличием управляющих точек:
Пример смешанного пути:
const path = new Two.Path([
new Two.Anchor(50, 250),
new Two.Anchor(150, 150),
new Two.Anchor(250, 250),
new Two.Anchor(350, 150)
], false, false, true);
path.vertices[1].controls.right.set(50, -50);
path.vertices[2].controls.left.set(-50, -50);Two.js может автоматически сглаживать кривые при помощи метода:
path.curved = true;или:
path.smooth();Метод smooth():
Замкнутый путь (closed = true) соединяет последнюю точку
с первой:
const path = new Two.Path(points, true);Особенности:
Для отладки и понимания поведения кривых полезно отображать:
Пример:
const handleLine = new Two.Line(
anchor.x,
anchor.y,
anchor.x + anchor.controls.right.x,
anchor.y + anchor.controls.right.y
);
handleLine.stroke = 'red';Параметр ( t ) описывает положение точки на кривой:
Two.js не предоставляет прямого API для вычисления точки по ( t ), но это можно реализовать вручную.
Пример для кубической кривой:
function cubicBezier(t, p0, p1, p2, p3) {
const u = 1 - t;
return {
x: u*u*u*p0.x + 3*u*u*t*p1.x + 3*u*t*t*p2.x + t*t*t*p3.x,
y: u*u*u*p0.y + 3*u*u*t*p1.y + 3*u*t*t*p2.y + t*t*t*p3.y
};
}Кривые можно разбивать на сегменты:
Метод де Кастельжо:
Первая производная кривой даёт направление касательной.
Для кубической кривой:
[ B’(t) = 3(1 - t)^2 (P_1 - P_0) + 6(1 - t)t (P_2 - P_1) + 3t^2 (P_3 - P_2)]
Это важно для:
let t = 0;
two.bind('upd ate', function() {
t += 0.01;
const pos = cubicBezier(t, p0, p1, p2, p3);
circle.translation.se t(pos.x, pos.y);
if (t > 1) t = 0;
});Кривые Безье позволяют:
SVG использует кривые Безье (команды Q и
C):
Q — квадратичныеC — кубическиеTwo.js корректно интерпретирует их при загрузке SVG:
two.load('shape.svg', function(group) {
two.add(group);
});| Характеристика | Квадратичная | Кубическая |
|---|---|---|
| Контрольных точек | 1 | 2 |
| Гибкость | Средняя | Высокая |
| Сложность | Низкая | Выше |
| Использование | Простые формы | Сложные контуры |
При работе с большим количеством кривых:
Для плавных кривых часто требуется симметрия управляющих точек:
anchor.controls.left.copy(anchor.controls.right).multiplyScalar(-1);Это обеспечивает:
Two.Path — контейнерTwo.Anchor — вершиныcontrols.left/right — управление кривизнойcurved и smooth() — автоматизацияКривые Безье в Two.js — это сочетание строгой математической модели и гибкого API, позволяющего строить как простые, так и сложные графические структуры с высокой степенью контроля над формой.