Quartz2D 是什么沟启？####
Quartz2D是一款蘋果公司繪圖工具類，用于繪制線條犹菇，矩形德迹，扇形，圓等基本圖形高級(jí)一點(diǎn)他可以繪制圖片和文字揭芍，也可以通過各種組合繪制出華麗的圖表胳搞，比如扇形，條形，折線形肌毅，也可以繪制出更復(fù)雜的圖形筷转，只要能想得到的二維形狀，他都可以悬而。而且一份代碼允許同時(shí)運(yùn)行在OX和IOS兩個(gè)平臺(tái)上呜舒。繪圖中直接調(diào)用C語(yǔ)言實(shí)現(xiàn)各種繪圖，也可以使用貝塞爾(Bezier)曲線繪制摊滔，貝塞爾曲線的優(yōu)勢(shì)主要在于對(duì)底層C語(yǔ)言做了層封裝阴绢，使繪圖更加面向?qū)ο螅皇且欢鸭僀語(yǔ)言艰躺，具體請(qǐng)看以下操作呻袭。
繪圖的流程
通過Quartz2D繪圖必須有四個(gè)步驟：
- 創(chuàng)建上下文(Context)（這里的上下文可以理解為我們畫畫時(shí)用的畫板）
- 繪圖路徑（在大腦里構(gòu)思出的繪圖圖案）
- 將繪圖路徑添加到上下文（將大腦中的構(gòu)思的圖案模型刻到畫板中）
- 渲染上下文（給圖案上色，顯示出來）
繪制一條線
- (void)drawLine {
// 1.創(chuàng)建上線文
CGContextRef ref = UIGraphicsGetCurrentContext();
// 2.創(chuàng)建繪圖路徑
CGContextMoveToPoint(ref, 14, 19);
// 3.將繪圖路徑添加到上線文
CGContextAddLineToPoint(ref, 45, 63);
// 4.渲染圖像
CGContextStrokePath(ref);
}
通過路徑畫一條線
- (void)drawPathLine {
// 創(chuàng)建上下文
CGContextRef ref = UIGraphicsGetCurrentContext();
// 創(chuàng)建繪圖路徑對(duì)象
CGMutablePathRef path = CGPathCreateMutable();
// 路徑的起點(diǎn)
CGPathMoveToPoint(path, NULL, 34, 23);
// 路徑的終點(diǎn)
CGPathAddLineToPoint(path, NULL, 56, 43);
// 將路徑點(diǎn)添加到路徑對(duì)象中
CGContextAddPath(ref, path);
// 繪圖
CGContextStrokePath(ref);
}
畫多條線
- (void)drawMoreLine {
// create context
CGContextRef ref = UIGraphicsGetCurrentContext();
// set start point
CGContextMoveToPoint(ref, 123, 45);
// set before more point
CGContextAddLineToPoint(ref, 45, 80);
CGContextAddLineToPoint(ref, 223, 159);
CGContextAddLineToPoint(ref, 41, 50);
// set line color
[[UIColor redColor] set];
// set line width
CGContextSetLineWidth(ref, 10);
CGContextSetLineJoin(ref, kCGLineJoinMiter);
CGContextSetLineCap(ref, kCGLineCapButt);
// draw line
CGContextStrokePath(ref);
}
繪制曲線
- (void)drawCurve {
CGFloat x = 100;
CGFloat y = 100;
CGContextRef ref = UIGraphicsGetCurrentContext();
CGContextMoveToPoint(ref, 0, 0);
/**@param c#> 圖形上下文
* @param cpx#> 突出的x值
* @param cpy#> 突出的y值
* @param x#> 曲線結(jié)束的x點(diǎn)
* @param y#> 曲線結(jié)束的y點(diǎn)
**/
CGContextAddQuadCurveToPoint(ref, x/2, y, x, 0);
CGContextStrokePath(ref);
}
繪制一個(gè)扇形
- (void)drawSector {
CGContextRef ref = UIGraphicsGetCurrentContext();
CGFloat centerX = 100;
CGFloat centerY = 100;
CGFloat radius = 30;
CGContextMoveToPoint(ref, centerX, centerY);
CGContextAddArc(ref, centerX, centerY, radius, M_PI, M_PI_2, NO);
[[UIColor orangeColor]set];
CGContextClosePath(ref);
CGContextFillPath(ref);
}
貝塞爾曲線
- (void)drawBezierLine {
// 創(chuàng)建路徑
// UIBezierPath *path = [UIBezierPath bezierPath];
// 畫起點(diǎn)
// [path moveToPoint:CGPointMake(23, 45)];
// 畫終點(diǎn)
// [path addLineToPoint:CGPointMake(66, 88)];
// 繪圖
// [path stroke];
CGRect rect = CGRectMake(10,10, self.bounds.size.width-20, self.bounds.size.height-20);
UIBezierPath *path = [UIBezierPath bezierPathWithRect:rect]; // 畫矩形
[[UIColor redColor]set];
// UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:rect.size.width/2]; // 畫圓
[path fill];
}
做一個(gè)匯總的例子
效果圖
Simulator Screen Shot 2016年8月18日 上午10.48.25.png
實(shí)現(xiàn)代碼：
// 工具類 產(chǎn)生隨機(jī)顏色
- (UIColor *)getRandomColor {
CGFloat randRed = arc4random_uniform(256)/255.0;
CGFloat randGreen = arc4random_uniform(256)/255.0;
CGFloat randBlue = arc4random_uniform(256)/255.0;
return [UIColor colorWithRed:randRed green:randGreen blue:randBlue alpha:1];
}
// 測(cè)試數(shù)據(jù)類腺兴，存放都條形圖的反高度
- (NSArray *)columuarNum {
if (!_columuarNum) {
_columuarNum = @[@23,@34,@93,@100,@55,@46,@70,@10];
}
return _columuarNum;
}
// 繪圖類
- (void)drawColumuar {
int clumuarCounting = (int)self.columuarNum.count;
CGFloat margin = 20 ;
CGFloat width = (self.bounds.size.width - (margin*clumuarCounting + margin)) / clumuarCounting;
// -- 折線圖
if (self.columuarNum) {
// 設(shè)置折線
CGContextRef refs = UIGraphicsGetCurrentContext();
CGContextMoveToPoint(refs, (margin+(width/2)), self.bounds.size.height - [[self.columuarNum objectAtIndex:0] doubleValue] - 100);
for (int i = 0; i < clumuarCounting; i++) {
CGFloat x = margin + (margin * i) + (width * i);
CGFloat y = self.bounds.size.height - [[self.columuarNum objectAtIndex:i] doubleValue] - 100;
CGContextAddLineToPoint(refs, x+(width/2), y);
CGContextSetLineJoin(refs, kCGLineJoinBevel);
CGContextSetLineCap(refs, kCGLineCapRound);
}
[[UIColor whiteColor]set];
CGContextSetLineWidth(refs, 2);
CGContextStrokePath(refs);
// 設(shè)置折線點(diǎn)的圓點(diǎn)
for (int i = 0; i < clumuarCounting; i++) {
CGFloat x = margin + (margin * i) + (width * i);
CGFloat y = self.bounds.size.height - [[self.columuarNum objectAtIndex:i] doubleValue] - 100;
CGRect rect = CGRectMake(x+10, y-5, 10, 10);
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:5];
[[UIColor whiteColor]set];
[path fill];
}
// 設(shè)置文字
for (int i = 0; i < clumuarCounting; i++) {
NSString *data1 = [NSString stringWithFormat:@"￥%@",[self.columuarNum objectAtIndex:i]] ;
CGFloat x = margin + (margin * i) + (width * i);
CGFloat y = self.bounds.size.height - [[self.columuarNum objectAtIndex:i] doubleValue] - 100;
CGRect rect = CGRectMake(x, y-20, 30, y);
UIFont *font = [UIFont systemFontOfSize:10];
UIColor *color = [UIColor whiteColor];
NSMutableParagraphStyle *style = [[NSMutableParagraphStyle alloc]init];
NSTextAlignment align = NSTextAlignmentLeft; // 對(duì)齊方式
style.alignment = align;
[data1 drawInRect:rect withAttributes:@{NSFontAttributeName:font,NSForegroundColorAttributeName:color,NSParagraphStyleAttributeName:style}];
}
}
// 設(shè)置柱形
CGContextRef ref = UIGraphicsGetCurrentContext();
for (int i = 0; i < self.columuarNum.count; i++) {
CGFloat x = margin + (margin * i) + (width * i);
CGFloat y = self.bounds.size.height - [[self.columuarNum objectAtIndex:i] doubleValue];
CGRect rect = CGRectMake(x, y, width, [[self.columuarNum objectAtIndex:i] doubleValue]);
CGContextAddRect(ref, rect);
[[self getRandomColor]set];
CGContextClosePath(ref);
CGContextFillPath(ref);
}
}
總結(jié)
文中簡(jiǎn)單的介紹了Quart2D的使用左电，但基本滿足開發(fā)中所需，如果有不到位請(qǐng)反饋?zhàn)髡咭诚欤髡邥?huì)及時(shí)更新篓足。文章或許存在不足，歡迎你來挑刺闰蚕，如果感興趣請(qǐng)?zhí)砑観Q群：126440594 栈拖。
