Quartz2D
Quartz2D是一個二維繪圖引擎,iOS和Mac都支持
我們可以用來:
- 繪制圖形
- 繪制文字
- 繪制、生成圖片(圓形頭像)
- 讀取仔拟、生成PDF
- 截圖姆泻、裁剪圖片(常用)
- 自定義UI控件(常用)
- 手勢解鎖
基本圖形繪制
圖形上下文(CGContextRef)
保存繪圖信息咒唆、繪圖狀態(tài)
決定繪制的輸出目標(biāo)(Bitmap、PDF了讨、Window捻激、Layer、Printer)
自定義view步驟
- 實(shí)現(xiàn)drawRect方法
- 取得當(dāng)前view相關(guān)聯(lián)的圖形上下文
- 繪制相應(yīng)的圖形內(nèi)容
- 利用圖形上下文將繪制的所有內(nèi)容渲染顯示到view上面
繪制圖形的原理是這樣的 這里是面對C語言的 不是面向?qū)ο罅?br> Ref表示引用
// 只有在drawRect才能獲取圖形上下文(上面5種中的layer)
- (void)drawRect:(CGRect)rect {
// 1.獲取圖形上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 2.描述路徑(路徑 create )
CGMutablePathRef path = CGPathCreateMutable();
// path:給哪個路徑設(shè)置起點(diǎn)
CGPathMoveToPoint(path, NULL, 50, 50);
// 添加一個線到某個點(diǎn)
CGPathAddLineToPoint(path, NULL, 200, 200);
// 3.把路徑添加到上下文
CGContextAddPath(ctx, path);
// 4.渲染上下文(Bitmap,PDF 等)
CGContextStrokePath(ctx);
}
其實(shí)可以用我們比較熟悉面向?qū)ο蟮姆绞?比如貝塞爾曲線
- (void)drawRect:(CGRect)rect {
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(50, 50)];
[path addLineToPoint:CGPointMake(200, 200)];
// path.lineWidth
// path.lineCapStyle
// path.lineJoinStyle
[path stroke];//stroke是描邊
}
補(bǔ)充1： 下面這種不好的地方在于 好幾條線都是一個path 不好管理
- (void)drawRect:(CGRect)rect {
// 1.獲取圖形上下文
CGContextRef ctx = UIGraphicsGetCurrentContext();
// 2.描述路徑(直接控制上下文)
CGContextMoveToPoint(ctx, 50, 50);
CGContextAddLineToPoint(ctx, 100, 50);
// 默認(rèn)起點(diǎn)是從上一個線的終點(diǎn) (如果不想連在一起 就在MoveToPoint)
CGContextAddLineToPoint(ctx, 100, 200);
// 顏色
[[UIColor greenColor] setStroke];
// 線寬
CGContextSetLineWidth(ctx, 10);
// 設(shè)置連接樣式
CGContextSetLineJoin(ctx, kCGLineJoinRound);
// 設(shè)置頂角樣式
CGContextSetLineCap(ctx, kCGLineCapRound);
// 4.渲染上下文(Bitmap,PDF 等)
CGContextStrokePath(ctx);
}
當(dāng)這個view要顯示的時候才會調(diào)用drawRect繪制圖形rect為當(dāng)前控件的bounds
繪制其他圖形
- 曲線(UIBezier畫不了曲線)
// path:路徑
// controlPointX 150
// controlPointY 150
// 終點(diǎn)x
// 終點(diǎn)y
CGPathAddQuadCurveToPoint(path, NULL, 150, 150, 250, 50);
- 圓形
- (void)drawRect:(CGRect)rect {
// Drawing code
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(20, 20, 200, 200) cornerRadius:100];
[path stroke];
}
- 矩形
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(20, 20, 200, 200)];
// 如果path是封閉路徑 可以填充
[path fill];
- 圓弧
// 起點(diǎn)是右邊中間(時鐘3點(diǎn)位置)
// Center 圓心
// radios 半徑
// startAngle 開始弧度
// endAngle 結(jié)束弧度
// clockwise yes順時針 NO逆時針
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(125, 125) radius:40 startAngle:0 endAngle:M_PI_2 clockwise:NO];
//
[path stroke];
- 扇形(圓弧終點(diǎn)連到圓心 然后關(guān)閉路徑)
CGPoint circleCenter = CGPointMake(125, 125);
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:circleCenter radius:40 startAngle:0 endAngle:M_PI_2 clockwise:YES];
[path addLineToPoint:circleCenter];
[path closePath];
[path stroke];
- 餅狀圖(PieChart)
- (void)drawRect:(CGRect)rect {
NSArray *arr = @[@25, @12, @13, @30, @20];
CGFloat radius = rect.size.width * 0.5;
CGPoint center = CGPointMake(radius, radius);
CGFloat startAngle = -M_PI_2;
CGFloat endAngle = 0;
CGFloat angle = 0;
for (NSNumber *value in arr) {
CGFloat red = (arc4random() % 255) / 255.0f;
CGFloat green = (arc4random() % 255) / 255.0f;
CGFloat blue = (arc4random() % 255) / 255.0f;
angle = [value floatValue] / 100.0f * (M_PI * 2);
endAngle = startAngle + angle;
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES];
[path addLineToPoint:center];
[path closePath];
[[UIColor colorWithRed:red green:green blue:blue alpha:1] set];
[path fill];
startAngle = endAngle;
}
}
屏幕快照 2016-06-27 下午5.20.35.png
- 柱狀圖(ColumnChart)
- (void)drawRect:(CGRect)rect {
NSArray *arr = @[@10, @20, @30, @40];
CGFloat x = 0;
CGFloat y = 0;
CGFloat w = 0;
CGFloat h = 0;
NSInteger i = 0;
for (NSNumber *value in arr) {
CGFloat red = (arc4random() % 255) / 255.0f;
CGFloat green = (arc4random() % 255) / 255.0f;
CGFloat blue = (arc4random() % 255) / 255.0f;
w = rect.size.width / (2 * arr.count - 1);
x = 2 * w * i;
h = [value floatValue] / 100.0f * rect.size.height;
y = rect.size.height - h;
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(x, y, w, h)];
[[UIColor colorWithRed:red green:green blue:blue alpha:1] set];
[path fill];
i++;
}
}
屏幕快照 2016-06-27 下午5.54.30.png
- 繪制文字圖片
- (void)drawRect:(CGRect)rect {
NSString *name = @"Sniper is a very very very very very very very very very very very very very very very very very very very very good boy";
NSMutableDictionary *textAttr = [NSMutableDictionary dictionary];
[textAttr setObject:[UIColor redColor] forKey:NSForegroundColorAttributeName];
[textAttr setObject:[UIFont systemFontOfSize:30] forKey:NSFontAttributeName];
// 設(shè)置文字描邊寬度
[textAttr setObject:@3 forKey:NSStrokeWidthAttributeName];
// 設(shè)置文字顏色
[textAttr setObject:[UIColor greenColor] forKey:NSStrokeColorAttributeName];
// 創(chuàng)建陰影對象
NSShadow *shadow = [[NSShadow alloc] init];
shadow.shadowBlurRadius = 3;
shadow.shadowColor = [UIColor orangeColor];
shadow.shadowOffset = CGSizeMake(4, 4);
[textAttr setObject:shadow forKey:NSShadowAttributeName];
// 文字的起點(diǎn) (不會換行)
// [name drawAtPoint:CGPointZero withAttributes:textAttr];
[name drawInRect:rect withAttributes:textAttr];
}
屏幕快照 2016-06-27 下午6.13.46.png
- (void)drawRect:(CGRect)rect {
UIImage *img = [UIImage imageNamed:@"golee.png"];
// 裁剪必須放在繪制之前
UIRectClip(CGRectMake(0, 0, 50, 50));
// 繪制
// [img drawInRect:rect]; // 填充
[img drawAsPatternInRect:rect]; // 平鋪
}
屏幕快照 2016-06-27 下午6.36.56.png
CADisplayLink
如果在繪圖的時候需要用到定時器,通常
// CADisplayLink 每次屏幕刷新的時候都會調(diào)用 (屏幕一般一秒鐘刷新60次)
CADisplayLink *link = [CADisplayLink displayLinkWithTarget:self selector:@selector(timerChanged)];
[link addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSDefaultRunLoopMode];
- (void)timerChanged {
// 這個方法不會讓drawRect馬上執(zhí)行,這個方法只是給當(dāng)前控件添加刷新的標(biāo)記,等下一次屏幕刷新的時候才會調(diào)用drawrect方法 用CADisplayLink 讓刷新明目和timer的時間間隔保持一致 防止卡頓
[self setNeedsDisplay];
}
矩陣操作
- (void)drawRect:(CGRect)rect {
CGContextRef ctx = UIGraphicsGetCurrentContext();
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(50, 50)];
[path addLineToPoint:CGPointMake(200, 200)];
// 平移 x平移100 y平移50
CGContextTranslateCTM(ctx, 50, 50);
// 縮放
CGContextScaleCTM(ctx, 2, 2);
// 旋轉(zhuǎn) 45度
CGContextRotateCTM(ctx, M_PI_4);
// 矩陣操作必須要在添加路徑之前
CGContextAddPath(ctx, path.CGPath);
CGContextStrokePath(ctx);
}
注意點(diǎn):
drawRect 不可以手動調(diào)用,因?yàn)槲覀儾荒軇?chuàng)建圖形上下文 只能由系統(tǒng)幫我們創(chuàng)建,并且傳遞給drawRect
想重新繪制 調(diào)用setNeedsDisplay比較好用
