Quartz2D 是什么？####
Quartz2D是一款苹果公司绘图工具类，用于绘制线条，矩形，扇形，圆等基本图形高级一点他可以绘制图片和文字，也可以通过各种组合绘制出华丽的图表，比如扇形，条形，折线形，也可以绘制出更复杂的图形，只要能想得到的二维形状，他都可以。而且一份代码允许同时运行在OX和IOS两个平台上。绘图中直接调用C语言实现各种绘图，也可以使用贝塞尔(Bezier)曲线绘制，贝塞尔曲线的优势主要在于对底层C语言做了层封装，使绘图更加面向对象，而不是一堆纯C语言，具体请看以下操作。
绘图的流程
通过Quartz2D绘图必须有四个步骤：
- 创建上下文(Context)（这里的上下文可以理解为我们画画时用的画板）
- 绘图路径（在大脑里构思出的绘图图案）
- 将绘图路径添加到上下文（将大脑中的构思的图案模型刻到画板中）
- 渲染上下文（给图案上色，显示出来）
绘制一条线
- (void)drawLine {
// 1.创建上线文
CGContextRef ref = UIGraphicsGetCurrentContext();
// 2.创建绘图路径
CGContextMoveToPoint(ref, 14, 19);
// 3.将绘图路径添加到上线文
CGContextAddLineToPoint(ref, 45, 63);
// 4.渲染图像
CGContextStrokePath(ref);
}
通过路径画一条线
- (void)drawPathLine {
// 创建上下文
CGContextRef ref = UIGraphicsGetCurrentContext();
// 创建绘图路径对象
CGMutablePathRef path = CGPathCreateMutable();
// 路径的起点
CGPathMoveToPoint(path, NULL, 34, 23);
// 路径的终点
CGPathAddLineToPoint(path, NULL, 56, 43);
// 将路径点添加到路径对象中
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#> 曲线结束的x点
* @param y#> 曲线结束的y点
**/
CGContextAddQuadCurveToPoint(ref, x/2, y, x, 0);
CGContextStrokePath(ref);
}
绘制一个扇形
- (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 {
// 创建路径
// UIBezierPath *path = [UIBezierPath bezierPath];
// 画起点
// [path moveToPoint:CGPointMake(23, 45)];
// 画终点
// [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];
}
做一个汇总的例子
效果图
Simulator Screen Shot 2016年8月18日 上午10.48.25.png
实现代码：
// 工具类 产生随机颜色
- (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];
}
// 测试数据类，存放都条形图的反高度
- (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) {
// 设置折线
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);
// 设置折线点的圆点
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];
}
// 设置文字
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; // 对齐方式
style.alignment = align;
[data1 drawInRect:rect withAttributes:@{NSFontAttributeName:font,NSForegroundColorAttributeName:color,NSParagraphStyleAttributeName:style}];
}
}
// 设置柱形
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);
}
}
总结
文中简单的介绍了Quart2D的使用，但基本满足开发中所需，如果有不到位请反馈作者，作者会及时更新。文章或许存在不足，欢迎你来挑刺，如果感兴趣请添加QQ群：126440594 。
网友评论
报错怎么解决