Quartz2D 应用

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 。