ios 画线平滑_iOS开发之连续平滑曲线图

前言

连续平滑曲线的需求，在项目中经常会遇到，有很多种方式可以画出来，网上也有很多教程，但是总是不能画出自己满意的曲线，无奈最后还是得自己造轮子，这里分享一种平滑曲线图的实现方式，希望可以作为一个合格的砖头，欢迎大家留言交流

思路

这里绘制曲线图用到 CAShapeLayer、UIBezierPath关于贝塞尔曲线，这里不过多介绍。有需求的移步贝塞尔曲线一篇就够了。我们采用3阶贝塞尔曲线来绘制曲线图

连续平滑曲线

连续平滑在数学中的概念就是 一阶连续可导，理解起来就是，在锚点的位置，前一段曲线的切线跟后一段曲线的切线共线，在贝塞尔曲线中表现为锚点跟锚点前后两个控制点共线。对于锚点P(i) 用 Pc1(i)、Pc2(i) 表示 P(i-1)-P(i) 之间的三次贝塞尔曲线的两个控制点。则有

1)Pc2(i)、P(i)、Pc1(i+1) 三点共线，Pc2(i+1)、P(i+1)、Pc1(i+2)三点共线。

为了更好的拟合锚点的走势，我们把 1)中确定的线取与锚点前后点的斜率一致，这样让锚点的走势在曲线的走势中体现出来。即

2) Pc2(i) - P(i) - Pc1(i+1) 平行于 P(i-1) - P(i+1)

最后只需要确定控制点 x坐标，就可以确定两个控制点了，两锚点x坐标差 stepX = P(i).x - P(i -1).x，两个控制点的x坐标 距离锚点的距离在[0-stepX/2] 之间，越小越接近直线，取多少就看个人喜好了。我们取 stepX/3，即

3) Pc1(i).x = P(i-1)+ (P(i).x - P(i -1).x)/