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

时间:2015-02-27 17:50:46

标签: svg bezier

我想找到y = ax2 + bx + c

形式的曲线方程

来自以下svg路径:

<path id="curve1"  d="M100,200 C100,100 400,100 400,200" />

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

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

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

plotted curve, click to see image

1 个答案:

答案 0 :(得分: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³

(为t绘制,从0开始,包括1,包括在内)。

因此,有两个理由说明您无法将该曲线表示为y=ax²+b形式:

  1. 您至少需要一个表单ax³+bx²+c,而
  2. 这是参数曲线,而不是简单的函数图;对于Bezier曲线,y根本不是x表示,而是两者 xy值由&#34;主参数&#34;控制t
  3. 我们知道像y=ax²+b这样的第二度函数只能模拟抛物线,看图像我们可以看到绘制的曲线看起来就像其中一个(甚至不是一个压扁的抛物线),所以我们可以&#39甚至&#34;有点像&#34;在这种情况下,用二阶函数逼近曲线。

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