Quartz2D详细使用包括画线,画文字 图片 裁剪 重绘 简单动画

原创 2015年11月18日 15:24:51

基本图形的绘制 包括: 代码画线,画文字 图片 裁剪 重绘  简单动画

当自定义view的时候 系统会自动调用drawRect 方法

画线

[objc] view plaincopy在CODE上查看代码片派生到我的代码片
  1. - (void)drawRect:(CGRect)rect  
  2. {  
  3.     // Drawing code  
  4.     // 1.获得图形上下文  
  5.     CGContextRef ctx = UIGraphicsGetCurrentContext();  
  6.       
  7.     // 2.拼接图形(路径)  
  8.     // 设置线段宽度  
  9.     CGContextSetLineWidth(ctx, 10);  
  10.       
  11.     // 设置线段头尾部的样式  
  12.     CGContextSetLineCap(ctx, kCGLineCapRound);  
  13.       
  14.     // 设置线段转折点的样式  
  15.     CGContextSetLineJoin(ctx, kCGLineJoinRound);  
  16.       
  17.     /**  第1根线段  **/  
  18.     // 设置颜色  
  19.     CGContextSetRGBStrokeColor(ctx, 1001);  
  20.     // 设置一个起点  
  21.     CGContextMoveToPoint(ctx, 1010);  
  22.     // 添加一条线段到(100, 100)  
  23.     CGContextAddLineToPoint(ctx, 100100);  
  24.       
  25.     // 渲染一次  
  26.     CGContextStrokePath(ctx);  
  27.       
  28.       
  29.     /**  第2根线段  **/  
  30.     // 设置颜色  
  31.     CGContextSetRGBStrokeColor(ctx, 0011);  
  32.     // 设置一个起点  
  33.     CGContextMoveToPoint(ctx, 200190);  
  34.     // 添加一条线段到(150, 40)  
  35.     CGContextAddLineToPoint(ctx, 15040);  
  36.     CGContextAddLineToPoint(ctx, 12060);  
  37.       
  38.       
  39.     // 3.渲染显示到view上面  
  40.     CGContextStrokePath(ctx);  
  41. }  
画圆弧

[objc] view plaincopy在CODE上查看代码片派生到我的代码片
  1. /** 
  2.  *  画圆弧 
  3.  */  
  4. void drawArc()  
  5. {  
  6.     // 1.获得上下文  
  7.     CGContextRef ctx = UIGraphicsGetCurrentContext();  
  8.       
  9.     // 2.画圆弧  
  10.     // x\y : 圆心  
  11.     // radius : 半径  
  12.     // startAngle : 开始角度  
  13.     // endAngle : 结束角度  
  14.     // clockwise : 圆弧的伸展方向(0:顺时针, 1:逆时针)  
  15.     CGContextAddArc(ctx, 10010050, M_PI_2, M_PI, 0);  
  16.       
  17.       
  18.     // 3.显示所绘制的东西  
  19.     CGContextFillPath(ctx);  
  20. }  
画圆

[objc] view plaincopy在CODE上查看代码片派生到我的代码片
  1. /** 
  2.  *  画圆 
  3.  */  
  4. void drawCircle()  
  5. {  
  6.     // 1.获得上下文  
  7.     CGContextRef ctx = UIGraphicsGetCurrentContext();  
  8.       
  9.     // 2.画圆  
  10.     CGContextAddEllipseInRect(ctx, CGRectMake(5010100100));  
  11.       
  12.     CGContextSetLineWidth(ctx, 10);  
  13.       
  14.     // 3.显示所绘制的东西  
  15.     CGContextStrokePath(ctx);  
  16. }  
画矩形

[objc] view plaincopy在CODE上查看代码片派生到我的代码片
  1. /** 
  2.  *  画四边形 
  3.  */  
  4. void draw4Rect()  
  5. {  
  6.     // 1.获得上下文  
  7.     CGContextRef ctx = UIGraphicsGetCurrentContext();  
  8.       
  9.     // 2.画矩形  
  10.     CGContextAddRect(ctx, CGRectMake(1010150100));  
  11.       
  12.     // set : 同时设置为实心和空心颜色  
  13.     // setStroke : 设置空心颜色  
  14.     // setFill : 设置实心颜色  
  15.     [[UIColor whiteColor] set];  
  16.       
  17. //    CGContextSetRGBFillColor(ctx, 0, 0, 1, 1);  
  18.       
  19.     // 3.绘制图形  
  20.     CGContextFillPath(ctx);  
  21. }  
画三角形

[objc] view plaincopy在CODE上查看代码片派生到我的代码片
  1. /** 
  2.  *  画三角形 
  3.  */  
  4. void drawTriangle()  
  5. {  
  6.     // 1.获得上下文  
  7.     CGContextRef ctx = UIGraphicsGetCurrentContext();  
  8.       
  9.     // 2.画三角形  
  10.     CGContextMoveToPoint(ctx, 00);  
  11.     CGContextAddLineToPoint(ctx, 100100);  
  12.     CGContextAddLineToPoint(ctx, 15080);  
  13.     // 关闭路径(连接起点和最后一个点)  
  14.     CGContextClosePath(ctx);  
  15.       
  16.     //  
  17.     CGContextSetRGBStrokeColor(ctx, 0101);  
  18.       
  19.     // 3.绘制图形  
  20.     CGContextStrokePath(ctx);  
  21. }  

 画文字

[objc] view plaincopy在CODE上查看代码片派生到我的代码片
  1. /** 
  2.  *  画文字 
  3.  */  
  4. void drawText()  
  5. {  
  6.     // 1.获得上下文  
  7.     CGContextRef ctx = UIGraphicsGetCurrentContext();  
  8.     // 2.画矩形  
  9.     CGRect cubeRect = CGRectMake(5050100100);  
  10.     CGContextAddRect(ctx, cubeRect);  
  11.     // 3.显示所绘制的东西  
  12.     CGContextFillPath(ctx);  
  13.       
  14.       
  15.       
  16.     // 4.画文字  
  17.     NSString *str = @"哈哈哈哈Good morning hello hi hi hi hi";  
  18.     //    [str drawAtPoint:CGPointZero withAttributes:nil];  
  19.       
  20.     NSMutableDictionary *attrs = [NSMutableDictionary dictionary];  
  21.     // NSForegroundColorAttributeName : 文字颜色  
  22.     // NSFontAttributeName : 字体  
  23.     attrs[NSForegroundColorAttributeName] = [UIColor redColor];  
  24.     attrs[NSFontAttributeName] = [UIFont systemFontOfSize:50];  
  25.     [str drawInRect:cubeRect withAttributes:attrs];  
  26. }  

画图片

[objc] view plaincopy在CODE上查看代码片派生到我的代码片
  1. void drawImage()  
  2. {  
  3.     // 1.取得图片  
  4.     UIImage *image = [UIImage imageNamed:@"me"];  
  5.       
  6.     // 2.画  
  7. //    [image drawAtPoint:CGPointMake(50, 50)];  
  8. //    [image drawInRect:CGRectMake(0, 0, 150, 150)];  
  9.     [image drawAsPatternInRect:CGRectMake(00200200)];  
  10.       
  11.     // 3.画文字  
  12.     NSString *str = @"为xxx所画";  
  13.     [str drawInRect:CGRectMake(018010030) withAttributes:nil];  
  14. }  

在绘制的时候 当设置了ctx 的颜色的时候 再绘制其他的图时,颜色需要重置,很麻烦,解决方法是重置 ctx 如下

[objc] view plaincopy在CODE上查看代码片派生到我的代码片
  1. // 将ctx拷贝一份放到栈中  
  2.    CGContextSaveGState(ctx);  
  3.      
  4.    // 设置绘图状态  
  5.    CGContextSetLineWidth(ctx, 10);  
  6.    [[UIColor redColor] set];  
  7.    CGContextSetLineCap(ctx, kCGLineCapRound);  
  8.      
  9.    // 第1根线  
  10.    CGContextMoveToPoint(ctx, 5050);  
  11.    CGContextAddLineToPoint(ctx, 120190);  
  12.      
  13.    CGContextStrokePath(ctx);  
  14.      
  15.    // 将栈顶的上下文出栈,替换当前的上下文  
  16.    CGContextRestoreGState(ctx);  

整个ctx 的旋转 移动 

[objc] view plaincopy在CODE上查看代码片派生到我的代码片
  1. CGContextRotateCTM(ctx, M_PI_4 * 0.3);  
  2. CGContextScaleCTM(ctx, 0.50.5);  
  3. CGContextTranslateCTM(ctx, 0150);  
图片的裁剪 思路是 裁剪ctx的显示区域

[objc] view plaincopy在CODE上查看代码片派生到我的代码片
  1. - (void)drawRect:(CGRect)rect  
  2. {  
  3.     CGContextRef ctx = UIGraphicsGetCurrentContext();  
  4.       
  5.     CGContextSaveGState(ctx);  
  6.       
  7.     // 0.画圆  
  8.     CGContextAddEllipseInRect(ctx, CGRectMake(1001005050));  
  9.     // 裁剪  
  10.     CGContextClip(ctx);  
  11.     CGContextFillPath(ctx);  
  12.       
  13.     // 1.显示图片  
  14.     UIImage *image = [UIImage imageNamed:@"me"];  
  15.     [image drawAtPoint:CGPointMake(100100)];  
  16.       
  17.     CGContextRestoreGState(ctx);  
  18.       
  19.     CGContextAddRect(ctx, CGRectMake(005050));  
  20.     CGContextFillPath(ctx);  
  21. }  
动画

 CADisplayLink 是一个定时器,特点 刷新频率高,  setNeedsDisplay方法起重新绘制的作用

[objc] view plaincopy在CODE上查看代码片派生到我的代码片
  1. - (void)awakeFromNib  
  2. {  
  3.     CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(setNeedsDisplay)];  
  4.     [link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];  
  5.       
  6. //    [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(setNeedsDisplay) userInfo:nil repeats:YES];  
  7. }  
  8.   
  9. - (void)drawRect:(CGRect)rect  
  10. {  
  11.     self.snowY+=5;  
  12.       
  13.     if (self.snowY >= rect.size.height) {  
  14.         self.snowY = -100;  
  15.     }  
  16.       
  17.     UIImage *image = [UIImage imageNamed:@"snow.jpg"];  
  18.     [image drawAtPoint:CGPointMake(0self.snowY)];  
  19. }  

通过路径画图

[objc] view plaincopy在CODE上查看代码片派生到我的代码片
  1. - (void)drawRect:(CGRect)rect  
  2. {  
  3.     CGContextRef ctx = UIGraphicsGetCurrentContext();  
  4.       
  5.     // 1.先创建一个路径  
  6.     CGMutablePathRef linePath = CGPathCreateMutable();  
  7.       
  8.       
  9.       
  10.     // 2.拼接路径  
  11.     CGPathMoveToPoint(linePath, NULL00);  
  12.     CGPathAddLineToPoint(linePath, NULL100100);  
  13.       
  14.     // 3.添加路径到上下文  
  15.     CGContextAddPath(ctx, linePath);  
  16.       
  17.     CGMutablePathRef circlePath = CGPathCreateMutable();  
  18.     CGPathAddArc(circlePath, NULL150150500M_PI * 20);  
  19.     CGContextAddPath(ctx, circlePath);  
  20.       
  21.     // 4.渲染  
  22.     CGContextStrokePath(ctx);  
  23.       
  24.       
  25.     CGPathRelease(linePath);  
  26.     CGPathRelease(circlePath);  
  27.       
  28.       
  29.     CGColorSpaceRef cs = CGColorSpaceCreateDeviceRGB();  
  30.     CGColorSpaceRelease(cs);  
  31.       
  32. //    CFRelease(linePath);  
  33. //    CFRelease(circlePath);  
  34. //    CFRelease(cs);  
版权声明:本文为博主原创文章,未经博主允许不得转载。

猫猫学IOS(三十)UI之Quartz2D画图片画文字

回头看了看自己写的博客,猫猫决定以后更改风格 本意是想大家看效果直接拷贝代码能用,注释齐全也方便学习,但是发现这样对新手学习特别困难,以后素材源码不会上传了,有想要的可以去群里找。 以后风格基本是...
  • u013357243
  • u013357243
  • 2015年05月05日 11:28
  • 2151

HTML5画布Canvas文本填充、线段属性、裁剪、透明度与像素合并方式

CSS3中的很多都可以类比与我们canvas的一些属性 canvas中“画笔”环境对象的很多属性都可以类比CSS3中的属性 我们不仅仅可以绘制图形,还可以向画布中添加文字文字填充同样先获取元素对象...
  • q1056843325
  • q1056843325
  • 2017年01月08日 22:56
  • 2816

iOS Quartz2D 绘制简单图形--线,圆,弧线,贝塞尔曲线,文字

本文代码参考:http://www.cnblogs.com/kenshincui/p/3959951.html Quartz2D绘制2D图形          在iOS中常用的绘图框架就是Quartz...
  • xy_26207005
  • xy_26207005
  • 2016年05月25日 10:43
  • 3086

70-Quartz2D的具体使用(画线,三角形,矩形,圆弧,扇形,重绘(下载提示条),画饼图,定时器(雪花下落),模仿系统的控件,矩形变换)

1.画线 1>添加一根线直接addLineToPoint //拼接路径 UIBezierPath *path=[UIBezierPath bezierPath]; [path moveToPo...
  • good_sister
  • good_sister
  • 2015年01月21日 12:41
  • 1014

Quartz2d从易到难全解析---裁剪功能的实现和重绘(刷帧)、动画

本文将重点探讨2个主要的功能的实现 1.裁剪功能 /**  *  裁剪  */ void drawClips() {     //获取上下文     CGContextRef context =...
  • SugerIsComing
  • SugerIsComing
  • 2015年08月21日 13:56
  • 414

DrawInRect 方法的使用:重绘文字;图片;画线;画图

  • 2015年12月15日 17:44
  • 155KB
  • 下载

IOS Quartz 各种绘制图形用法---实现画图片、写文字、画线、椭圆、矩形、棱形等

// Only override drawRect: if you perform custom drawing.   // An empty implementation adversely af...
  • u010092035
  • u010092035
  • 2015年04月18日 18:52
  • 258

Quartz 实现画图片、写文字、画线、椭圆、矩形、棱形等 二

/*  NO.11     画一个实心的圆       CGContextFillEllipseInRect(context, CGRectMake(95, 95, 100.0, 100));    ...
  • huangmindong
  • huangmindong
  • 2014年04月29日 13:30
  • 337

IOS Quartz 各种绘制图形用法---实现画图片、写文字、画线、椭圆、矩形、棱形等

转 :http://blog.csdn.net/zhibudefeng/article/details/8463268/ - (void)drawRect:(CGRect)rect   {...
  • bravegogo
  • bravegogo
  • 2016年08月02日 18:21
  • 1012

IOS Quartz 各种绘制图形用法---实现画图片、写文字、画线、椭圆、矩形、棱形等

[objc] view plaincopy // Only override drawRect: if you perform custom drawing.     ...
  • caizhongtao
  • caizhongtao
  • 2014年06月29日 20:42
  • 569
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Quartz2D详细使用包括画线,画文字 图片 裁剪 重绘 简单动画
举报原因:
原因补充:

(最多只允许输入30个字)