iOS系统本身提供了两套绘图的框架，即UIBezierPath 和 Core Graphics。而前者所属UIKit，其实是对Core Graphics框架关于path的进一步封装，所以使用起来比较简单。但是毕竟Core Graphics更接近底层，所以它更加强大。
CoreGraphics,也称为Quartz 2D 是UIKit下的主要绘图系统，频繁的用于绘制自定义视图。Core Graphics是高度集成于UIView和其他UIKit部分的。Core Graphics数据结构和函数可以通过前缀CG来识别。
由于像素是依赖于目标的，所以2D绘图并不能操作单独的像素，我们可以从上下文（Context）读取它。所以我们在绘制之前需要通过
CGContextRef ctx = UIGraphicsGetCurrentContext()
获取当前推入堆栈的图形，相当于你所要绘制图形的图纸，然后绘图就好比在画布上拿着画笔机械的进行画画，通过制定不同的参数来进行不同的绘制。
画完之后我们需要通过
CGContextSetFillColorWithColor(CGContextRef c, CGColorRef color)
CGContextFillPath(CGContextRef c)
来填充颜色并完成最后的绘制。
1.绘图需要 CGContextRef
CGContextRef即图形上下文。可以这么理解，我们绘图是需要一个载体或者说输出目标，它用来显示绘图信息，并且决定绘制的东西输出到哪个地方。可以形象的比喻context就像一个“画板”，我们得把图形绘制到这个画板上。所以，绘图必须要先有context。
2.怎么拿到context？
第一种方法是利用cocoa为你生成的图形上下文。当你子类化了一个UIView并实现了自己的drawRect：方法后，一旦drawRect：方法被调用，Cocoa就会为你创建一个图形上下文，此时你对图形上下文的所有绘图操作都会显示在UIView上。
第二种方法就是创建一个图片类型的上下文。调用UIGraphicsBeginImageContextWithOptions函数就可获得用来处理图片的图形上下文。利用该上下文，你就可以在其上进行绘图，并生成图片。调用UIGraphicsGetImageFromCurrentImageContext函数可从当前上下文中获取一个UIImage对象。记住在你所有的绘图操作后别忘了调用UIGraphicsEndImageContext函数关闭图形上下文。
3.注意
并不是说一提到绘图，就一定得重写drawRect方法，只是因为通常情况下我们一般采用在drawRect方法里获取context这种方式。
4.drawRect方法什么时候触发
当view第一次显示到屏幕上时；
当调用view的setNeedsDisplay或者setNeedsDisplayInRect:方法时。
简言之：
重写UIView的drawRect方法，在该方法里便可得到context；
调用UIGraphicsBeginImageContextWithOptions方法得到context；
代码部分
一：绘制直线
//获取上下文
CGContextRefcontext =UIGraphicsGetCurrentContext();
//设置直线宽度
CGContextSetLineWidth(context,3.0f);
//设置画笔颜色
CGContextSetStrokeColorWithColor(context, [[UIColorredColor]CGColor]);
//设置起始点和终点
CGContextMoveToPoint(context,30,30);
CGContextAddLineToPoint(context,150,150);
//绘制直线
CGContextStrokePath(context);
二：绘制三角形
//获取上下文
CGContextRefcontext =UIGraphicsGetCurrentContext();
//设置直线宽度
CGContextSetLineWidth(context,3.0f);
//设置画笔颜色
CGContextSetStrokeColorWithColor(context, [[UIColoryellowColor]CGColor]);
//设置三角形的三个点，原理就是绘制直线
CGContextMoveToPoint(context,30,30);
CGContextAddLineToPoint(context,150,50);
CGContextAddLineToPoint(context,20,80);
CGContextAddLineToPoint(context,30,30);
//绘制路径
CGContextStrokePath(context);
三：绘制圆形
//获取上下文
CGContextRefcontext =UIGraphicsGetCurrentContext();
//设置直线宽度
CGContextSetLineWidth(context,5.0f);
//设置画笔颜色
CGContextSetStrokeColorWithColor(context, [[UIColoryellowColor]CGColor]);
//设置背景填充颜色
CGContextSetFillColorWithColor(context, [[UIColorblueColor]CGColor]);
//设置绘制圆形的区域
CGContextAddEllipseInRect(context,CGRectMake(40,40,120,120));
//绘制路径
CGContextFillPath(context);
四：绘制方形
//上下文
CGContextRefcontext =UIGraphicsGetCurrentContext();
//设置画笔直线宽度
CGContextSetLineWidth(context,2.0f);
//设置画笔颜色
CGContextSetStrokeColorWithColor(context, [[UIColorwhiteColor]CGColor]);
//设置背景填充色
CGContextSetFillColorWithColor(context, [[UIColoryellowColor]CGColor]);
//设置绘制方形区域
CGContextAddRect(context,CGRectMake(30,30,150,150));
//绘制路径
CGContextFillPath(context);
六：直接用UIView方法在view上绘制文字
//绘制的文字的内容
NSString*text =@"钓鱼岛是中国的!!";
//设置文字的大小
UIFont*font = [UIFontboldSystemFontOfSize:28];
//设置绘图位置
CGRecttextRect;
textRect.size= [textsizeWithFont:font];
textRect.origin.x=30;
textRect.origin.y=80;
[[UIColorblackColor]setFill];
//在view上绘制文字
[textdrawInRect:textRectwithFont:font];
七：用Quartz2D方式绘制文字
//获取绘图上下文
CGContextRefcontext =UIGraphicsGetCurrentContext();
//设置绘制的文字
char*name ="right!";
//选择绘制的文字(参数：上下文、字体、大小、转码方式)
CGContextSelectFont(context,"Helvetica",0.5f,kCGEncodingMacRoman);
//设置文字绘制方式(描边、填充、描边填充)
CGContextSetTextDrawingMode(context,kCGTextFillStroke);
//设置画笔和填充颜色
CGContextSetStrokeColorWithColor(context, [[UIColorredColor]CGColor]);
CGContextSetFillColorWithColor(context, [[UIColoryellowColor]CGColor]);
//绘制文字
CGContextShowTextAtPoint(context,50,250, name,strlen(name));
八：绘制图片
方式1：UIImage自带方式
UIImage*img1 = [UIImageimageNamed:@"nba-1.png"];
[img1drawAtPoint:CGPointMake(30,30)];
方式2：Quartz2D方式
//获取上下文
CGContextRefcontext =UIGraphicsGetCurrentContext();
//绘制的图片
UIImage*img2 = [UIImageimageNamed:@"nba.png"];
//使用Quarzt2D绘制的图片是倒置的，使用下方法设置坐标原点和显示比例来改变坐标系
CGContextTranslateCTM(context,0.0f,self.frame.size.height);
CGContextScaleCTM(context,1.0,-1.0);
//在上下文绘制图片
CGContextDrawImage(context,CGRectMake(220,130, img2.size.width, img2.size.height), [img2CGImage]);
工程截图
网友评论