math - 二次贝塞尔曲线 : Calculate Points

Question

我想计算二次曲线上的点。与 HTML5 的 canvas 元素一起使用。

当我使用quadraticCurveTo()时JavaScript 中的函数，我有一个源点、一个目标点和一个控制点。

如何在“仅”知道这三个点的情况下计算所创建的二次曲线上的一个点(假设t=0.5)？

Answer 1

使用二次贝塞尔公式，例如在维基百科页面上找到的Bézier Curves :

用伪代码来说，就是

t = 0.5; // given example value
x = (1 - t) * (1 - t) * p[0].x + 2 * (1 - t) * t * p[1].x + t * t * p[2].x;
y = (1 - t) * (1 - t) * p[0].y + 2 * (1 - t) * t * p[1].y + t * t * p[2].y;

p[0] 为起点，p[1] 为控制点，p[2] 为终点观点。 t 是参数，从 0 到 1。