项目中要使用有渐变颜色的折线图,所以最近研究了一下,写一个简单的教程,主要是为了能让人明白最主要的功能,主要讲的是实现的思路,所以尽量简化了。
首先,我是用UIBezierPath + CAShapeLayer画线,用CAGradientLayer写渐变图层。
这里只讲一下CAGradientLayer:
初始化方式,以及设置frame跟CAShapelayer没什么区别,具体说一下其他的属性。
colors:图层内渐变的颜色的数组,是CGColor的类别
startPoint和endPoint:可以设置渐变的方向是竖直的从上到下,或是从下到上,或是斜着渐变等。
locations:是CAGradientLayer中颜色渐变区间的数组,如果不设置这个属性,系统会自动帮你设置渐变区间。
例如:_gradientLayer.location = @[@(0.1),@(0.2)],这样的形式。
另外,用UIBezierPath的原因是在于UIBezierPath其实是对Core Graphics框架关于path的进一步封装,所以使用起来比较简单。
其次是对折线图进行细分,我把折线图分为坐标轴X轴和Y轴部分、折线图绘制部分、渐变图层绘制部分,这三部分来完成。
1、X轴和Y轴
首先是找原点,我先将原点距view的左和下的距离设置出来,就很容易能得到原点的坐标,然后通过原点的坐标绘制X轴跟Y轴.
接下来上代码:
在创建X轴跟Y轴的时候,利用Core Graphics绘制文字比较方便,所以把文字跟线条分开绘制。
坐标轴不细说,demo中会有详细的注释。
主要讲一下折线以及渐变图层的绘制。
绘制折线只要将每个数据的坐标点算出来,就很容易了绘制了。
首先,计算X轴以及Y轴的刻度单位。
其次计算数组中每个点的坐标。
其中,path是折线的路径,newPath是渐变图层的路径,lastPointX和lastPointY是为了看最后一个点的位置,得出渐变图层的范围。
然后添加到最后一个点的线。
接着有了折线的路径,以及渐变图层的路径,就可以将这两个路径赋值给layer。
赋值过后,然后将渐变图层的遮罩层设置为CAShapelayer就完成了。
demo:渐变颜色的折线图