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. lamda表达式python_Python--13 lambda表达式
  2. Windows Azure Virtual Network (6) 设置Azure Virtual Machine固定公网IP (Virtual IP Address, VIP) (1)...
  3. J-Focus动画应用框架使用教程
  4. 赛道一出,今后无需再熬夜
  5. Installation error: INSTALL_FAILED_CANCELLED_BY_USER
  6. maven集成tomcat进行web应用测试
  7. Linux系统之更改默认块大小
  8. 2020CCPC(威海) - Labyrinth(bfs+思维)
  9. 产品经理如何让程序员放下手中的刀?
  10. 解决Maven的jar包冲突问题
  11. 学习 springboot 中出现的问题
  12. Delphi、Lazarus保留字、关键字详解
  13. visual studio code安装
  14. 大数据智能推荐系统原理介绍
  15. Windows清理C盘空间
  16. java打好基础的100道题库(勇敢牛牛不怕困难)
  17. 微任务,宏任务,DOM渲染的执行顺序
  18. 【Android】利用WindowsManager悬浮窗播放本地视频以及下载线上视频保存在本地
  19. python rot13解密_用Python实现的rot13编解码
  20. 【分享】国内著名互联网企业PHP笔试题

热门文章

  1. python迭代遍历_迭代遍历思维
  2. 新手真无线蓝牙耳机怎么选?大神推荐高颜值时尚主流蓝牙耳机推荐
  3. nuke linux 插件,NUKE插件:通过环境变量设置NUKE GIZMO插件
  4. Unity UI跟随鼠标移动
  5. maven、md5、git学习
  6. 二层技术——点对点协议ppp以及NBMA网络MGRE的tunnel隧道技术以及二层综合实验
  7. MKS Robin E3D V1.1 Klipper固件使用说明书
  8. 暴雪战网下载各个版本与修改默认登陆地点方法
  9. C语言求一元二次方程根
  10. leaflet实现风场流动