我想在JavaScript中实现三次插值,以使用画布绘制曲线。这个想法是在画布上单击以添加点,并且每次更改都会调用一个重绘函数,该函数将为给定的单击点计算要在画布中绘制的点。
我找到了一些例子,例如:
http://snipplr.com/view/727/cubic-interpolation/
http://www.paulinternet.nl/?page=bicubic
http://dzone.com/snippets/cubic-interpolation
但我不知道如何使用此代码:/
根据这个简单的例子,有4点:
float cubic_interpolate( float y0, float y1, float y2, float y3, float mu ) {
float a0, a1, a2, a3, mu2;
mu2 = mu*mu;
a0 = y3 - y2 - y0 + y1; //p
a1 = y0 - y1 - a0;
a2 = y2 - y0;
a3 = y1;
return ( a0*mu*mu2 + a1*mu2 + a2*mu + a3 );
}
我没有得到的第一个是参数。我有4分,其值在0到1之间。那么我的返回值是多少?还是更好的亩?y0 ... y3仅仅是点或类似y0 [0]的点的y值是x而y0 [1]是y的点吗?我需要的是一种算法,该算法具有一些点和ax值作为参数,返回值应该是y值。
像这样的东西:
function calculateCubic( points ){
var pointsToDraw = [];
getValue(p1,p2,p3,p4,xCoordinate){
var yCoordinate;
yCoordinate = ...
...
return yCoordinate;
}
for(var i = 0; i<p.length-3;i++){
var stepLen = ( p[i+1][0] - p[i][0] ) / 100;
for( var s = p[i][0]; s <= p[i+1][0] ;s += stepLen ){
pointsToDraw[pointsToDraw.length] = getValue(p[i],p[i+1],p[i+2],p[i+3],p[i][0]);
}
}
return pointsToDraw;
}
谁能帮助我理解代码片段并将其用于我的问题?
感谢您的建议!
您发布的链接中的示例代码都是4点或2点和2个导数的三次插值。
“ mu”是您要评估y值的参数。输入y0,y1,y2和y3是4个输入点的y坐标。通过将x0,x1,x2和x3传递给函数,您可以执行相同的操作来评估参数'mu'的x值。
您说过要具有一个将x值作为参数输入并取回y值作为输出的函数。仅当您以显式形式(即y = f(x))表示曲线时,才可能这样做。但是,显式形式不能表示具有相同x值的多个y值的曲线。因此,它们通常不是表示曲线的好方法。参数形式是表示曲线的更好方法。例如,将2D曲线C(t)表示为C(t)=(x(t),y(t))或将3D曲线表示为C(t)=(x(t),y( t),z(t))。用(x(t),y(t))=(r cos(t),r sin(t))表示一个完整的圆是参数形式的一个很好的例子。
如果要绘制连接一系列数据点的平滑曲线,最简单的方法是实现Catmull Rom样条曲线或Overhauser样条曲线。它们都是三次Hermite曲线的特殊形式。在此处阅读有关三次Hermite曲线的Wikipedia页面,并转到同一页面中的Catmull Rom样条曲线部分,您将能够知道如何创建对数据点进行插值的Catmull Rom样条曲线,以及如何求值以获取(x,y )值以在画布上绘制样条线。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句