作者: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];
}