2016笔记——CGContextDrawRadialGradi

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

加油，小处也是知识点。