解释 - 通过控制点曲线的公式

Question

我有一个关于通过控制点弯曲的公式的问题。 如您所知，HTML Canvas 有quadraticCurveTo(x1, y1, x2, y2)，x1 and x2 是控制点。

但是，当您尝试使用它来绘制笔触时，笔触将永远不会触及控制点。

所以我们有这个公式：

x1 = xt * 2 - (x0 + x2) / 2;
y1 = yt * 2 - (y0 + y2) / 2;

(xt, yt) = 你想弯曲的点。 t 表示切线，因为它在该点垂直 90 度。

这会重新计算控制点位置。

我从一本书中得到了这个公式，但是这本书没有解释它是如何得出的。我尝试了谷歌但徒劳无功。

有人知道这个公式是怎么推导出来的吗？

谢谢， 维恩。

Answer 1

二次贝塞尔曲线由方程描述：

x(t) = x0 * (1-t)^2 + 2 * x1 * t * (1 - t) + x2 * t^2（和 y(t) 类似）。

如果我们应用参数值 t = 1/2（以某种方式 - 曲线的中间），我们将得到您的公式：

x(t=1/2) = xt = x0 * 1/4 + 2 * x1 * 1/4 + x2 * 1/4

然后

x1/2 = xt - (x0 + x2)/4

x1 = 2 * xt - (x0 + x2)/2

Answer 2

这称为Spline。更重要的是，他们似乎正在使用Bezier Curve。