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

IOS用CGContextRef画各种图形(文字、圆、直线、弧线、矩形、扇形、椭圆、三角形、圆角矩形、贝塞尔曲线、图片)

时间：2015-11-08 14:19:35      阅读：369      评论：0      收藏：0      [点我收藏+]

标签：

首先了解一下CGContextRef:

An opaque type that represents a Quartz 2D drawing environment.

Graphics Context是图形上下文,可以将其理解为一块画布,我们可以在上面进行绘画操作,绘制完成后,将画布放到我们的view中显示即可,view看作是一个画框.

自己学习时实现的demo，希望对大家有帮助，具体的实现看代码，并有完美的注释解释，还有一些对我帮助的博文供大家参考。都在代码里面。

看一下demo效果图先：

技术分享


自定义CustomView类,CustomView.h:

[cpp] view plaincopy
  1. #import <UIKit/UIKit.h>  
  2. #import <QuartzCore/QuartzCore.h>  
  3. #define PI 3.14159265358979323846  
  4. @interface CustomView : UIView  
  5.   
  6.   
  7. @end  

实现类CustomView.m：
[cpp] view plaincopy
  1. #import "CustomView.h"  
  2.   
  3. @implementation CustomView  
  4.   
  5. - (id)initWithFrame:(CGRect)frame  
  6. {  
  7.     self = [super initWithFrame:frame];  
  8.     if (self) {  
  9.     }  
  10.     return self;  
  11. }  
  12.   
  13.   
  14. // 覆盖drawRect方法，你可以在此自定义绘画和动画  
  15. - (void)drawRect:(CGRect)rect  
  16. {  
  17.     //An opaque type that represents a Quartz 2D drawing environment.  
  18.     //一个不透明类型的Quartz 2D绘画环境,相当于一个画布,你可以在上面任意绘画  
  19.     CGContextRef context = UIGraphicsGetCurrentContext();  
  20.       
  21.     /*写文字*/  
  22.     CGContextSetRGBFillColor (context,  1, 0, 0, 1.0);//设置填充颜色  
  23.     UIFont  *font = [UIFont boldSystemFontOfSize:15.0];//设置  
  24.     [@"画圆：" drawInRect:CGRectMake(10, 20, 80, 20) withFont:font];  
  25.     [@"画线及孤线：" drawInRect:CGRectMake(10, 80, 100, 20) withFont:font];  
  26.     [@"画矩形：" drawInRect:CGRectMake(10, 120, 80, 20) withFont:font];  
  27.     [@"画扇形和椭圆：" drawInRect:CGRectMake(10, 160, 110, 20) withFont:font];  
  28.     [@"画三角形：" drawInRect:CGRectMake(10, 220, 80, 20) withFont:font];  
  29.     [@"画圆角矩形：" drawInRect:CGRectMake(10, 260, 100, 20) withFont:font];  
  30.     [@"画贝塞尔曲线：" drawInRect:CGRectMake(10, 300, 100, 20) withFont:font];  
  31.     [@"图片：" drawInRect:CGRectMake(10, 340, 80, 20) withFont:font];  
  32.   
  33.     /*画圆*/  
  34.     //边框圆  
  35.     CGContextSetRGBStrokeColor(context,1,1,1,1.0);//画笔线的颜色  
  36.     CGContextSetLineWidth(context, 1.0);//线的宽度  
  37.     //void CGContextAddArc(CGContextRef c,CGFloat x, CGFloat y,CGFloat radius,CGFloat startAngle,CGFloat endAngle, int clockwise)1 弧度＝180°/π （≈57.3°） 度＝弧度×180°/π 360°＝360×π/180 ＝2π 弧度   
  38.     // x,y为圆点坐标，radius半径，startAngle为开始的弧度，endAngle为 结束的弧度，clockwise 0为顺时针，1为逆时针。  
  39.     CGContextAddArc(context, 100, 20, 15, 0, 2*PI, 0); //添加一个圆  
  40.     CGContextDrawPath(context, kCGPathStroke); //绘制路径  
  41.       
  42.     //填充圆，无边框  
  43.     CGContextAddArc(context, 150, 30, 30, 0, 2*PI, 0); //添加一个圆  
  44.     CGContextDrawPath(context, kCGPathFill);//绘制填充  
  45.       
  46.     //画大圆并填充颜  
  47.     UIColor*aColor = [UIColor colorWithRed:1 green:0.0 blue:0 alpha:1];  
  48.     CGContextSetFillColorWithColor(context, aColor.CGColor);//填充颜色  
  49.     CGContextSetLineWidth(context, 3.0);//线的宽度  
  50.     CGContextAddArc(context, 250, 40, 40, 0, 2*PI, 0); //添加一个圆  
  51.     //kCGPathFill填充非零绕数规则,kCGPathEOFill表示用奇偶规则,kCGPathStroke路径,kCGPathFillStroke路径填充,kCGPathEOFillStroke表示描线，不是填充  
  52.     CGContextDrawPath(context, kCGPathFillStroke); //绘制路径加填充  
  53.       
  54.     /*画线及孤线*/  
  55.     //画线  
  56.     CGPoint aPoints[2];//坐标点  
  57.     aPoints[0] =CGPointMake(100, 80);//坐标1  
  58.     aPoints[1] =CGPointMake(130, 80);//坐标2  
  59.     //CGContextAddLines(CGContextRef c, const CGPoint points[],size_t count)  
  60.     //points[]坐标数组，和count大小  
  61.     CGContextAddLines(context, aPoints, 2);//添加线  
  62.     CGContextDrawPath(context, kCGPathStroke); //根据坐标绘制路径  
  63.       
  64.     //画笑脸弧线  
  65.     //左  
  66.     CGContextSetRGBStrokeColor(context, 0, 0, 1, 1);//改变画笔颜色  
  67.     CGContextMoveToPoint(context, 140, 80);//开始坐标p1  
  68.     //CGContextAddArcToPoint(CGContextRef c, CGFloat x1, CGFloat y1,CGFloat x2, CGFloat y2, CGFloat radius)  
  69.     //x1,y1跟p1形成一条线的坐标p2，x2,y2结束坐标跟p3形成一条线的p3,radius半径,注意, 需要算好半径的长度,  
  70.     CGContextAddArcToPoint(context, 148, 68, 156, 80, 10);  
  71.     CGContextStrokePath(context);//绘画路径  
  72.       
  73.     //右  
  74.     CGContextMoveToPoint(context, 160, 80);//开始坐标p1  
  75.     //CGContextAddArcToPoint(CGContextRef c, CGFloat x1, CGFloat y1,CGFloat x2, CGFloat y2, CGFloat radius)  
  76.     //x1,y1跟p1形成一条线的坐标p2，x2,y2结束坐标跟p3形成一条线的p3,radius半径,注意, 需要算好半径的长度,  
  77.     CGContextAddArcToPoint(context, 168, 68, 176, 80, 10);  
  78.     CGContextStrokePath(context);//绘画路径  
  79.       
  80.     //右  
  81.     CGContextMoveToPoint(context, 150, 90);//开始坐标p1  
  82.     //CGContextAddArcToPoint(CGContextRef c, CGFloat x1, CGFloat y1,CGFloat x2, CGFloat y2, CGFloat radius)  
  83.     //x1,y1跟p1形成一条线的坐标p2，x2,y2结束坐标跟p3形成一条线的p3,radius半径,注意, 需要算好半径的长度,  
  84.     CGContextAddArcToPoint(context, 158, 102, 166, 90, 10);  
  85.     CGContextStrokePath(context);//绘画路径  
  86.     //注，如果还是没弄明白怎么回事，请参考：http://donbe.blog.163.com/blog/static/138048021201052093633776/  
  87.       
  88.     /*画矩形*/  
  89.     CGContextStrokeRect(context,CGRectMake(100, 120, 10, 10));//画方框  
  90.     CGContextFillRect(context,CGRectMake(120, 120, 10, 10));//填充框  
  91.     //矩形，并填弃颜色  
  92.     CGContextSetLineWidth(context, 2.0);//线的宽度  
  93.     aColor = [UIColor blueColor];//blue蓝色  
  94.     CGContextSetFillColorWithColor(context, aColor.CGColor);//填充颜色  
  95.     aColor = [UIColor yellowColor];  
  96.     CGContextSetStrokeColorWithColor(context, aColor.CGColor);//线框颜色  
  97.     CGContextAddRect(context,CGRectMake(140, 120, 60, 30));//画方框  
  98.     CGContextDrawPath(context, kCGPathFillStroke);//绘画路径  
  99.       
  100.     //矩形，并填弃渐变颜色  
  101.     //关于颜色参考http://blog.sina.com.cn/s/blog_6ec3c9ce01015v3c.html  
  102.     //http://blog.csdn.net/reylen/article/details/8622932  
  103.     // 第一种填充方式，第一种方式必须导入类库quartcore并#import <QuartzCore/QuartzCore.h>，这个就 不属于在context上画，而是将层插入到view层上面。那么这里就设计到Quartz Core 图层编程了。  
  104.     CAGradientLayer *gradient1 = [CAGradientLayer layer];  
  105.     gradient1.frame = CGRectMake(240, 120, 60, 30);  
  106.     gradient1.colors = [NSArray arrayWithObjects:(id)[UIColor whiteColor].CGColor,  
  107.                         (id)[UIColor grayColor].CGColor,  
  108.                         (id)[UIColor blackColor].CGColor,  
  109.                         (id)[UIColor yellowColor].CGColor,  
  110.                         (id)[UIColor blueColor].CGColor,  
  111.                         (id)[UIColor redColor].CGColor,  
  112.                         (id)[UIColor greenColor].CGColor,  
  113.                         (id)[UIColor orangeColor].CGColor,  
  114.                         (id)[UIColor brownColor].CGColor,nil];  
  115.     [self.layer insertSublayer:gradient1 atIndex:0];  
  116.     //第二种填充方式   
  117.     CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();  
  118.     CGFloat colors[] =  
  119.     {  
  120.         1,1,1, 1.00,  
  121.         1,1,0, 1.00,  
  122.         1,0,0, 1.00,  
  123.         1,0,1, 1.00,  
  124.         0,1,1, 1.00,  
  125.         0,1,0, 1.00,  
  126.         0,0,1, 1.00,  
  127.         0,0,0, 1.00,  
  128.     };  
  129.     CGGradientRef gradient = CGGradientCreateWithColorComponents  
  130.     (rgb, colors, NULL, sizeof(colors)/(sizeof(colors[0])*4));//形成梯形，渐变的效果   
  131.     CGColorSpaceRelease(rgb);  
  132.     //画线形成一个矩形  
  133.     //CGContextSaveGState与CGContextRestoreGState的作用  
  134.     /* 
  135.      CGContextSaveGState 函数的作用是将当前图形状态推入堆栈。之后，您对图形状态所做的修改会影响随后的描画操作，但不影响存储在堆栈中的拷贝。在修改完成后，您可以通过 CGContextRestoreGState函数把堆栈顶部的状态弹出，返回到之前的图形状态。这种推入和弹出的方式是回到之前图形状态的快速方法，避 免逐个撤消所有的状态修改；这也是将某些状态（比如裁剪路径）恢复到原有设置的唯一方式。 
  136.      */  
  137.     CGContextSaveGState(context);  
  138.     CGContextMoveToPoint(context, 220, 90);  
  139.     CGContextAddLineToPoint(context, 240, 90);  
  140.     CGContextAddLineToPoint(context, 240, 110);  
  141.     CGContextAddLineToPoint(context, 220, 110);  
  142.     CGContextClip(context);//context裁剪路径,后续操作的路径  
  143.     //CGContextDrawLinearGradient(CGContextRef context,CGGradientRef gradient, CGPoint startPoint, CGPoint endPoint,CGGradientDrawingOptions options)  
  144.     //gradient渐变颜色,startPoint开始渐变的起始位置,endPoint结束坐标,options开始坐标之前or开始之后开始渐变  
  145.     CGContextDrawLinearGradient(context, gradient,CGPointMake  
  146.                                 (220,90) ,CGPointMake(240,110),  
  147.                                 kCGGradientDrawsAfterEndLocation);  
  148.     CGContextRestoreGState(context);// 恢复到之前的context  
  149.       
  150.     //再写一个看看效果  
  151.     CGContextSaveGState(context);  
  152.     CGContextMoveToPoint(context, 260, 90);  
  153.     CGContextAddLineToPoint(context, 280, 90);  
  154.     CGContextAddLineToPoint(context, 280, 100);  
  155.     CGContextAddLineToPoint(context, 260, 100);  
  156.     CGContextClip(context);//裁剪路径  
  157.     //说白了，开始坐标和结束坐标是控制渐变的方向和形状  
  158.     CGContextDrawLinearGradient(context, gradient,CGPointMake  
  159.                                 (260, 90) ,CGPointMake(260, 100),  
  160.                                 kCGGradientDrawsAfterEndLocation);  
  161.     CGContextRestoreGState(context);// 恢复到之前的context  
  162.       
  163.     //下面再看一个颜色渐变的圆  
  164.     CGContextDrawRadialGradient(context, gradient, CGPointMake(300, 100), 0.0, CGPointMake(300, 100), 10, kCGGradientDrawsBeforeStartLocation);  
  165.       
  166.     /*画扇形和椭圆*/  
  167.     //画扇形，也就画圆，只不过是设置角度的大小，形成一个扇形  
  168.     aColor = [UIColor colorWithRed:0 green:1 blue:1 alpha:1];  
  169.     CGContextSetFillColorWithColor(context, aColor.CGColor);//填充颜色  
  170.     //以10为半径围绕圆心画指定角度扇形  
  171.     CGContextMoveToPoint(context, 160, 180);  
  172.     CGContextAddArc(context, 160, 180, 30,  -60 * PI / 180, -120 * PI / 180, 1);  
  173.     CGContextClosePath(context);  
  174.     CGContextDrawPath(context, kCGPathFillStroke); //绘制路径  
  175.   
  176.     //画椭圆  
  177.     CGContextAddEllipseInRect(context, CGRectMake(160, 180, 20, 8)); //椭圆  
  178.     CGContextDrawPath(context, kCGPathFillStroke);  
  179.       
  180.     /*画三角形*/  
  181.     //只要三个点就行跟画一条线方式一样，把三点连接起来  
  182.     CGPoint sPoints[3];//坐标点  
  183.     sPoints[0] =CGPointMake(100, 220);//坐标1  
  184.     sPoints[1] =CGPointMake(130, 220);//坐标2  
  185.     sPoints[2] =CGPointMake(130, 160);//坐标3  
  186.     CGContextAddLines(context, sPoints, 3);//添加线  
  187.     CGContextClosePath(context);//封起来  
  188.     CGContextDrawPath(context, kCGPathFillStroke); //根据坐标绘制路径  
  189.       
  190.     /*画圆角矩形*/  
  191.     float fw = 180;  
  192.     float fh = 280;  
  193.       
  194.     CGContextMoveToPoint(context, fw, fh-20);  // 开始坐标右边开始  
  195.     CGContextAddArcToPoint(context, fw, fh, fw-20, fh, 10);  // 右下角角度  
  196.     CGContextAddArcToPoint(context, 120, fh, 120, fh-20, 10); // 左下角角度  
  197.     CGContextAddArcToPoint(context, 120, 250, fw-20, 250, 10); // 左上角  
  198.     CGContextAddArcToPoint(context, fw, 250, fw, fh-20, 10); // 右上角  
  199.     CGContextClosePath(context);  
  200.     CGContextDrawPath(context, kCGPathFillStroke); //根据坐标绘制路径  
  201.       
  202.     /*画贝塞尔曲线*/  
  203.     //二次曲线  
  204.     CGContextMoveToPoint(context, 120, 300);//设置Path的起点  
  205.     CGContextAddQuadCurveToPoint(context,190, 310, 120, 390);//设置贝塞尔曲线的控制点坐标和终点坐标  
  206.     CGContextStrokePath(context);  
  207.     //三次曲线函数  
  208.     CGContextMoveToPoint(context, 200, 300);//设置Path的起点  
  209.     CGContextAddCurveToPoint(context,250, 280, 250, 400, 280, 300);//设置贝塞尔曲线的控制点坐标和控制点坐标终点坐标  
  210.     CGContextStrokePath(context);  
  211.       
  212.       
  213.     /*图片*/  
  214.     UIImage *image = [UIImage imageNamed:@"apple.jpg"];  
  215.     [image drawInRect:CGRectMake(60, 340, 20, 20)];//在坐标中画出图片  
  216. //    [image drawAtPoint:CGPointMake(100, 340)];//保持图片大小在point点开始画图片，可以把注释去掉看看  
  217.     CGContextDrawImage(context, CGRectMake(100, 340, 20, 20), image.CGImage);//使用这个使图片上下颠倒了，参考http://blog.csdn.net/koupoo/article/details/8670024  
  218.       
  219. //    CGContextDrawTiledImage(context, CGRectMake(0, 0, 20, 20), image.CGImage);//平铺图  
  220.   
  221. }  
  222.   
  223.   
  224. @end  

用法：
[cpp] view plaincopy
  1. CustomView *customView = [[CustomView alloc]initWithFrame:CGRectMake(0, 0, 320, self.view.frame.size.height)];  
  2.     [self.view addSubview:customView];  

ok，完成。

大家如果看过我的其它博客，会发现，这遍博客跟我的某一片博客很像，没错，就是http://blog.csdn.net/rhljiayou/article/details/7212620

当年写andriod的时候写的一遍博客。

请大家尊重一下我的劳动成功，转载请注明原创地址！

http://blog.csdn.net/rhljiayou/article/details/9919713

版权声明：本文为博主原创文章，未经博主允许不得转载。

IOS用CGContextRef画各种图形(文字、圆、直线、弧线、矩形、扇形、椭圆、三角形、圆角矩形、贝塞尔曲线、图片)

标签：

原文地址：http://www.cnblogs.com/Free-Thinker/p/4946695.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！