Mui*_*uin 5 curve drawing line
有很多关于 SO 的曲线拟合问题,但我似乎无法找到解决我正在寻找的问题的问题。
场景很简单:我在平板电脑屏幕上捕获 X/Y 点。我想将生成的线段绘制为平滑曲线而不是一系列线段。许多应用程序都这样做,例如:Penultimate(0:36 处的草图演示)或Autodesk Sketchbook。
贝塞尔曲线算法采用固定数量的点来绘制曲线,并且似乎不能很好地处理多个多点。任何人都可以指出一个做得很好的算法吗?
事实上,拟合曲线是样条曲线而不是贝塞尔曲线。但是,您可以使贝塞尔曲线看起来像样条线(样条线没有控制点)。我对这个问题进行了很多搜索,并向自己介绍/实现了很多过于复杂的算法,最后我发现这个任务比我想象的要容易得多(我确实觉得它必须如此,我发誓:))
这是对此的最佳描述,我将从这篇文章中摘录:
在大多数实现中,贝塞尔曲线绘制函数采用两个控制点和一个点本身(对于线段)作为参数,因此您需要的只是迭代地查找新线段的控制点(我认为最好更新最后一个线段和为每个新点在曲线末尾绘制一个新点):
这是 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];
}
Run Code Online (Sandbox Code Playgroud)
请务必阅读并理解这篇文章,我认为这是一篇最好、最短、最清晰的文章。
检查样条线。它们基本上采用一组控制点作为输入并输出一组三次曲线,其中每条曲线与前一条曲线相切,给出平滑的轮廓。
请参阅: http: //en.wikipedia.org/wiki/Cubic_Hermite_spline