曲线拟合一系列线段

时间:2011-08-27 00:21:51

标签: drawing line curve

关于SO有很多曲线拟合问题,但我似乎无法找到一个解决我正在寻找的问题。

场景很简单:我在平板电脑屏幕上捕捉X / Y点。我想将生成的线段绘制为平滑曲线而不是一系列线段。许多应用都是这样做的,例如:Penultimatesketching demo at 0:36)或Autodesk Sketchbook

Bezier曲线算法采用固定数量的点来绘制曲线,并且似乎不能很好地处理多个多点。任何人都可以指出这样做的算法吗?

2 个答案:

答案 0 :(得分:4)

拟合曲线实际上是样条曲线而不是贝塞尔曲线。但是,您可以使Bezier曲线看起来像样条曲线(样条曲线没有控制点)。我已经对这个问题进行了大量搜索,并为自己介绍/实现了许多过于复杂的算法,最后我发现任务比我想象的要容易得多(我觉得必须这样做,我发誓:))< / p>

Here is 关于此的最佳说明,我将摘自本文:

在大多数实现中,Bezier曲线绘制函数将两个控制点和一个点本身(对于一个段)作为参数,所以您需要的只是迭代地找到新段的控制点(我认为最好更新最后一段,并在每个新点的曲线末尾绘制一个新的):

JavaScript代码(t表示最简单的情况是曲线的常量平滑度):

function getControlPoints(x0,y0,x1,y1,x2,y2,t){
    var d01=Math.sqrt(Math.pow(x1-x0,2)+Math.pow(y1-y0,2));
    var d12=Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2));
    var fa=t*d01/(d01+d12);
    var fb=t*d12/(d01+d12);
    var p1x=x1-fa*(x2-x0);
    var p1y=y1-fa*(y2-y0);
    var p2x=x1+fb*(x2-x0);
    var p2y=y1+fb*(y2-y0);  
    return [p1x,p1y,p2x,p2y];
}

请务必阅读并理解该文章,我认为这是最好,最短,最清晰的文章。

答案 1 :(得分:0)

查看样条线。它们基本上将一组控制点作为输入并输出一组三次曲线,其中每条曲线与前一曲线相切,给出平滑的轮廓。

请参阅:http://en.wikipedia.org/wiki/Cubic_Hermite_spline