clay-core
Version:
Provide a more friendly web-side drawing interface!
88 lines (84 loc) • 3.95 kB
HTML
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../../libs/easycss-1.3.1.min.css">
<link rel="stylesheet" href="../../libs/prettify.css">
<link rel="stylesheet" href="../../doc.css">
<script src="../../libs/prettify.js"></script>
</head>
<body onload="prettyPrint()">
<header>
曲线插值
</header>
<p>
给定若干个不连续的点，在这些点之间插入足够的点，来使得这些点连接起来可以反映最初那些点的走势。
</p>
<h2>
Hermite
</h2>
<p>
hermite三次插值是在确定二个点和二个点的斜率前提下，用一个y=ax
<sup>3</sup>+bx
<sup>2</sup>+cx+d的三次多项式来求解出插值函数。
</p>
<pre class='prettyprint lang-js'>var interFun=$$.hermite();</pre>
<p>
上面获取了这个插值函数，你可以参考下面的方法修改或采用默认的配置：
</p>
<pre class='prettyprint lang-js'>interFun.setU(t);</pre>
<p>
设置张弛系数，应该在点的位置设置前设置。该参数用于调整曲线走势，默认数值t=0，分水岭t=-1，|t-(-1)|的值越大，曲线走势调整的越严重。返回插值函数。
</p>
<pre class='prettyprint lang-js'>interFun.setP(x1, y1, x2, y2, s1, s2);</pre>
<p>
设置已经确定的二个点和二个点的斜率，必须设置。返回插值函数。
</p>
<p>
配置好需要配置的选项后，interFun就是所求的插值函数，比如你现在想知道点x3(x1<=x3<=x2)处的y值：
</p>
<pre class='prettyprint lang-js'>y=interFun(x3);</pre>
<h2>
Cardinal
</h2>
<p>
当插值点数量增加的时候，很容易带来收敛困难，也就是Runge现象，因此在大多数情况下，三次插值已经足够用了。在需要插值的点的个数比较多的时候，我们提供了下面的分段Hermite法，也就是Cardinal插值法。
</p>
<pre class='prettyprint lang-js'>var interFun=$$.cardinal();</pre>
<p>
第一步依旧是获取插值函数，你可以调用下面的方法修改或采用默认的配置：
</p>
<pre class='prettyprint lang-js'>interFun.setU(t);</pre>
<p>
setU方法和Hermite中一样，不再赘述。
</p>
<pre class='prettyprint lang-js'>interFun.setP(points);</pre>
<p>
setP表示设置若干个需要插值的点，points是一个数组，长度不小于2，里面的成员应该是一个数组，下面看看几个例子：
</p>
<pre class="prettyprint lang-js error">interFun.setP([1, 2])、interFun.setP([[1, 2]])</pre>
<pre class="prettyprint lang-js bingo">interFun.setP([[1, 2], [3, 4]])、interFun.setP([[1, 2], [3, 4], [5, 6]])</pre>
<p>
配置好以后，比如x=a，其中a在需要插值的点之间（边界也可以），你可以这样求解出y值：
</p>
<pre class='prettyprint lang-js'>y=interFun(a);</pre>
<h2>
catmull-rom
</h2>
<p>
上面两种情况，都是基于函数的情况，有时候，我们需要支持非函数的情况。
</p>
<p>
给定四个点p0,p1,p2,p3，计算出p1,p2之间的插值，其中的p0,p3为控制点，对于这四个点，没有特殊要求。
</p>
<pre class='prettyprint lang-js'>var interFun=clay.catmullRom()
// 设置四个点
.setD(p1, p2, p3, p4);</pre>
<p>
和前面两个插值方法不同的是，获取插值坐标不是通过x求出y，而是提供一个偏移量deep（范围是[0, 1]）来求解插入的坐标（x, y），因为不是函数，这样应该是容易理解的：
</p>
<pre class='prettyprint lang-js'>p=interFun(deep);</pre>
</body>
</html>