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.

二. 基础笔画

划线

- (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 {
// 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);

}
```

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

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

}
```

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

- (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);

}
```

画文字

- (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];
}

画图片

- (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];

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

七. 小案例

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

- (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<NSString *,id> *)editingInfo NS_DEPRECATED_IOS(2_0, 3_0);
- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary<NSString *,id> *)info;
- (void)imagePickerControllerDidCancel:(UIImagePickerController *)picker;