math - 在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) 将由以下给出(将 t 从 0 变化到 1，在循环内以小增量):

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)

斜坡也很容易做到。使用 https://stackoverflow.com/a/4091430/1384030 中给出的方法

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)获得角度(以弧度为单位)。