在javascript中查找三次贝塞尔曲线的所有点

Question

我有一个带2个控制点的立方贝塞尔曲线.起点和控制点是已知的.给定控制,起点和终点,需要得到曲线的所有点.我想要实现的是..给出从1到曲线长度的值i.得到该位置中每个点的X和Y以及alpha(角度).我找不到一个好的参考或工作代码.我正在使用javascript.

Answer 1

如果我理解正确的话,你试图在每个点确定贝塞尔的位置和斜率(曲线的切线).

假设你的起点是(ax,ay),终点是(dx,dy),你的控制点是(bx,by)和(cx,cy).

位置很容易.首先,计算混合函数.它们控制着控制点在曲线上的"效果".

B0_t = (1-t)^3
B1_t = 3 * t * (1-t)^2
B2_t = 3 * t^2 * (1-t)
B3_t = t^3

注意当t为0时,B0_t为1(其他一切为零).此外,当t为1时,B3_t为1(其他一切都为零).因此曲线从(ax,ay)开始,到(dx,dy)结束.

任何中间点(px_t,py_t)将由以下给出(从0到1变化t,在循环内以小增量变化):

px_t = (B0_t * ax) + (B1_t * bx) + (B2_t * cx) + (B3_t * dx)
py_t = (B0_t * ay) + (B1_t * by) + (B2_t * cy) + (B3_t * dy)

斜坡也很容易做到.使用/sf/answers/286400131/中给出的方法

B0_dt = -3(1-t)^2
B1_dt = 3(1-t)^2 -6t(1-t)
B2_dt = - 3t^2 + 6t(1-t)
B3_dt = 3t^2

所以,x和y的变化率是:

px_dt = (B0_dt * ax) + (B1_dt * bx) + (B2_dt * cx) + (B3_dt * dx)
py_dt = (B0_dt * ay) + (B1_dt * by) + (B2_dt * cy) + (B3_dt * dy)

然后Math.atan2(py_dt,px_dt)用来获得角度(以弧度表示).