Quartz2D 应用

来源:互联网 时间:2017-01-22


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 。




相关阅读:
Top