Quartz2D实现渐变色

最开始渐变色这里直接给UI要的一张图放在了上面，后来有时间就研究了一下Quartz2D。

 在iOS中常用的绘图框架就是Quartz2D, Quartz2D是CoreGraphics框架的一部分, 强大的二维图像绘制引擎, Quartz2D在UIKit框架中也有很好的集成, UIKit中的组件都是由     CoreGraphics进行绘制的,
    iOS中绘图一般分为以下几个步骤:
    1. 获取绘图上下文// 绘图只能在此方法中调用, 否则无法得到当前图形上下文  - (void)drawRect:(CGRect)rect 
    2. 创建并设置路径
    3. 将路径添加到上下文
    4. 设置上下文的状态
    5. 绘制路径
    6. 释放路径

功能的简单实现，直接贴代码。

//

//  HTQuartz2DView.h

//  网格理财

//

//  Created by 侯孟杰 on 2017/4/12.

//  Copyright © 2017年迈时科技. All rights reserved.

//

#import <UIKit/UIKit.h>

@interface HTQuartz2DView : UIView

@property (nonatomic,assign)CGFloat height;

@end

//

//  HTQuartz2DView.m

//  网格理财

//

//  Created by 侯孟杰 on 2017/4/12.

//  Copyright © 2017年迈时科技. All rights reserved.

//

#import "HTQuartz2DView.h"

@implementation HTQuartz2DView

- (void)drawRect:(CGRect)rect {

    

    CGContextRef context = UIGraphicsGetCurrentContext();

    [self drawLinearGradient:context];

}

//线性渐变色

- (void)drawLinearGradient:(CGContextRef) context{

    //使用RGB颜色空间

    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();

    /*指定渐变色

     space:颜色空间

     components:颜色数组,注意由于指定了RGB颜色空间，那么四个数组元素表示一个颜色（red、green、blue、alpha），

     设计给了两个颜色则这个数组有4*2个元素

     locations:颜色所在位置（范围0~1），这个数组的个数不小于components中存放颜色的个数

     count:渐变个数，等于locations的个数

     */

    CGFloat compoents[8] = {240.0/255.0,118.0/255.0,92.0/255.0,1,

        242.0/255.0,96.0/255.0,111.0/255.0,1,

    };

    CGFloat locations[2] = {0,1.0};

    CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, compoents, locations,2);

    

    /*绘制线性渐变

     context:图形上下文

     gradient:渐变色

     startPoint:起始位置

     endPoint:终止位置

     options:绘制方式,kCGGradientDrawsBeforeStartLocation开始位置之前就进行绘制，到结束位置之后不再绘制，

     kCGGradientDrawsAfterEndLocation开始位置之前不进行绘制，到结束点之后继续填充

     */

    CGContextDrawLinearGradient(context, gradient,CGPointMake(UI_IOS_WINDOW_WIDTH/2,0), CGPointMake(UI_IOS_WINDOW_WIDTH/2,self.height),  kCGGradientDrawsAfterEndLocation);

    

    //释放颜色空间

    CGColorSpaceRelease(colorSpace);

}

//径向渐变色

- (void)drawRadialGradient:(CGContextRef) context{

    //使用rgb颜色渐变空间

    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();

    /*指定渐变色

     space:颜色空间

     components:颜色数组,注意由于指定了RGB颜色空间，那么四个数组元素表示一个颜色（red、green、blue、alpha），

     设计给了两个颜色则这个数组有4*2个元素

     locations:颜色所在位置（范围0~1），这个数组的个数不小于components中存放颜色的个数

     count:渐变个数，等于locations的个数

     */

    CGFloat compoents[8]={

        242.0/255.0,144.0/255.0,100.0/255.0,1,

        242.0/255.0,96.0/255.0,111.0/255.0,1

    };

    CGFloat locations[2]={1.0,0.5};

    CGGradientRef gradient= CGGradientCreateWithColorComponents(colorSpace, compoents, locations,2);

    

    /*绘制径向渐变

     context:图形上下文

     gradient:渐变色

     startCenter:起始点位置

     startRadius:起始半径（通常为0，否则在此半径范围内容无任何填充）

     endCenter:终点位置（通常和起始点相同，否则会有偏移）

     endRadius:终点半径（也就是渐变的扩散长度）

     options:绘制方式,kCGGradientDrawsBeforeStartLocation开始位置之前就进行绘制，但是到结束位置之后不再绘制，

     kCGGradientDrawsAfterEndLocation开始位置之前不进行绘制，但到结束点之后继续填充

     CGContextDrawRadialGradient(CGContextRef cg_nullable c,

     CGGradientRef cg_nullable gradient, CGPoint startCenter, CGFloat startRadius,

     CGPoint endCenter, CGFloat endRadius, CGGradientDrawingOptions options)

     */

    CGContextDrawRadialGradient(context, gradient, CGPointMake(UI_IOS_WINDOW_WIDTH/2,0),0, CGPointMake(UI_IOS_WINDOW_WIDTH/2,self.height), self.height, kCGGradientDrawsAfterEndLocation);

    //释放颜色空间

    CGColorSpaceRelease(colorSpace);

}

@end