Quartz2D实现渐变色

    xiaoxiao2021-04-02  31

    最开始渐变色这里直接给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颜色空间,那么四个数组元素表示一个颜色(redgreenbluealpha),

         设计给了两个颜色则这个数组有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颜色空间,那么四个数组元素表示一个颜色(redgreenbluealpha),

         设计给了两个颜色则这个数组有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

    转载请注明原文地址: https://ju.6miu.com/read-665766.html

    最新回复(0)