drawing - 对一系列线段进行曲线拟合

Question

SO 上有很多曲线拟合问题，但我似乎找不到一个可以解决我正在寻找的问题。

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

贝塞尔曲线算法需要固定数量的点来绘制曲线，并且似乎不适用于大量的多个点。谁能指出一种可以很好地做到这一点的算法吗？

Answer 1

Fit-Curve 实际上是样条曲线而不是贝塞尔曲线。但是，您可以使贝塞尔曲线看起来像样条线(样条线没有控制点)。我在这个问题上进行了很多搜索，并向自己介绍/实现了很多过于复杂的算法，最后我发现这个任务比我想象的要容易得多(我确实觉得它必须如此，我发誓:))

<强> Here is 对此最好的描述，我将从这篇文章中摘录:

在大多数实现中，贝塞尔曲线绘制函数采用两个控制点和一个点本身(对于线段)作为参数，因此您需要的一切只是迭代地查找新线段的控制点(我认为最好更新最后一段并为每个新点在曲线末尾绘制一个新段):

这里是 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];
}

请务必阅读并理解这篇文章，我认为这是一篇最好、最短、最清晰的文章。