作者:Mitchell
一、简介
- Quartz2D是一个二维绘图引擎，支持iOS和Mac系统
- Quartz2D的使用方向：
- Bitmap Graphics Context（位图）
- PDF Graphics Context
- Window Graphics Context
- Layer Graphics Context
-
Printer Graphics Context
图.png
二、简单绘图
-
注意：画线必须在 drawRect 方法中实现，因为只有在 drawRect 方法中才能获取到跟 View 相关联的上下文 -
画线
- 绘制步骤：
- 1、 获取图形上下文
- 绘制步骤：
CGContextRef ctx = UIGraphicsGetCurrentContext();
* 2、 拼接路径（设置起点、终点）
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(10, 100)];
[path addLineToPoint:CGPointMake(200, 200)];
[path addLineToPoint:CGPointMake(100, 100)];
* 3、将路径添加到上下文
CGContextAddPath(ctx, path.CGPath);
* 期间可设置绘图状态，描述线段等信息：
CGContextSetLineWidth(ctx, 10);
// 设置圆角顶角样式
CGContextSetLineCap(ctx, kCGLineCapRound);
// 设置连接点样式
CGContextSetLineJoin(ctx, kCGLineJoinRound);
* 4、渲染上下文
CGContextStrokePath(ctx);
- 也可以用贝塞尔曲线直接绘制直线：
- (void)drawRect:(CGRect)rect {
// Drawing code
// 画线
// 描述路径
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(50, 50)];
[path addLineToPoint:CGPointMake(100, 100)];
// 画线
[path stroke];
// stroke底层实现了: 1.获取上下文 2.描述路径 3.把路径添加到上下文 4.渲染上下文
}
-
圆形
ArcCenter：圆心
radius：半径
startAngle：开始角度
endAngle：结束角度
clockwise：YES：顺时针，NO：逆时针
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:50 startAngle:0 endAngle:M_PI_2 clockwise:YES];
- 饼状图就是多个扇形组成，使用如上方法便能画出。
-
绘制文字
- 实例：
//绘制文字
NSString *str = @"hello world hello world hello world";
// Attributes:给文字添加属性,富文本,字体,颜色,空心,阴影
// 用字典去描述文字属性
NSMutableDictionary *strAttr = [NSMutableDictionary dictionary];
//设置字典的key，每个key对应一个value
//设置字体
strAttr[NSFontAttributeName] = [UIFont systemFontOfSize:50];
//颜色
strAttr[NSForegroundColorAttributeName] = [UIColor redColor];
//描边（设置边线的宽度）
strAttr[NSStrokeWidthAttributeName] = @1;
//设置阴影
NSShadow *shadow = [[NSShadow alloc] init];
shadow.shadowOffset = CGSizeMake(10, 10);
shadow.shadowColor = [UIColor yellowColor];
shadow.shadowBlurRadius = 5;
strAttr[NSShadowAttributeName] = shadow;
//将文字渲染上下文
[str drawInRect:self.bounds withAttributes:strAttr];
- 注意：这里如果使用 `drawAtPoint:withAttributes：` 渲染是不能自动换行的，所以这里要使用 `drawInRect: withAttributes:` 方法进行渲染。
-
渲染图片
- 实例：
UIImage *image = [UIImage imageNamed:@"imageName"];
//此方法所绘制的图片和控件一样大，拉伸跟控件一样大
[image drawInRect:rect];
- 平铺：
UIImage *image = [UIImage imageNamed:@"imageName"];
[image drawAsPatternInRect:rect];
- 裁剪：`注意：UIRectClip方法一定要卸载图片渲染之前，要不然没有效果`
UIImage *image = [UIImage imageNamed:@"imageName"];
UIRectClip(CGRectMake(0, 0, 50, 50));
[image drawInRect:rect];
三、关于重绘
- 需求：自定义下载条
- 绘制下载条进度条：
- (void)drawRect:(CGRect)rect {
// Drawing code
CGPoint center = CGPointMake(rect.size.width * 0.5, rect.size.height * 0.5);
CGFloat endA = - M_PI_2 + M_PI * 2 * _progress;
// 圆弧
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:rect.size.width * 0.5 - 4 startAngle:-M_PI_2 endAngle:endA clockwise:YES];
[path stroke];
}
- 注意：`drawRect默认只会调用一次`，而且`会在控制器 viewDidLoad，viewWillAppear 之后调用`，也就是当界面将要出现的时候才会调用 drawRect 方法，系统默认只调用一次。
- 重置进度条：
*` drawRect 不能够手动调用`，每次系统调用 drawRect 方法之前，都会给 drawRect 方法传递一个和 view 关联的上下文。
* 如果想重置进度条需要调用` [self setNeedsDisplay]; ` 方法。
四、用Quartz2D来模仿的UIImageView内部实现
- 模仿着[[UIImageView alloc] initWithImage:<#image#>]的内部实现方式封装了MitchellImageView类。
- MitchellImageView.h
#import <UIKit/UIKit.h>
@interface MitchellImageView : UIView
@property(nonatomic,strong)UIImage * image;
@end
- MitchellImageView.m类
#import "MitchellImageView.h"
@implementation MitchellImageView
- (void)drawRect:(CGRect)rect {
[_image drawInRect:rect];
}
+(instancetype)imageWithImage:(UIImage *)image{
return [[self alloc] initWithImage:image];
}
-(instancetype)initWithImage:(UIImage*)image{
if (self = [super init]) {
self.frame = CGRectMake(0, 0, image.size.width, image.size.height);
_image = image;
}
return self;
}
-(void)setImage:(UIImage *)image{
_image = image;
[self setNeedsDisplay];
}
