Quartz2D(一)之简单介绍

Quarz 2D

一. 自定义一个UI控件的样式

• 直接在该自定义控件的类中实现- (void)drawRect:(CGRect)rect方法并使用Quarz 2D绘制即可,如下:

// 在自定义控件的类里面直接重写drawRect方法进行Quarz 2D绘制
- (void)drawRect:(CGRect)rect {
    // 1. 获得上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    // 2. 拼接图形(画线段)
    CGContextMoveToPoint(ctx, 10, 10);
    CGContextAddLineToPoint(ctx, 100, 100);
    CGContextAddLineToPoint(ctx, 150, 40);
    CGContextAddLineToPoint(ctx, 10, 10);
    // 3. 渲染图形
    CGContextStrokePath(ctx);
}

注意: 如果空实现- (void)drawRect:(CGRect)rect方法会影响性能.

官方解释: An empty implementation adversely affects performance during animation.

二. 基础笔画

1. 划线

   - (void)drawRect:(CGRect)rect {
   
   // 1. 获得上下文
   CGContextRef ctx = UIGraphicsGetCurrentContext();
   // 2. 拼接图形(画线段)
   CGContextMoveToPoint(ctx, 10, 10);
   CGContextAddLineToPoint(ctx, 100, 100);
   CGContextAddLineToPoint(ctx, 150, 40);
   CGContextAddLineToPoint(ctx, 10, 10);
   // 3. 渲染图形
   CGContextStrokePath(ctx);
   

}
```

2. 画粗线

   - (void)drawRect:(CGRect)rect {
   // 1. 获得上下文
   CGContextRef ctx = UIGraphicsGetCurrentContext();
   // 2. 拼接图形(画线段)
   CGContextMoveToPoint(ctx, 10, 10);
   CGContextAddLineToPoint(ctx, 100,100);
   CGContextAddLineToPoint(ctx, 150, 20);
   // 3. 设置线宽
   CGContextSetLineWidth(ctx, 10);
   // 4. 设置线顶部的样式
   CGContextSetLineCap(ctx, kCGLineCapRound);
   // 5. 设置线连接处的样式
   CGContextSetLineJoin(ctx, kCGLineJoinRound);
   // 6. 渲染图形
   CGContextStrokePath(ctx);
   

}
```

3. 画圆(方式一:在矩形框内画圆)

   - (void)drawRect:(CGRect)rect {
   // 1. 获得上下文
   CGContextRef ctx = UIGraphicsGetCurrentContext();
   // 2. 在rect范围内画椭圆(如果rect的宽高相等则为圆)
   CGContextAddEllipseInRect(ctx, CGRectMake(10, 10, 100, 100));
   // 3. 渲染图形
   CGContextStrokePath(ctx);
   

}
```

4. 画圆(方式二:具体画圆)

   - (void)drawRect:(CGRect)rect {
   // 1. 获得上下文
   CGContextRef ctx = UIGraphicsGetCurrentContext();
   // 2. 画圆,参数1:上下文,参数2:坐标X, 参数3:坐标Y,参数4:起始角度,参数5:结束角度,参数6:顺逆时针
   CGContextAddArc(ctx, 100, 100, 70, 0, M_PI_2, 0);
   // 3. 设置线宽
   CGContextSetLineWidth(ctx, 10);
   // 4. 使用非零绕数规则,填充上下文
   CGContextFillPath(ctx);
   

}
```

5. 画文字

   - (void)drawRect:(CGRect)rect {
   // 这是用来存储文字属性的字典
   NSMutableDictionary *attr = [NSMutableDictionary dictionary];
   // 设置文字前景色为绿色
   attr[NSForegroundColorAttributeName] = [UIColor greenColor];
   // 设置文字大小为30号字体
   attr[NSFontAttributeName] = [UIFont systemFontOfSize:30];
   
   NSString *str = @"你是我的小静....";
   // 设置str画的范围和str的属性
   [str drawInRect:CGRectMake(100, 10, 200, 100) withAttributes:attr];
   }
   

6. 画图片

   - (void)drawRect:(CGRect)rect{
   UIImage *image = [UIImage imageNamed:@"wife.jpg"];
   // 从一个点开始画
   [image drawAtPoint:CGPointMake(100, 100)];
   // 指定一个区域开始画
   // [image drawInRect:CGRectMake(10, 10, 100, 100)];
   // 以平铺的方式在一个区域开始画
   // [image drawAsPatternInRect:CGRectMake(100, 10, 100, 100)];
   

}
```

三. 图形上下文栈

图形上下文栈主要可以通过栈保留上下文的样式CGContextSaveGState(ctx);,也可以Restore样式,来达到恢复默认的样式CGContextRestoreGState(ctx);

    - (void)drawRect:(CGRect)rect{
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    // 图形上下文栈  相当于把一个纯洁的ctx放到栈中
    CGContextSaveGState(ctx);
    // 从哪一个点开始
    CGContextMoveToPoint(ctx, 100, 100);
    CGContextAddLineToPoint(ctx, 200, 400);
    // 设置颜色为红色
    CGContextSetRGBStrokeColor(ctx, 1, 0, 0, 1);
    // 设置线条的两端样式为圆滑
    CGContextSetLineCap(ctx, kCGLineCapRound);
    // 设置线条的宽度
    CGContextSetLineWidth(ctx, 10);
    CGContextStrokePath(ctx);
    // 出栈(意味着以前的上下文属性不复存在了)
    CGContextRestoreGState(ctx);

    CGContextMoveToPoint(ctx, 50, 100);
    CGContextAddLineToPoint(ctx, 370, 500);

    CGContextStrokePath(ctx);
    }

四.矩阵操作

- (void)drawRect:(CGRect)rect
{
    CGContextRef ctx = UIGraphicsGetCurrentContext();

    // 矩阵操作
    // Changes the scale of the user coordinate system in a context.
    CGContextScaleCTM(ctx, 0.5, 0.5);
    // Rotates the user coordinate system in a context.
    // CGContextRotateCTM(ctx, M_PI_4);
    // Changes the origin of the user coordinate system in a context.
    // CGContextTranslateCTM(ctx, 222, 250);

    CGContextAddRect(ctx, CGRectMake(230, 130, 150, 150));
    CGContextMoveToPoint(ctx, 50, 30);
    CGContextAddLineToPoint(ctx, 150, 200);

    CGContextStrokePath(ctx);
}

五.裁剪

- (void)drawRect:(CGRect)rect {

    CGContextRef ctx = UIGraphicsGetCurrentContext();
    // 开启图形上下文栈
    CGContextSaveGState(ctx);
    // 设置上下文需要裁剪的区域
    CGContextAddArc(ctx, 50, 50, 50, 0, M_PI*2 , 1);
    // 裁剪
    CGContextClip(ctx);

    UIImage *image = [UIImage imageNamed:@"me"];
    [image drawInRect:CGRectMake(0, 0, 100, 100)];
    // 使样式恢复至默认(相当于出栈)
    CGContextRestoreGState(ctx);
}

六. 重新绘制

// Marks the receiver’s entire bounds rectangle as needing to be redrawn
[self setNeedsDisplay];

// 常常用在改变绘制路径的某些属性值后,需要调用这个方法重新绘制,达到改变展示效果的需求

七. 小案例

1. 利用图形上下文实现小图片,到大图片之间的转换(可以实现条纹背景)

   - (void)bigImage
   {
       UIImage *oldImage = [UIImage imageNamed:@"me"];
   
       UIGraphicsBeginImageContextWithOptions(self.view.bounds.size,0, 0.0);
   
       [oldImage drawInRect:self.view.bounds];
   
       UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
       UIGraphicsEndImageContext();
   
       self.view.backgroundColor = [UIColor colorWithPatternImage:newImage];
   }
   

八. 补充

• 保存图片到相册

  // 保存image到相册
  UIImageWriteToSavedPhotosAlbum(image, NULL, NULL, NULL);
  

• 访问相册

  // 创建图片选择控制器
  UIImagePickerController *vc = [[UIImagePickerController alloc]init];
  vc.allowsEditing = YES;
  // 设置代理
  vc.delegate = self;
  // 弹出图片选择控制器,并可以在completion中添加弹出完毕后执行您想要进行的操作
  [self presentViewController:vc animated:YES completion:nil];
  // 代理方法
  - (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingImage:(UIImage *)image editingInfo:(nullable NSDictionary *)editingInfo NS_DEPRECATED_IOS(2_0, 3_0);
  - (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info;
  - (void)imagePickerControllerDidCancel:(UIImagePickerController *)picker;