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;
