将SVG曲线拟合为多项式

时间:2012-01-07 20:39:02

标签: javascript graphics svg

假设我有像x²或2x +3x²这样的函数,那么如何创建适合这些函数的SVG路径呢?

根据我对 SVG Bezier 曲线的有限理解,我相信我在寻找 for是一种构造贝塞尔控制点的简单技术,可确保结果图符合给定函数。您可以安全地假设(如果您还没有猜到)我是图形编程的新手。我知道像gnuplot这样的框架可以执行这种类型的插值,但我正在寻找更多关于如何使用 SVG JavaScript 进行手动操作的解释。< / p>

编辑:完全符合并非严格要求,但结果图必须合理准确(出于教学目的)。

2 个答案:

答案 0 :(得分:9)

<?xml version="1.0" standalone="no"?>

SVG提供2阶和3阶的Bézier曲线,对于二次和三次多项式,它应该足够好。

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="20cm" height="20cm" viewBox="0 0 1000 1000"
    xmlns="http://www.w3.org/2000/svg" version="1.1">
  <style type="text/css"><![CDATA[
    .axis { fill: none; stroke: black; stroke-width: 3; }
    .tick { fill: none; stroke: black; stroke-width: 1; }
    .fun1 { fill: none; stroke: blue; stroke-width: 2; }
    .fun2 { fill: none; stroke: red; stroke-width: 2; }
  ]]></style>
  <polyline class="axis" points="0,500 1000,500" />
  <polyline class="tick" points="0,490 0,510" />
  <polyline class="tick" points="100,490 100,510" />
  <polyline class="tick" points="200,490 200,510" />
  <polyline class="tick" points="300,490 300,510" />
  <polyline class="tick" points="400,490 400,510" />
  <polyline class="tick" points="600,490 600,510" />
  <polyline class="tick" points="700,490 700,510" />
  <polyline class="tick" points="800,490 800,510" />
  <polyline class="tick" points="900,490 900,510" />
  <polyline class="tick" points="1000,490 1000,510" />
  <polyline class="axis" points="500,0 500,1000" />
  <polyline class="tick" points="490,0 510,0" />
  <polyline class="tick" points="490,100 510,100" />
  <polyline class="tick" points="490,200 510,200" />
  <polyline class="tick" points="490,300 510,300" />
  <polyline class="tick" points="490,400 510,400" />
  <polyline class="tick" points="490,600 510,600" />
  <polyline class="tick" points="490,700 510,700" />
  <polyline class="tick" points="490,800 510,800" />
  <polyline class="tick" points="490,900 510,900" />
  <polyline class="tick" points="490,1000 510,1000" />

取y =x² - 4,端点(-3,5)和(3,5);切线是y = -6x - 13和y = 6x - 13.将一个Q控制点放在两个切线上,位于(0,-13)。这应该适用于任何二次方。

  <path class="fun1" d="M200,0 Q500,1800 800,0" />

立方体有点琐碎。当y =(x³-9x)/ 16从(-5,-5)到(5,5)时,切线是y =(33x + 125)/ 8和y =(33x-125)/ 8.看到曲线必须以斜率-9/16通过(0,0),这是一个简单的计算,可以找到C个控制点(-5 / 3,35 / 4)和(5 / 3,35 / 4) 。在大多数情况下,这可能不是手工操作,但我认为这种方法在数值上应该可以用于任何其他立方体 - 两个变量用于控制点位于每个切线的距离,以及两个约束强制特定的点和方向。

  <path class="fun2" d="M0,1000 C333,-375 667,1375 1000,0" />

Animated Bézier Curves在我解决这些问题时非常有帮助。)

</svg>

答案 1 :(得分:0)

我是来这里寻找公式的,但是我找到了答案。

对于三次贝塞尔曲线,您需要4个点:P0 Pc0 Pc1 P1

We consider x0 < x1, f(x) = ax³ + bx² + cx + d and f'(x) = 3ax² + 2bx + c.

因此对于公式,我们有:

Equations form A或(等于)Equations form B

我希望这对其他人有帮助。