Quarz 2D
一. 自定義一個(gè)UI控件的樣式
- 直接在該自定義控件的類中實(shí)現(xiàn)- (void)drawRect:(CGRect)rect方法并使用Quarz 2D繪制即可,如下:
// 在自定義控件的類里面直接重寫drawRect方法進(jìn)行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);
}
注意: 如果空實(shí)現(xiàn)- (void)drawRect:(CGRect)rect方法會(huì)影響性能.
官方解釋: An empty implementation adversely affects performance during animation.
二. 基礎(chǔ)筆畫
- 劃線
- (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. 設(shè)置線寬 CGContextSetLineWidth(ctx, 10); // 4. 設(shè)置線頂部的樣式 CGContextSetLineCap(ctx, kCGLineCapRound); // 5. 設(shè)置線連接處的樣式 CGContextSetLineJoin(ctx, kCGLineJoinRound); // 6. 渲染圖形 CGContextStrokePath(ctx);
}
```
- 畫圓(方式一:在矩形框內(nèi)畫圓)
- (void)drawRect:(CGRect)rect { // 1. 獲得上下文 CGContextRef ctx = UIGraphicsGetCurrentContext(); // 2. 在rect范圍內(nèi)畫橢圓(如果rect的寬高相等則為圓) CGContextAddEllipseInRect(ctx, CGRectMake(10, 10, 100, 100)); // 3. 渲染圖形 CGContextStrokePath(ctx);
}
```
- 畫圓(方式二:
具體畫圓)- (void)drawRect:(CGRect)rect { // 1. 獲得上下文 CGContextRef ctx = UIGraphicsGetCurrentContext(); // 2. 畫圓,參數(shù)1:上下文,參數(shù)2:坐標(biāo)X, 參數(shù)3:坐標(biāo)Y,參數(shù)4:起始角度,參數(shù)5:結(jié)束角度,參數(shù)6:順逆時(shí)針 CGContextAddArc(ctx, 100, 100, 70, 0, M_PI_2, 0); // 3. 設(shè)置線寬 CGContextSetLineWidth(ctx, 10); // 4. 使用非零繞數(shù)規(guī)則,填充上下文 CGContextFillPath(ctx);
}
```
-
畫文字- (void)drawRect:(CGRect)rect { // 這是用來(lái)存儲(chǔ)文字屬性的字典 NSMutableDictionary *attr = [NSMutableDictionary dictionary]; // 設(shè)置文字前景色為綠色 attr[NSForegroundColorAttributeName] = [UIColor greenColor]; // 設(shè)置文字大小為30號(hào)字體 attr[NSFontAttributeName] = [UIFont systemFontOfSize:30]; NSString *str = @"你是我的小靜...."; // 設(shè)置str畫的范圍和str的屬性 [str drawInRect:CGRectMake(100, 10, 200, 100) withAttributes:attr]; } - 畫圖片
- (void)drawRect:(CGRect)rect{ UIImage *image = [UIImage imageNamed:@"wife.jpg"]; // 從一個(gè)點(diǎn)開始畫 [image drawAtPoint:CGPointMake(100, 100)]; // 指定一個(gè)區(qū)域開始畫 // [image drawInRect:CGRectMake(10, 10, 100, 100)]; // 以平鋪的方式在一個(gè)區(qū)域開始畫 // [image drawAsPatternInRect:CGRectMake(100, 10, 100, 100)];
}
```
三. 圖形上下文棧
圖形上下文棧主要可以通過(guò)棧保留上下文的樣式
CGContextSaveGState(ctx);,也可以Restore樣式,來(lái)達(dá)到恢復(fù)默認(rèn)的樣式CGContextRestoreGState(ctx);
- (void)drawRect:(CGRect)rect{
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 圖形上下文棧 相當(dāng)于把一個(gè)純潔的ctx放到棧中
CGContextSaveGState(ctx);
// 從哪一個(gè)點(diǎn)開始
CGContextMoveToPoint(ctx, 100, 100);
CGContextAddLineToPoint(ctx, 200, 400);
// 設(shè)置顏色為紅色
CGContextSetRGBStrokeColor(ctx, 1, 0, 0, 1);
// 設(shè)置線條的兩端樣式為圓滑
CGContextSetLineCap(ctx, kCGLineCapRound);
// 設(shè)置線條的寬度
CGContextSetLineWidth(ctx, 10);
CGContextStrokePath(ctx);
// 出棧(意味著以前的上下文屬性不復(fù)存在了)
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);
// 設(shè)置上下文需要裁剪的區(qū)域
CGContextAddArc(ctx, 50, 50, 50, 0, M_PI*2 , 1);
// 裁剪
CGContextClip(ctx);
UIImage *image = [UIImage imageNamed:@"me"];
[image drawInRect:CGRectMake(0, 0, 100, 100)];
// 使樣式恢復(fù)至默認(rèn)(相當(dāng)于出棧)
CGContextRestoreGState(ctx);
}
六. 重新繪制
// Marks the receiver’s entire bounds rectangle as needing to be redrawn
[self setNeedsDisplay];
// 常常用在改變繪制路徑的某些屬性值后,需要調(diào)用這個(gè)方法重新繪制,達(dá)到改變展示效果的需求
七. 小案例
-
利用圖形上下文實(shí)現(xiàn)小圖片,到大圖片之間的轉(zhuǎn)換(可以實(shí)現(xiàn)條紋背景)
- (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]; }
八. 補(bǔ)充
-
保存圖片到相冊(cè)
// 保存image到相冊(cè) UIImageWriteToSavedPhotosAlbum(image, NULL, NULL, NULL); -
訪問(wèn)相冊(cè)
// 創(chuàng)建圖片選擇控制器 UIImagePickerController *vc = [[UIImagePickerController alloc]init]; vc.allowsEditing = YES; // 設(shè)置代理 vc.delegate = self; // 彈出圖片選擇控制器,并可以在completion中添加彈出完畢后執(zhí)行您想要進(jìn)行的操作 [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;
