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[] = {startColorComponents[],startColorComponents[],

                              startColorComponents[],startColorComponents[],

                              midColorComponents[],midColorComponents[],

                              midColorComponents[],midColorComponents[],

                              endColorComponents[],endColorComponents[],

                              endColorComponents[],endColorComponents[]

                             };
    //渐变系数(程度)

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

    //创建渐变(参数：颜色空间、颜色分量强度值数组、渐变系数数组、设置的渐变系数个数)

    CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, components, locations, );

    //3.在上下文中画渐变(参数：上下文、渐变、开始点、结束点、渐变模式,默认为0)

    CGContextDrawLinearGradient(context, gradient, CGPointMake(, ), CGPointMake(, ), );

    //渐变模式：

    //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[] = {startColorComponents[],startColorComponents[],

                             startColorComponents[],startColorComponents[],

                             endColorComponents[],endColorComponents[],

                             endColorComponents[],endColorComponents[]

                            };

    //渐变系数数组

    CGFloat locations[] = {0.0,1.0};

    
    //创建渐变对象(参数：颜色空间、颜色分量的强度值数组、渐变系数数组、设置的渐变系数个数)

    CGGradientRef gradient = CGGradientCreateWithColorComponents(colorSpace, components, locations, );

    //3.画渐变(参数：上下文、渐变对象、起点、径向半径、终点、径向半径、渐变模式)

    CGContextDrawRadialGradient(context, gradient, CGPointMake(, ), , CGPointMake(, ), , kCGGradientDrawsBeforeStartLocation);

    //渐变模式：

    //kCGGradientDrawsAfterEndLocation      //向外发散

    //kCGGradientDrawsBeforeStartLocation   //向里发散

    //4.清理

    CGColorSpaceRelease(colorSpace);

    CGGradientRelease(gradient);

}

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

巴特西

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

最新文章

热门文章