CGContextDrawRadialGradient这个辐射渐变函数之前没遇到过，现在好好解析一下：
屏幕快照 2016-04-07 14.07.18.png
第一个参数CGContextRef：相当于画笔
第二个参数CGGradientRef：渐变色值，由颜色空间、渐变色数组、位置数组共同构成。
第三个参数startCenter：外圈的中心圆点
第四个参数startRadius：外圈的半径
第五个参数endCenter：内圈的中心圆点
第六个参数endRadius：内圈的半径
第七个参数CGGradientDrawingOptions：渐变填充选项
为了测试这个函数，我写了一个测试Demo：
一个继承于UIView的MyView，MyView.m文件内容：
屏幕快照 2016-04-07 14.30.26.png
屏幕快照 2016-04-07 14.31.03.png
屏幕快照 2016-04-07 14.31.25.png
我定义了三个颜色：红、绿、蓝，初始化时传入的size为（300，300）看看它们的辐射渐变都是什么样的。
效果一：
start：centerPoint end：centerPoint
startRadius：radius endRadius：50
options：kCGGradientDrawsBeforeStartLocation
屏幕快照 2016-04-07 14.40.44.png
效果二：
相对于一仅仅改变options为kCGGradientDrawsAfterEndLocation
屏幕快照 2016-04-07 14.43.25.png
效果三：
start：centerPoint end：CGPointMake(centerPoint.x,self.frame.size.height)
startRadius：radius endRadius：radius-50
options：kCGGradientDrawsAfterEndLocation
（相对于效果二，内圈圆心的y增加了150，内圈的半径增加了50）
屏幕快照 2016-04-07 14.57.09.png
效果四：
和效果三相比仅仅修改了options为KCGGradientDrawsBeforeStartLoaction。
屏幕快照 2016-04-07 14.59.24.png
这个有意思了，有点像手电筒了。为了看得明显点，调整一下半径继续测试。
效果五：
start：centerPoint end：CGPointMake(centerPoint.x,self.frame.size.height)
startRadius：radius-50 endRadius：radius-80
options：kCGGradientDrawsAfterEndLocation
屏幕快照 2016-04-07 15.01.36.png
此时能看出来这是一个立体的形状了吧？
如果还没看出来，好吧我再调一下尺寸进行测试。
效果六：
与效果五的唯一不同是：
startRadius：radius-100 endRadius：radius-50
屏幕快照 2016-04-07 15.05.06.png
这下能看出来是立体图了吧？看不出来我也没办法了。。
到这里我忽然有个想法，如果我外圈的半径小，内圈的半径大，那么从外圈投影向内圈的效果应该是由外向内依次显示：蓝、绿、红。测试搞一下.
效果七：
start：centerPoint end：centerPoint
startRadius：radius-100 endRadius：radius-50（外圈小，内圈大）
options：kCGGradientDrawsBeforeStartLocation
屏幕快照 2016-04-07 15.41.07.png
效果八：
相对于效果七我们改一下options，KCGGradientDrawAfterEndLoaction。
先大胆猜一下：我们设置的option是辐射end后面的，也就是说起始于外圈，辐射向内圈，并且自内圈延伸辐射，那么就是内部黑色的圆，紧接着是红色，然后是绿色，接着是蓝色，向外部延伸就是无限大的蓝色的视图。
屏幕快照 2016-04-07 16.28.06.png
总体实现效果如下：
外圈小，内圈大：
屏幕快照 2016-04-07 15.52.59.png
外圈大，内圈小：
屏幕快照 2016-04-07 16.06.34.png
加油，小处也是知识点。
网友评论