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. 服务器无效响应状态码12029,使用wininet发送http请求时出现12029无法与服务器建立连接...
  2. MySQL---数据库从入门走向大神系列(十二)-构建MVC项目
  3. 携程Apollo动态配置日志级别
  4. 程序2:word count
  5. [优先队列][堆] Luogu P4505 组合子逻辑
  6. Windows批处理命令学习
  7. OJ1061: 顺序输出各位数字(C语言)(谈程序优化问题及pow函数耗时问题)
  8. nyoj35——逆波兰表达式
  9. 数据恢复技术在计算机犯罪侦查中的应用,浅谈数据恢复技术在计算机犯罪侦查中的应用...
  10. 分库分表学习总结(5)——有关分库分表相关面试题总结
  11. 情爱宝典:识破男女间的“放电”信号
  12. 使用现有模板制作一个简单的H5页面
  13. 锚杆拉拔试验弹性模量计算_公路工程试验检测项目有哪些?
  14. vscode,js代码片段配置
  15. Chrome 浏览器扩展神器暴力猴
  16. 显示技术发展方向:柔性化、薄膜化、微小化、阵列化
  17. 迅捷会员管理系统v1.7免费版正式发布了-为创业而生
  18. 什么是项目工作说明书?
  19. 纯CSS下拉导航代码
  20. 电脑术语中:directory 和 folder 的区别

热门文章

  1. 数据结构实验之查找与排序
  2. Ubuntu系统切换五笔输入法
  3. MSVC X64 函数中的 RSP, RBP 和 Calling Convention
  4. Chrome源码剖析 上--多线程模型 进程通信 进程模型
  5. Chrome播放视频时只有声音没有画面
  6. RDD与MapReduce对比
  7. r710服务器系统故障排除,DELL R710服务器安装windows sever2008 故障排除经历(一)硬件排错...
  8. Java面试题---第四阶段
  9. 华为清理34+老员工,你怎么看待这种狼性文化?
  10. 云宏WinCloud前端工程师告诉你什么是UI扁平化