通过随机点绘制好看的Bezier曲线

Question

我正在使用带有RaphaelJS的javascript通过输出到SVG的随机点绘制一条平滑线。 该线严格水平，不会返回X轴。 目前，我使用立方贝塞尔曲线从一点到另一点画线。

问题是，线条看起来不够好。两条曲线在一个点处具有难看的连接，其中一条曲线结束而另一条曲线开始，在关节中具有相当随机的角度。 如何使前一曲线平滑地转换为下一曲线，同时仍保持线路通过给定点？

Answer 1

Catmull-Rom曲线适用于通过点。 http://schepers.cc/getting-to-the-point

Answer 2

立方样条

如果要绘制线到点，则需要插值。 Beziers是具有曲线外控制节点的三次曲线，但是三次样条曲线是通过n个点的一组三次曲线，每个曲线从每个曲线到下一个曲线都有平滑的变化。有关数学的更多详细信息，请参阅Wikipedia article。

要通过一组点构造三次样条，遗憾的是必须执行迭代过程;你基本上是制作n-1个三次曲线并将它们的参数匹配在一起，这样你就可以得到n + 1个联立方程。完成一次操作后，当您移动点数时，可以使用以前的解决方案作为起点。

要在Raphael中执行此操作，您需要生成三次样条曲线，然后计算每个线段的等效Bezier控制值。

例如，有一些javascript片段可以为你计算三次样条曲线 Cubic splines in JavaScript (via CoffeeScript)

分段多项式

三次样条的替代方法是将三次（或更高）多项式拟合到几个点的每个集合;例如立方到每4个点，包括重叠。因此，点10-13使线的立方从11到12.它不会像三次样条那样平滑，但它应该更接近。这非常类似于三次样条曲线，但没有方程式求解曲线参数以使一切顺利。

分段多项式的问题在于它使用了更高阶的多项式，这是不稳定的，当点不在多项式线上或者点在一起时，你可以得到大的扭结和摆动。

要在Raphael中绘制这个，你可能最好只是更频繁地对线进行采样并使用直线绘制它。

线形

一个重要的考虑因素是你想要绘制什么样的线条。如果您只想要一条平滑的线条，请使用三次样条曲线。但是如果你要绘制统计数据或某些其他特定类型的线，你可能最好不要考虑高斯分解或其他事情：立方样条是三次多项式（ax ³ + bx ² + cx + d = 0），因此您无法很好地逼近正弦曲线（音频/信号），或高斯（信号/统计）或指数（衰减曲线，长尾统计）。

Answer 3

如何平均切点角度？这摆脱了'难看的联合'。

Answer 4

我建议你拿出你的Foley和van Dam 交互式计算机图形基础，然后看一下参数曲线的Hermite表格。 Hermite曲线由两个端点（曲线通过）和两个切线矢量定义，这两个矢量控制曲线在通过这些点时的方向。它很容易转换成Bezier形式，只有几个矩阵乘法，但优点是：对于平滑连接，曲线的相邻部分将在重合点使用完全相同的切线，而对于Beziers，您必须强制三个点共线。