码迷,mamicode.com
首页 > 移动开发 > 详细

iOS绘图教程

时间:2016-05-06 15:54:05      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:

转自:http://www.maxiaoguo.com/clothes/252.html

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

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

画线

[objc] view plain copy
 技术分享技术分享
  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 plain copy
 技术分享技术分享
  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 plain copy
 技术分享技术分享
  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 plain copy
 技术分享技术分享
  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 plain copy
 技术分享技术分享
  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 plain copy
 技术分享技术分享
  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 plain copy
 技术分享技术分享
  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 plain copy
 技术分享技术分享
  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 plain copy
 技术分享技术分享
  1. CGContextRotateCTM(ctx, M_PI_4 * 0.3);  
  2. CGContextScaleCTM(ctx, 0.50.5);  
  3. CGContextTranslateCTM(ctx, 0150);  
图片的裁剪 思路是 裁剪ctx的显示区域

[objc] view plain copy
 技术分享技术分享
  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 plain copy
 技术分享技术分享
  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 plain copy
 技术分享技术分享
  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);  
  35. }  

iOS绘图教程

标签:

原文地址:http://blog.csdn.net/nvermore_/article/details/51315829

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!