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 。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • Quartz2D
    Quartz2D以及drawRect的重绘机制字数1487 阅读21 评论1 喜欢1一、什么是Quartz2D Q...
    PurpleWind阅读 4,266评论 0赞 3
  • iOS开发系列--打造自己的“美图秀秀”
    --绘图与滤镜全面解析 概述 在iOS中可以很容易的开发出绚丽的界面效果，一方面得益于成功系统的设计，另一方面得益...
    韩七夏阅读 7,841评论 2赞 10
  • canvas笔记
    一：canvas简介 1.1什么是canvas？ ①：canvas是HTML5提供的一种新标签 ②：HTML5 ...
    GreenHand1阅读 10,205评论 2赞 32
  • Quartz2D
    Quartz2D 简介 Quartz2D是二维(平面)的绘图引擎(经包装的函数库，方便开发者使用。也就是说苹果帮我...
    iOS_Cqlee阅读 3,785评论 0赞 2
  • Quartz2D以及drawRect的重绘机制
    一、什么是Quartz2D Quartz2D是⼀个二维绘图引擎,同时支持iOS和Mac系统Quartz2D的API...
    CoderZb阅读 6,774评论 4赞 17

友情链接更多精彩内容