Nam*_*ess 14 javascript math svg graph raphael
我正在使用带有RaphaelJS的javascript通过输出到SVG的随机点绘制一条平滑线.该线严格水平,不会在X轴返回.目前,我使用立方贝塞尔曲线从一点到另一点画线.
问题是,线条看起来不够好.两条曲线在一个点处具有难看的连接,其中一条曲线结束而另一条曲线开始,在关节中具有相当随机的角度.如何使前一曲线平滑地转换为下一曲线,同时仍保持线路通过给定点？
如果要通过点绘制线条,则需要插值.Beziers是具有曲线外控制节点的三次曲线,但是三次样条曲线是通过n个点的一组三次曲线,每个曲线从每个曲线到下一个曲线都有平滑的变化.有关数学的更多详细信息,请参阅维基百科文章.
要通过一组点构造三次样条,遗憾的是必须执行迭代过程; 你基本上是制作n-1个三次曲线并将它们的参数匹配在一起,这样你就可以得到n + 1个联立方程.完成一次操作后,当您移动点数时,可以使用以前的解决方案作为起点.
要在Raphael中执行此操作,您需要生成三次样条曲线,然后计算每个线段的等效Bezier控制值.
有一些javascript可以为你计算三次样条,例如 JavaScript中的Cubic样条(通过CoffeeScript).
三次样条的替代方法是将三次(或更高)多项式拟合到几个点的每个集合; 例如立方到每4个点,包括重叠.因此,点10-13使线的立方从11到12.它不会像三次样条那样平滑,但它应该更接近.这非常类似于三次样条曲线,但没有方程式求解曲线参数以使一切顺利.
分段多项式的问题在于它使用高阶多项式,这是不稳定的,当点不在多项式线上或点在一起时,你可以得到大的扭结和摆动.
要在Raphael中绘制这个,你可能最好只是更频繁地采样线并使用直线绘制它.
一个重要的考虑因素是你想要绘制什么样的线条.如果您只想要一条平滑的线条,请使用三次样条曲线.但是如果您正在绘制统计数据或某些其他特定类型的线,您可能最好不要查看高斯分解或其他事物:立方样条是三次多项式(ax 3 + bx 2 + cx + d = 0),因此您无法近似正弦曲线很好(音频/信号),或高斯(信号/统计),或指数(衰减曲线,长尾统计).
| 归档时间： |
|
| 查看次数： |
13433 次 |
| 最近记录： |