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. vue填坑指南之模板的使用
  2. 网站优化——网站索引量骤降从网站优化找原因
  3. java 强制gc_java应用性能调优之详解System的gc垃圾回收方法
  4. ubuntu18.04安装python3.7并将python3指向python3.7
  5. java写七彩文字_【PS精选案例教程】创建一个漂亮的七彩文字
  6. java jstack 工具_java命令之jstack工具
  7. continue语句只用于循环语句中_Java之循环语句、条件判断语句(三目运算符)、break、continue...
  8. vue-element超初级教学
  9. mysql中联合查询
  10. 异步是javascript的精髓
  11. 牛腩新闻发布系统-概要介绍
  12. 交换机(防火墙)配置手册
  13. 参考计算机科学导论的毕业论文,计算机学科导论论文
  14. SU(Seismic Unix)之sgy格式与su格式相互转化
  15. ResourceExhaustedError
  16. 蚂蚁花呗的交易分期(有别于账单分期)
  17. 草料二维码--在线二维码生成器
  18. OpenLayers基础:在IIS中部署并启用CGI
  19. 异常检测 | 基于Siamese网络学习距离函数来定位视频中的异常
  20. Servlet[DispatcherServlet]的Servlet.init()引发异常

热门文章

  1. 记录下我磕磕碰碰的三个月找工作经历,最强技术实现
  2. Excel 固定显示表头 / 列头
  3. echart旭日图_旭日图(echarts)
  4. 2.2 PB-ADV入网过程
  5. 校招 - 行业测评题、图形推理题、逻辑思维面试题,解题技巧汇总
  6. linux grep本地ip,linux grep怎么查ip地址
  7. 打印机显示域服务器,操作打印机提示“active directory域服务当前不可用”怎么办?...
  8. h5页面在新版微信iOS 端出现底部白色导航条
  9. 第三届长安杯解析(2次修订版)镜像+具体解析+个人详细解题过程,涉及多个模块,我会努力把所有写好,可以做一下题目,提升很明显。
  10. 简单的nodejs+socket.io给指定的人发送消息