Bézier Curve Calculator
交互式三次Bézier曲线计算器,支持可拖动的控制点和曲线长度。
参数 t 处的点: (200.0, 200.0) | 曲线长度: ~0px
P0
x
y
P1
x
y
P2
x
y
P3
x
y
参数方程
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.