iOS底层绘图机制，CoreGraphics框架，和Context使用详解

iOS底层绘图机制，CoreGraphics框架，和Context使用详解

**

本文将通过不添加任何控件实现界面绘图，帮助大家了解Core Graphics框架。

**

iOS开发时，我们的UI界面都是通过添加控件实现，对于底层的Quart 2D绘图并不了解。

Graphics context（图形上下文）可以理解是一块画布，自定义的再上面填充颜色，绘制路径、填充图形或者绘制一个Image都可以。他是基于UIKit框架的，主要在View的drawRect方法中实现绘图。

我们先定义一个自定义View，来重写他的drawRect方法。

总的来说是这样的，每个方法实现不同的绘制：

- (void)drawRect:(CGRect)rect {

// 获取上下文画布
CGContextRef context = UIGraphicsGetCurrentContext();

// 绘制背景图
// [self drawBackground:(CGContextRef)context];

// 绘制文字
// [self drawString:context];
// 绘制路径
// [self drawPath:context];

// 绘制三角形
// [self drawTriangle:context];
//绘制其他形状
// [self drawOthershape:context];

// 图片绘制
// [self drawImage:context];
}

一、绘制颜色填充

view控件我们填充背景颜色可以通过background属性一步到位，但是不用这个属性如何绘图呢，我们可以通过以下方法实现颜色填充：

- (void)drawRect:(CGRect)rect {

// 获取上下文画布
CGContextRef context = UIGraphicsGetCurrentContext();

// 绘制背景图
[self drawBackground:(CGContextRef)context];
}

- (void)drawBackground:(CGContextRef)context
{
// 设置背景颜色
UIColor *backgroundColor = [UIColor redColor];
// 进行颜色填充
CGContextSetFillColorWithColor(context, backgroundColor.CGColor);

/* 开始绘制
Param1：选择画布，选择当前Context
Param2：选择绘制区域, 如果想要全屏绘制可以用self.bounds;
*/
CGContextFillRect(context, CGRectMake(100, 100, 100, 100));
}

填充效果图：

二、设置字体填充

- (void)drawString:(CGContextRef)context
{
CGContextSetRGBFillColor (context,  1, 0, 0, 1.0);//设置填充颜色
UIFont  *font = [UIFont boldSystemFontOfSize:15.0];//设置
NSString *string = @"Core Graphics学习";
[string drawInRect:CGRectMake(50, 80, 200, 20) withFont:font];
[@"my test" drawInRect:CGRectMake(60, 200, 200, 20) withFont:font];

}

三、绘制路径

先使用最简单的连点直线绘图

- (void)drawRect:(CGRect)rect {

// 获取上下文画布
CGContextRef context = UIGraphicsGetCurrentContext();

// 绘制背景图
//[self drawBackground:(CGContextRef)context];

// 绘制路径
[self drawPath:context];

}

- (void)drawPath:(CGContextRef)context
{
// 方法一：直接连接不同点
//设置起点
CGContextMoveToPoint(context, 100, 100);
//设置终点
CGContextAddLineToPoint(context, 200, 200);
CGContextAddLineToPoint(context, 230, 250);

// 方法二：通过创建一个path对象，将点添加到路径中
// 1.创建一条可绘制路径
CGMutablePathRef path = CGPathCreateMutable();
// 2. 把绘图信息添加到路径中
CGPathMoveToPoint(path, NULL, 100, 400);
CGPathAddLineToPoint(path, NULL, 100, 500);
CGPathAddLineToPoint(path, NULL, 200, 500);
// 3.把路径添加到上下文画布中
CGContextAddPath(context, path);

//渲染（一定不能忘）
CGContextStrokePath(context);
}

绘图效果：

四：绘制其他图形：

- (void)drawTriangle:(CGContextRef)context
{
// 1.添加绘图路径
CGContextMoveToPoint(context, 200, 200);
CGContextAddLineToPoint(context, 300, 300);
CGContextAddLineToPoint(context, 200, 300);
CGContextAddLineToPoint(context, 200, 200);

// 2.设置描边颜色和填充颜色
CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
CGContextSetFillColorWithColor(context, [UIColor yellowColor].CGColor);
//4.绘图
CGContextDrawPath(context, kCGPathFillStroke);
}

- (void)drawOthershape:(CGContextRef)context
{
//添加一个矩形
CGContextAddRect(context, CGRectMake(20, 230, 50, 50));
//添加一个圆形
CGContextAddEllipseInRect(context, CGRectMake(100, 300, 50, 50));
//添加一个椭圆
CGContextAddEllipseInRect(context, CGRectMake(200, 500, 100, 50));

//绘图
CGContextDrawPath(context, kCGPathFillStroke);

CGContextSaveGState(context);
}

五：图片数据绘制

- (void)drawImage:(CGContextRef)context
{
CGImageRef image;
UIImage *img = [UIImage imageNamed:@"test_image"];
image = CGImageRetain(img.CGImage);
CGRect imageRect = CGRectMake(100, 100, 200, 200);

CGContextDrawImage(context, imageRect, image);
}

效果图:



我们的UIView之所以能渲染到涂层上，因为苹果已经帮我们实现好了这些底层绘制，了解下底层实现，相信会对我们以后在动画或者图层渲染上会有不少帮助。