iOS：quartz2D绘图（绘制渐变图形）

quartzD可以用来绘制渐变图形,即图形向外或向内发散，会变得越来越模糊。

渐变分为线性渐变和径向渐变，所谓线性渐变，就是图形以线的方式发散，发散后一般呈现出矩形的样子；而径向渐变，就是以半径的大小往外或往内发散，发散后呈现出圆形的样子。

渐变系数：0.0~1.0

渐变模式：可以进行与操作

  kCGGradientDrawsBeforeStartLocation = (1 << 0),  //向内渐变

  kCGGradientDrawsAfterEndLocation = (1 << 1)       //向外渐变

具体举例如下：

 

1.自定义一个视图类DemoView,并将控制器视图关联该自定义类，在这个自定义类中重写- (void)drawRect:(CGRect)rect方法，绘制渐变图形的调用方法都写在里面。

    

 

//绘制渐变图形的调用方法

- (void)drawRect:(CGRect)rect
{
    //1.获取绘图的上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    
    //线性渐变
    [self drawLinarGradient:context];
    
    //径向渐变
    [self drawRadialGradient:context];
}

2.绘制渐变图形：线性渐变和径向渐变

   绘制线性渐变图形：

#pragma mark -画线性渐变

-(void)drawLinarGradient:(CGContextRef) context
{

    //2.创建一个渐变
    //2.1 创建一个颜色空间
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    
    //2.2 设置颜色
    //设置开始颜色
    UIColor *startColor = [UIColor redColor];
    const CGFloat *startColorComponents = CGColorGetComponents([startColor CGColor]);
    
    //设置中间颜色
    UIColor *midColor = [UIColor greenColor];
    const CGFloat *midColorComponents = CGColorGetComponents([midColor CGColor]);
    
    //设置结束颜色
    UIColor *endColor = [UIColor blueColor];
    const  CGFloat *endColorComponents = CGColorGetComponents([endColor CGColor]);

    //颜色分量的强度值的数组
    CGFloat components[12] = {startColorComponents[0],startColorComponents[1],
                              startColorComponents[2],startColorComponents[3],
        
                              midColorComponents[0],midColorComponents[1],
                              midColorComponents[2],midColorComponents[3],
        
                              endColorComponents[0],endColorComponents[1],
                              endColorComponents[2],endColorComponents[3]
                             };
    //渐变系数(程度)
    CGFloat locations[3] = {0.0,0.5,1.0};
    
    
    //创建渐变(参数：颜色空间、颜色分量强度值数组、渐变系数数组、设置的渐变系数个数)
    CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, components, locations, 3);
    
    
    //3.在上下文中画渐变(参数：上下文、渐变、开始点、结束点、渐变模式,默认为0)
    CGContextDrawLinearGradient(context, gradient, CGPointMake(100, 100), CGPointMake(100, 200), 0);
    
    
    //渐变模式：
    //kCGGradientDrawsAfterEndLocation      //向内发散
    //kCGGradientDrawsBeforeStartLocation   //向外发散
    
    
    //4.对creat创建的对象必须清理(避免内存泄露)
    CGColorSpaceRelease(colorSpace);
    CGGradientRelease(gradient);
}

绘制的线性渐变图形截图为：

   绘制径向渐变图形：

#pragma mark -画径向渐变

-(void)drawRadialGradient:(CGContextRef) context
{
    
    //2.创建一个渐变
    //2.1 创建一个颜色空间
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    
    //2.2 设置开始颜色和结束颜色
    UIColor *startColor = [UIColor redColor];
    const CGFloat *startColorComponents = CGColorGetComponents([startColor CGColor]);

    UIColor *endColor = [UIColor whiteColor];
    const  CGFloat *endColorComponents = CGColorGetComponents([endColor CGColor]);
    
    //颜色分量的强度值数组
    CGFloat components[8] = {startColorComponents[0],startColorComponents[1],
                             startColorComponents[2],startColorComponents[3],
                             endColorComponents[0],endColorComponents[1],
                             endColorComponents[2],endColorComponents[3]
                            };

    //渐变系数数组
    CGFloat locations[2] = {0.0,1.0};
    
    //创建渐变对象(参数：颜色空间、颜色分量的强度值数组、渐变系数数组、设置的渐变系数个数)
    CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, components, locations, 2);
    
    
    //3.画渐变(参数：上下文、渐变对象、起点、径向半径、终点、径向半径、渐变模式)
    CGContextDrawRadialGradient(context, gradient, CGPointMake(200, 400), 20, CGPointMake(200, 400), 40, kCGGradientDrawsBeforeStartLocation);

    //渐变模式：
    //kCGGradientDrawsAfterEndLocation      //向外发散
    //kCGGradientDrawsBeforeStartLocation   //向里发散

    //4.清理
    CGColorSpaceRelease(colorSpace);
    CGGradientRelease(gradient);
}

绘制的径向渐变图形截图为：