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);
}

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

转载于:https://www.cnblogs.com/XYQ-208910/p/4868417.html

iOS:quartz2D绘图(绘制渐变图形)相关推荐

  1. Canvas3——绘制渐变图形与绘制变形图形

    1.Canvas绘制渐变图形 (1)绘制线性渐变 createLinearGradient() **CanvasRenderingContext2D**.createLinearGradient()方 ...

  2. iOS:quartz2D绘图(给图形绘制阴影)

    quartz2D既可以绘制原始图形,也可以给原始图形绘制阴影. 绘制阴影时,需要的一些参数:上下文.阴影偏移量.阴影模糊系数 注意:在drawRect:方法中同时调用绘制同一个图形时,在对绘制的图形做 ...

  3. iOS:quartz2D绘图 (动画)

    quartz2D可以用来绘制自己需要的图形,它们绘制出来的是一个静态的图形,那么如何绘制一个动态的图形呢?动态的图形就是动画,所谓动画,其实就是很多张图片在短时间内不停的切换所产生的一种视觉效果.qu ...

  4. HTML5学习笔记14-Canvas绘制渐变图形与绘制变形图形

    1.线性渐变 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...

  5. html5绘制渐变图形-线性渐变

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 绘制渐变图形--Canvas的基本操作

    1.绘制线性渐变 渐变的概念:渐变是指在填充时从一种颜色慢慢过渡到另外一种的颜色. 绘制线性渐变时,需要使用到LinearGradient对象.使用图像上下文对象的createLinearGradie ...

  7. html绘制图形的关键三步,基于HTML5的绘图——绘制简单图形

    绘制矩形 HTML5中实现绘制矩形的效果可以调用上下对象的三个函数fillRect().strokeRect()和clearRect().这些函数的语法格式如下所示: context.fillRect ...

  8. iOS Quartz2D绘图使用篇

    Quartz2D使用 有兴趣可以贴代码看一下跑的效果,就不一一上图了 文章目录 Quartz2D使用 常用的一些函数 栗子

  9. iOS Quartz2D 渐变图形 CGGradient CGShading

    最近在学习iOS Quartz2D二维图形绘制--->渐变效果 Quartz2D 渐变      Quartz提供了两个不透明数据odgago创建渐变: CGShadingRef 和 CGGra ...

最新文章

  1. 2022-2028年中国DMF行业市场研究及前瞻分析报告
  2. 在 Mac OSX 版的 LispBox 环境上安装配置 SBCL 详细过程
  3. java存储cookie_在java中如何用cookies保存数据?
  4. Linux 内存泄露调试工具
  5. .Net 事件类型的实现和推荐做法
  6. 离散化+树状数组求逆序数
  7. 编程之美 求数组中的最长递增子序列
  8. 链表C++ | 从尾部打印头部(使用栈、递归实现)_3
  9. $PollardRho$ 算法及其优化详解
  10. linker command failed with exit code 1 (错误总结)
  11. UITextField的leftView
  12. 简洁的圆形时钟数字时钟+指针时钟(1+X Web前端开发初级 例题)
  13. 剑与家园服务器维护,《剑与家园》杀鸡取卵式运营 如何拯救短命的区服?
  14. 平板电脑安装软件_哪个便签可以横屏?平板电脑横屏便签软件推荐
  15. 基于SVM算法的人脸表情识别
  16. 在阿里云服务器发邮件
  17. Java实现 兔子数问题
  18. Android设置全局字体大小,实现小中大字体功能
  19. IOP、seata、zeebe分布式事务解决方案对比
  20. JAVA JSP城市公交查询系统 jsp公交线路查询系统Java公交查询系统Java公交线路查询

热门文章

  1. L05 Laravel 教程 - 电商实战
  2. 2022年前端面试集锦
  3. LoRaWAN入网参数设置
  4. 照度/感光度(Lux)
  5. 51--可调频率和占空比的PWM波
  6. 1个免费网站教你如何追踪微信实时热点,速速收藏
  7. mysql语句更新顺序_MySQL的Update语句Set顺序问题
  8. python 轨迹分析_Python语言:程序代码分析铅球运动轨迹
  9. Matplotlib绘图库入门(一):pyplot绘图基础
  10. Android中全局搜索(QuickSearchBox)详解(一)