一、介绍

绘图要使用到苹果的核心图形框架 quartz 2D。核心图形，也称为Quartz 2D，是一款高级的二维绘图引擎，可用于iOS、tvOS和macOS的应用程序开发。Quartz 2D提供了低级别、轻量的2D渲染，无论显示或打印设备，都具有无与伦比的输出保真度。Quartz 2D是和分辨率和设备无关的。

Quartz 2D API很容易使用，并提供了强大的功能，如透明层、基于路径的绘图、屏幕显示、高级色彩管理、反锯齿渲染，以及PDF文档创建、显示和解析。

这里只是使用简单的语言与代码向大家讲述如何在一个视图上绘制线条，矩形以及圆形，并为他们着色。

二、Graphics Context

即图形上下文，Graphics Context，它是一个数据类型（CGContextRef），用于封装Quartz绘制图像到输出设备的信息，也就是说，如果要在输出设备上绘制图形，就必须获取当前的图形上下文。

三、绘制线条

绘制线条的步骤如下：

① 获取图形上下文

② 设置起点

③ 设置终点

④ 渲染连线

在渲染前，还可以设置线条的线型、颜色等属性。

- (void)drawRect:(CGRect)rect {

//获取图形上下文

CGContextRef contextRef = UIGraphicsGetCurrentContext();

//设置线段起点

CGContextMoveToPoint(contextRef, 20, 20);

//设置线段终点

CGContextAddLineToPoint(contextRef, 240, 240);

//渲染线段

CGContextStrokePath(contextRef);

}

设置线型和颜色

- (void)drawRect:(CGRect)rect {

//获取图形上下文

CGContextRef contextRef = UIGraphicsGetCurrentContext();

//设置线型

CGContextSetLineWidth(contextRef, 5);

//设置颜色

CGContextSetRGBStrokeColor(contextRef, 1, 1, 0.5, 1);

//设置线段起点

CGContextMoveToPoint(contextRef, 20, 20);

//设置线段终点

CGContextAddLineToPoint(contextRef, 240, 240);

//渲染线段

CGContextStrokePath(contextRef);

}

绘制折线

在这条线条的基础上，再绘制一条线条，调用两次CGContextAddLineToPoint方法，并设置坐标即可。

//设置线段节点

CGContextAddLineToPoint(contextRef, 240, 280);

//设置线段重点

CGContextAddLineToPoint(contextRef, 20, 280);

四、绘制矩形

矩形的绘制一般可以通过4种方法实现：

①通过连接固定点绘制

②指定起点和宽高绘制

③填充实心矩形（没有空心绘制方法）

④设置线条粗细，绘制斜矩形

指定起点和宽高绘制

直接调用CGContextAddRect方法，绘制矩形。重写drawRect方法。

- (void)drawRect:(CGRect)rect {

//获取图形上下文

CGContextRef contextRef = UIGraphicsGetCurrentContext();

//指定矩形起点与宽高

CGContextAddRect(contextRef, CGRectMake(20, 20, 120, 40));

//设置矩形颜色

CGContextSetRGBStrokeColor(contextRef, 0.7, 1, 0.2, 1);

CGContextStrokePath(contextRef);

}

@end

五、填充实心矩形

下面是绘制实心矩形的方法。重写drawRect方法。

- (void)drawRect:(CGRect)rect {

//获取图形上下文

CGContextRef contextRef = UIGraphicsGetCurrentContext();

//填充实心矩形

UIRectFill(CGRectMake(20, 20, 140, 80));

CGContextStrokePath(contextRef);

}

六、绘制圆形

绘制圆形是通过CGPathAddEllipseInRect方法进行绘制，设置圆形的起点以及半径，通过对长半径与短半径的设置可以绘制椭圆与正圆。

- (void)drawRect:(CGRect)rect {

//获取图形上下文

CGContextRef contextRef = UIGraphicsGetCurrentContext();

//设置线型

CGContextSetLineWidth(contextRef, 5);

//设置颜色

CGContextSetRGBStrokeColor(contextRef, 1, 1, 0.5, 1);

//设置线段起点

CGContextMoveToPoint(contextRef, 20, 20);

//设置线段终点

CGContextAddLineToPoint(contextRef, 240, 240);

//设置线段节点

CGContextAddLineToPoint(contextRef, 240, 280);

//设置线段重点

CGContextAddLineToPoint(contextRef, 20, 280);

//指定矩形起点与宽高

CGContextAddRect(contextRef, CGRectMake(20, 20, 120, 40));

//设置矩形颜色

CGContextSetRGBStrokeColor(contextRef, 0.7, 1, 0.2, 1);

CGContextStrokePath(contextRef);

//填充实心矩形

UIRectFill(CGRectMake(20, 20, 140, 80));

//创建path线条路径

CGMutablePathRef pathRef = CGPathCreateMutable();

//设置线条颜色

CGContextSetRGBStrokeColor(contextRef, 0.4, 0.3, 0.9, 1);

//绘制圆形

CGPathAddEllipseInRect(pathRef, NULL, CGRectMake(10, 20, 100, 110));

//将圆形添加到图形上下文中

CGContextAddPath(contextRef, pathRef);

//渲染线段

CGContextStrokePath(contextRef);}

首先获取图形上下文，然后通过图形上下文设置线段起点，坐标为（20，20），然后设置终点为（240，240），最后进行渲染，完全按照我们上面讲的绘图步骤来执行。运行模拟器，可以看到最后的效果如图所示。