从贝塞尔曲线控制点找到一条线的方程

Der*_*ing 3 svg bezier

我想找到y = ax2 + bx + c形式的曲线方程

从以下svg路径:

<path id="curve1"  d="M100,200 C100,100 400,100 400,200" />
Run Code Online (Sandbox Code Playgroud)

这给了我4点,可以在附图上看到.

  • 100,200(紫色起点)
  • 100,100(控制点1为红色)
  • 400,100(绿色控制点2)
  • 400,200(终点蓝色)

维基百科有一篇很棒的文章解释bezier曲线但是我不知道如何应用那里显示的数学来得到曲线的方程. http://en.wikipedia.org/wiki/B%C3%A9zier_curve

绘制曲线,点击查看图片

Mik*_*ans 6

你不能.

您显示的SVG使用立方体路径,它使用三阶参数曲线,这意味着它具有以下形式:

fx(t) = x1 * (1-t)³ + x2 * 3 * (1-t)²t + x3 * 3 * (1-t)t² + x4 * t³
fy(t) = y1 * (1-t)³ + y2 * 3 * (1-t)²t + y3 * 3 * (1-t)t² + y4 * t³
Run Code Online (Sandbox Code Playgroud)

(绘制为t从0开始,包括1到1).

因此,有两个原因导致您无法将该曲线表示为一种形式y=ax²+b:

  1. 你至少需要一个表格ax³+bx²+c,而且
  2. 这是参数曲线,而不是简单的函数图; 对于贝塞尔曲线它不是的情况下y是在来表示x在所有的,而是两者xy值由"主参数"控制t.

我们知道二阶函数y=ax²+b只能模拟抛物线,看图像我们可以看到绘制的曲线看起来不像其中一个(甚至不是一个压扁的抛物线)所以我们甚至不能"那种"近似在这种情况下,具有二次函数的曲线.

(有时你可以侥幸逃脱,但绝对不是这种情况)