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

Question

我有一个关于控制点曲线公式的问题。正如您所知，HTML Canvas具有带有控制点的quadraticCurveTo(x1, y1, x2, y2)。

然而，当您尝试使用它绘制描边时，描边永远不会触及控制点。

因此，我们有了这个公式：

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

(xt, yt) = 你希望曲线穿过的点。 t 代表切线，因为它垂直于该点的90度。

这将重新计算控制点的位置。

我从一本书中得到了这个公式，但是这本书没有解释它是如何被推导出来的。我尝试在Google上搜索，但不成功。

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

谢谢， Venn.

- Vennsoh

---

这是来自https://dev59.com/F2w15IYBdhLWcg3wSJzQ的内容，供任何想了解的人参考。 - mowwwalker

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

- MBo

Answer 2

这被称为样条线。更重要的是，看起来他们正在使用贝塞尔曲线。

- mindvirus

---

谢谢，但我仍然不明白如何推导出 x1 = xt * 2 - (x0 + x2) / 2; y1 = yt * 2 - (y0 + y2) / 2;。 - Vennsoh

@Vennsoh：我编辑了我的答案，我相信他们正在使用二次贝塞尔曲线。请参阅链接维基百科文章中的推导过程。 - mindvirus