Bézier Curve Calculator
Интерактивный калькулятор кубической кривой Безье с перетаскиваемыми контрольными точками и длиной кривой.
Точка при t: (200.0, 200.0) | Длина кривой: ~0px
P0
P1
P2
P3
Параметрическое уравнение
B(t) = (1-t)³P0 + 3(1-t)²tP1 + 3(1-t)t²P2 + t³P3
Перетащите контрольные точки на холст, чтобы отрегулировать форму кривой
Об этом инструменте
Калькулятор кривых Безье — это интерактивный инструмент для визуализации и манипулирования кубическими кривыми Безье, которые широко используются в графическом дизайне, анимации, веб-разработке и инженерии. Размещая четыре контрольные точки на холсте, вы можете создавать гладкие кривые, которые служат основой логотипов, UI-анимаций, контуров шрифтов и сложных путей в автоматизированном проектировании. Понимание того, как контрольные точки влияют на форму кривой, необходимо для каждого, кто работает с векторной графикой или дизайном движения.
Для использования инструмента вы начинаете перетаскивать две контрольные точки (P1 и P2) в центре холста, тогда как конечные точки (P0 и P3) закрепляют начало и конец кривой. При перемещении контрольных точек кривая обновляется в реальном времени, и инструмент отображает длину кривой, помогая вам оценить расстояния для синхронизации анимации или планирования пути. Вы также можете напрямую вводить числовые координаты, если вам требуется точный контроль, что делает его полезным как для визуального дизайна, так и для технических расчётов.
Этот инструмент неоценим для графических дизайнеров, тонко настраивающих функции ослабления анимации, разработчиков, внедряющих пути SVG или синхронизацию CSS-анимации, и инженеров, моделирующих плавные переходы в симуляциях. Расчёт длины в реальном времени особенно полезен при планировании анимаций штрихов или оценке расстояния перемещения в движущейся графике. Хотя инструмент ограничен кубическими кривыми Безье (не квадратичными или высшего порядка), это охватывает подавляющее большинство случаев использования при дизайне и анимации.
Часто задаваемые вопросы
Реализация кода
def cubic_bezier(p0, p1, p2, p3, t):
"""Evaluate a cubic Bézier curve at parameter t (0..1)."""
u = 1 - t
return (
u**3 * p0[0] + 3*u**2*t * p1[0] + 3*u*t**2 * p2[0] + t**3 * p3[0],
u**3 * p0[1] + 3*u**2*t * p1[1] + 3*u*t**2 * p2[1] + t**3 * p3[1],
)
def bezier_length(p0, p1, p2, p3, steps=200):
"""Approximate curve length via numerical integration."""
length = 0.0
prev = cubic_bezier(p0, p1, p2, p3, 0)
for i in range(1, steps + 1):
curr = cubic_bezier(p0, p1, p2, p3, i / steps)
dx, dy = curr[0] - prev[0], curr[1] - prev[1]
length += (dx**2 + dy**2) ** 0.5
prev = curr
return length
def bezier_tangent(p0, p1, p2, p3, t):
"""Calculate the tangent direction at parameter t."""
u = 1 - t
dx = 3*u**2*(p1[0]-p0[0]) + 6*u*t*(p2[0]-p1[0]) + 3*t**2*(p3[0]-p2[0])
dy = 3*u**2*(p1[1]-p0[1]) + 6*u*t*(p2[1]-p1[1]) + 3*t**2*(p3[1]-p2[1])
return (dx, dy)
# Example: S-curve
p0, p1, p2, p3 = (0, 0), (0.5, 1), (0.5, -1), (1, 0)
length = bezier_length(p0, p1, p2, p3)
print(f"Curve length: {length:.4f}")
print(f"Point at t=0.5: {cubic_bezier(p0, p1, p2, p3, 0.5)}")
# Sample 10 points
for i in range(11):
t = i / 10
pt = cubic_bezier(p0, p1, p2, p3, t)
print(f"t={t:.1f}: ({pt[0]:.3f}, {pt[1]:.3f})")Comments & Feedback
Comments are powered by Giscus. Sign in with GitHub to leave a comment.