Quartz2D 之饼状图、柱状图、进度条


Quartz2D绘图的代码步骤
1.获得图形上下文

CGContextRef ctx= UIGraphicsGetCurrentContext();

2.拼接路径(下面代码是搞一条线段)

CGContextMoveToPoint(ctx,10, 10);

CGContextAddLineToPoint(ctx,100, 100);

3.绘制路径

CGContextStrokePath(ctx); //CGContextFillPath(ctx);


饼状图

- (void)drawRect:(CGRect)rect
{

      NSArray * data = @[@30, @15, @5, @17, @3, @10, @20];
    
    // 1.获取图形上下文
    
    CGContextRef ctxRef = UIGraphicsGetCurrentContext();
    
    // 起始角度
    CGFloat startA = 0;
    
    for (int i = 0; i < data.count; i ++) {
        
        // 取出元素
       int num = [data[i] intValue];
        
        // 度数
        CGFloat angle = num / 100.0 * M_PI * 2;
        
        // 中心点
        CGPoint center = CGPointMake(150, 150);
        // 半径
        CGFloat rad = 100;
        // 终止角度
        CGFloat endA = startA + angle;
        // 创建<span style="font-family: Arial, Helvetica, sans-serif;">UIBezierPath对象</span>

        UIBezierPath * path = [UIBezierPath bezierPathWithArcCenter:center radius:rad startAngle:startA endAngle:endA clockwise:YES];
        
        [path addLineToPoint:center];
        // 颜色
        [[UIColor colorWithRed:arc4random_uniform(256) / 255.0 green:arc4random_uniform(256) / 255.0 blue:arc4random_uniform(256) / 255.0 alpha:1.0] setFill];
        
        CGContextAddPath(ctxRef, path.CGPath);
        
        // 渲染
        CGContextDrawPath(ctxRef, kCGPathFill);
        
          startA = endA;

    }
     
}



柱状图

- (void)drawRect:(CGRect)rect
{

    NSArray * data = @[@300, @150.65, @55.3, @507.7, @95.8, @700, @650.65];
    // 获取图形上下文
    
    CGContextRef ctxRef = UIGraphicsGetCurrentContext();
    
    for (int i = 0; i < data.count; i ++) {
        
      float num = [data[i] floatValue];
        
        // 高度
        float height = num / 1000.0 * rect.size.height;
        
        float width = rect.size.width / (data.count * 2 - 1);
        
        // x
        CGFloat x = width * 2 * i;
        // y
        CGFloat y = rect.size.height - height;
        
        UIBezierPath * path = [UIBezierPath bezierPathWithRect:CGRectMake(x, y, width,height)];
        
        // 颜色
        [[UIColor colorWithRed:arc4random_uniform(256) / 255.0 green:arc4random_uniform(256) / 255.0 blue:arc4random_uniform(256) / 255.0 alpha:1.0] setFill];
        
        CGContextAddPath(ctxRef, path.CGPath);
        
        // 渲染
        CGContextDrawPath(ctxRef, kCGPathFill);
    }
    
   
}


进度条

- (void)drawRect:(CGRect)rect
{

    // 获取图形上下文
    
    CGContextRef ctxRef = UIGraphicsGetCurrentContext();
    
    CGPoint center = CGPointMake(150, 150);
    
    CGFloat r1 = 100;
    
    CGFloat r2 = 70;
    
    CGFloat startA = - M_PI_2;
    
    CGFloat endA = self.angle * M_PI * 2 - M_PI_2;
    
    UIBezierPath * path = [UIBezierPath bezierPathWithArcCenter:center radius:r1 startAngle:startA endAngle:endA clockwise:YES];
    
    UIBezierPath * path2 = [UIBezierPath bezierPathWithArcCenter:center radius:r2 startAngle:endA endAngle:startA clockwise:NO];
    
    
    [path addLineToPoint:center];
    
    [path2 addLineToPoint:center];
    [[UIColor greenColor] setFill];
        
    CGContextAddPath(ctxRef, path.CGPath);
    CGContextAddPath(ctxRef, path2.CGPath);

        
        // 渲染
    CGContextDrawPath(ctxRef, kCGPathFill);
    
}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值