Quartz 2D学习(一)简单绘制图形
导语
Quartz 2D是一个二维图形绘制引擎,它支持iOS环境和Mac OS X环境,为开发者提供了很多方便,它在绘图上的功能十分强大,如基于路径的绘图、透明度、阴影、颜色管理、反锯齿、PDF文档生成等。Quartz 2D作为Core Graphics框架的一部分,其中的很多数据类型和方法都是以CG为前缀的。
本篇内容将介绍Graphis Context和绘制图形的基本流程。
一、Graphics Contexts
Graphics context(图形上下文)可以比喻成一个画板,你可以定义颜色属性,画笔粗细,画笔是直线还是曲线,然后最后开始绘制。
使用Quartz 2D绘图的关键步骤有:
1.调用CGContextRef获取上下文
2.调用CGContextRef的方法来进行绘图
基本流程如下
- (void)drawRect:(CGRect)rect {
//获取上下文
CGContextRef context = UIGraphicsGetCurrentContext();
//设置颜色属性,设置填充颜色
UIColor *blackColor = [UIColor
colorWithRed:0 green:0 blue:0 alpha:1];
CGContextSetFillColorWithColor(context, blackColor.CGColor);
//开始绘制
CGContextFillRect(context, rect);
}
//我设置的rect.frame = CGRectMake(0, 100, 100, 100);
于是可以得到一个原点在(0, 100) 大小为(100, 100)的黑色矩形。
二、drawRect:
如果我们想要在iOS应用上绘制图形,就必须先申请一个UIView对象,然后实现drawRect:方法。
在视图显示在屏幕上时或者内容需要更新时,drawRect:方法会被调用。所以我们不需要手动去调用这个方法。手动更新内容的方法是setNeedsDisplay。
UIView对象的可以通过CGContextRef对当前的绘图环境进行配置,如上文提到的获取上下文,设置颜色属性,设置填充属性等。
三、简单的绘图操作
1. 基本绘图(实例1)
新建一个类继承自UIView,命名为Test。
//Test.h
#import <UIKit/UIKit.h>
@interface Test : UIView
@end
//Test.m
#import "Test.h"
@implementation Test
- (void)drawRect:(CGRect)rect {
//获取上下文
CGContextRef context = UIGraphicsGetCurrentContext();
//1.绘制三角形
[self drawTriangle:context];
//2.绘制矩形,圆形,椭圆
[self drawOther:context];
}
- (void)drawTriangle:(CGContextRef) context {
//1.添加绘图路径
CGContextMoveToPoint(context, 100, 100);
CGContextAddLineToPoint(context, 200, 100);
CGContextAddLineToPoint(context, 150, 200);
CGContextAddLineToPoint(context, 100, 100);
//2.设置颜色属性
//以下定义类似于
// UIColor *redColor1 = [UIColor
colorWithRed:1.0 green:0.0 blue:0.0 alpha:1.0];
// redColor1.CGColor
CGFloat redColor[4] = {1.0, 0.0, 0.0, 1.0};
CGFloat greenColor[4] = {0.0, 1.0, 0.0, 1.0};
//3.设置描边颜色,填充颜色
CGContextSetStrokeColor(context, redColor);
CGContextSetFillColor(context, greenColor);
//4.绘图
CGContextDrawPath(context, kCGPathFillStroke);
}
- (void)drawOther:(CGContextRef) context {
//添加一个矩形
CGContextAddRect(context, CGRectMake(20, 100, 50, 50));
//添加一个圆形
CGContextAddEllipseInRect(context, CGRectMake(100, 200, 50, 50));
//添加一个椭圆
CGContextAddEllipseInRect(context, CGRectMake(100, 300, 50, 100));
//绘图
CGContextDrawPath(context, kCGPathFillStroke);
}
@end
2. context的保存
从实例1中可以看出在绘制其他图形时,我们并没有设置描边属性,填充颜色等,但是后来绘制的图形却和第一个相同。正如开头所述的,context就像一个画板,你选择了画笔颜色,填充颜色,那么你之后画的所有图形都会是这样的属性。
那能不能不重新设置属性就可以用之前的“画板”呢?
我们可以在设置属性前保存context,当画完第一个图形后,再读取出来。
此时要用到两个方法。
CGContextSaveGState(context); //将context推入上下文堆栈
CGContextRestoreGState(context); //从上下文堆栈取出context
//Test.h
#import <UIKit/UIKit.h>
@interface Test : UIView
@end
//Test.m
#import "Test.h"
@implementation Test
- (void)drawRect:(CGRect)rect {
//获取上下文
CGContextRef context = UIGraphicsGetCurrentContext();
//1.绘制三角形
[self drawTriangle:context];
//2.绘制矩形,圆形,椭圆
[self drawOther:context];
}
- (void)drawTriangle:(CGContextRef) context {
//保存context
CGContextSaveGState(context);
//1.添加绘图路径
CGContextMoveToPoint(context, 100, 100);
CGContextAddLineToPoint(context, 200, 100);
CGContextAddLineToPoint(context, 150, 200);
CGContextAddLineToPoint(context, 100, 100);
//2.设置颜色属性
//以下定义类似于
// UIColor *redColor1 = [UIColor colorWithRed:1.0 green:0.0 blue:0.0 alpha:1.0];
// redColor1.CGColor
CGFloat redColor[4] = {1.0, 0.0, 0.0, 1.0};
CGFloat greenColor[4] = {0.0, 1.0, 0.0, 1.0};
//3.设置描边颜色,填充颜色
CGContextSetStrokeColor(context, redColor);
CGContextSetFillColor(context, greenColor);
//4.绘图
CGContextDrawPath(context, kCGPathFillStroke);
}
- (void)drawOther:(CGContextRef) context {
//读取context
CGContextRestoreGState(context);
//添加一个矩形
CGContextAddRect(context, CGRectMake(20, 100, 50, 50));
//添加一个圆形
CGContextAddEllipseInRect(context, CGRectMake(100, 200, 50, 50));
//添加一个椭圆
CGContextAddEllipseInRect(context, CGRectMake(100, 300, 50, 100));
//绘图
CGContextDrawPath(context, kCGPathFillStroke);
}
@end
我们只需要在代码中添加很简单的两行就可以回溯到初始的context。
参考:苹果官方文档