关于Quartz 2D绘图的简单使用
Quartz 2D是一个二维图形绘制引擎,支持iOS环境和Mac OS X环境,Quartz 2D的API可以实现许多功能,如:基于路径的绘图、透明度、阴影、颜色管理、反锯齿、PDF文档生成和PDF元数据访问等等.
Quartz 2D的API是Core Graphics框架的一部分,因此其中的很多数据类型和方法都是以CG开头的.
ViewController.m 文件:
- (void)viewDidLoad {
[super viewDidLoad];
MyView *view = [[MyView alloc] initWithFrame:CGRectMake(0, 120, 375, 300)];
[self.view addSubview:view];
}
MyView.m 文件:
绘制图片
@implementation MyView
- (void)drawRect:(CGRect)rect {
// Drawing code
// 1.使用绘制的方法显示图片
UIImage *image = [UIImage imageNamed:@"1.png"];
// 2.把图片绘制到视图上
[image drawInRect:self.bounds];
}
@end
图形上下文(Graphics Context)-----绘制目标,画布
Graphics Context是一个数据类型(CGContextRef),封装了 Quartz 绘制图像到输出设备的信息.输出设备可以是PDF文件丶Bitmap或者显示在窗口上.Quartz中所有的对象都是绘制到一个Graphics Context中!
在iOS应用程序中,如果要在屏幕上进行绘制,需要定义一个UIView类,并实现它的drawRect:方法.视图的drawRect方法在视图显示在屏幕上及它的内容需要更新时被调用.在调用自定义的drawRect:方法后,视图对象自动配置绘图环境,以便能立即执行绘图操作
Quartz 2D 中默认的坐标系统是: 原点(0,0)在左下角.
沿着X轴从左向右坐标值增大,沿着Y轴从下到上坐标值增大
- (void)drawRect:(CGRect)rect
{
// 1.绘制图片
UIImage *image = [UIImage imageNamed:@"1.png"];
// 2.
// [image drawInRect:rect];
// 01 获取画布对象
CGContextRef context = UIGraphicsGetCurrentContext();
// 坐标变换
CGContextRotateCTM(context, M_PI);
CGContextScaleCTM(context, -1, 1);
CGContextTranslateCTM(context, 0, -self.frame.size.height);
// 02 绘制图片
CGContextDrawImage(context, rect, image.CGImage);
}
@end
不做任何操作绘制出来的图片：
旋转之后的效果：
自定义Label
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// 1.初始化设置属性的值
_font = [UIFont systemFontOfSize:16];
_textColor = [UIColor blackColor];
_backgroundColor = [UIColor whiteColor];
// _textAlignment = NSTextAlignmentLeft;
}
return self;
}
- (void)setText:(NSString *)text
{
if (_text != text) {
_text = text;
}
[self setNeedsDisplay];
}
- (void)setTextColor:(UIColor *)textColor
{
if (_textColor != textColor) {
_textColor = textColor;
}
[self setNeedsDisplay];
}
- (void)setBackgroundColor:(UIColor *)backgroundColor
{
if (_backgroundColor != backgroundColor) {
_backgroundColor = backgroundColor;
}
[self setNeedsDisplay];
}
// 字体属性配置key注视Attributes--http://www.cnblogs.com/qingche/p/3574995.html
- (void)drawRect:(CGRect)rect {
// Drawing code
// 1.绘制文本
// 设置字体颜色
[_textColor setFill];
NSDictionary *dic = @{
NSFontAttributeName : _font,
NSForegroundColorAttributeName : _textColor,
NSBackgroundColorAttributeName : _backgroundColor
};
[_text drawInRect:rect withAttributes:dic];
}
效果图：
绘制图形Demo
@implementation MyView
- (void)drawRect:(CGRect)rect
{
// 1.绘制一条直线
// [self drawZLine];
// 2.绘制一个矩形
// [self drawRect];
// 3.绘制一个圆形
// [self drawArc];
// 4.绘制贝塞尔曲线
[self drawQLine];
}
// 4.绘制贝塞尔曲线
- (void)drawQLine
{
// 1.获取画布对象
CGContextRef context = UIGraphicsGetCurrentContext();
// 2.设置画笔
CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
CGContextSetLineWidth(context, 2);
// 3.设置画笔的起始点
CGContextMoveToPoint(context, 10, 200);
// 4.开始添加曲线路径
CGContextAddCurveToPoint(context, 30, 50, 175 - 30, 50, 175 - 10, 200);
// 5.开始绘制
CGContextDrawPath(context, kCGPathStroke);
}
// 3.绘制一个圆形
- (void)drawArc
{
// 1.获取画布
CGContextRef context = UIGraphicsGetCurrentContext();
// 2.设置画笔
CGContextSetStrokeColorWithColor(context, [UIColor orangeColor].CGColor);
CGContextSetLineWidth(context, 4);
// 3.设置填充颜色
CGContextSetFillColorWithColor(context, [UIColor yellowColor].CGColor);
// 4.绘制圆形路径
CGContextAddArc(context, 100, 100, 50, 0, 2*M_PI, 0);
// 5.开始绘制
CGContextDrawPath(context, kCGPathFillStroke);
}
// 2.绘制一个矩形
- (void)drawRect
{
// 1.获取画布
CGContextRef context = UIGraphicsGetCurrentContext();
// 2.设置画笔
CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
CGContextSetLineWidth(context, 2);
// 3.设置矩形路径
CGContextAddRect(context, CGRectMake(10, 20, 100, 100));
// 4.开始绘制
CGContextDrawPath(context, kCGPathStroke);
}
// 1.绘制一条直线
- (void)drawZLine
{
// 1.获取当前视图的绘制画布
CGContextRef context = UIGraphicsGetCurrentContext();
// 2.设置画笔的颜色
CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
// 3.设置画笔的宽度
CGContextSetLineWidth(context, 5);
// 4.设置话题的七点位置
CGContextMoveToPoint(context, 20, 20);
// 5.让画笔移动指定位置绘制出一条线
CGContextAddLineToPoint(context, 220, 20);
CGContextAddLineToPoint(context, 20, 50);
CGContextAddLineToPoint(context, 20, 20);
// 设置填充的颜色
CGContextSetFillColorWithColor(context, [UIColor greenColor].CGColor);
// 6.开始绘制
// kCGPathFillStroke 枚举类型，指定绘制视图颜色填充的方式
CGContextDrawPath(context, kCGPathFillStroke);
}
效果图如下：
颜色渐变Demo
- (void)viewDidLoad {
[super viewDidLoad];
//颜色渐变
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = CGRectMake(20, 100, 300, 400);
NSArray *colors = @[
(id)[UIColor cyanColor].CGColor,
(id)[UIColor colorWithRed:0.170 green:0.752 blue:1.000 alpha:1.000].CGColor,
(id)[UIColor colorWithRed:0.211 green:0.332 blue:1.000 alpha:1.000].CGColor
];
gradient.colors = colors;
gradient.startPoint=CGPointMake(0, 0);
gradient.endPoint=CGPointMake(1, 1);
[self.view.layer insertSublayer:gradient atIndex:0];
}
效果图如下：
在平时的开发中使用Quartz 2D来绘图会有意想不到的效果。
