曲线拟合一系列线段 [英] Curve fitting a series of line segments

问题描述

关于SO的曲线拟合问题很多，但我似乎找不到能满足我所寻找需求的问题.

There are a lot of curve fitting questions on SO but I can't seem to find one that addresses what I'm looking for.

场景很简单:我在平板电脑屏幕上捕获X/Y点.我想将生成的线段绘制为平滑曲线，而不是一系列线段.许多应用程序都这样做，例如:倒数第二个(在0:36处演示演示)或

The scenario is simple: I capture X/Y points on a tablet screen. I'd like to draw the resulting line segments as a smooth curve instead of a series of line segments. Many apps do this, for example: Penultimate (sketching demo at 0:36) or Autodesk Sketchbook.

Bezier曲线算法需要固定数量的点才能绘制曲线，而且似乎不适用于许多多个点.谁能指出一个做得很好的算法?

Bezier curve algorithms take a fixed number of points to draw a curve and don't seem to work well with numerous multiple points. Can anyone point to an algorithm which does this well?

推荐答案

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

Fit-Curve is a Spline and not a Bezier Curve in fact. However, you can make a Bezier Curve to look like your Spline (Splines have no control points). I've searched a lot on this problem and introduced/implemented a lot of too-complex algorithms to myself, and finally I found that the task is much easier than I supposed (I do felt it must to, I swear :) )

此处 是对此的最好描述，我将从本文摘录:

Here is the best description on that, I'll take an excerpt from this article:

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

In most implementations, Bezier Curve drawing function takes two control points and a point itself (for a segment) as an arguments, so everything you need is just iteratively finding the control points for new segments (I think it is best to update last segment and draw a new one in the end of curve for every new point):

以下是JavaScript代码(最简单的情况是t是曲线的恒定平滑度):

Here comes the JavaScript code (t for a simplest case is a constant smoothness of your curve):

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];
}

请务必阅读并理解该文章，我认为这是一篇最佳，最短和最清晰的文章.

Please be sure to read and understand the article, I think it is a best, shortest and clearest one.

这篇关于曲线拟合一系列线段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！