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

Quartz2D实战

• 学习了前面的绘图的基础知识，就可以进行复杂图形的绘制，比如：进度条、饼图、柱状图等。

进度条

• 绘制进度条，关键的就是要控制好绘制的弧度

    // 创建贝瑟尔路径
    CGFloat radius = rect.size.width * 0.5;
    CGPoint center = CGPointMake(radius, radius);


    CGFloat endA = -M_PI_2 + _progress * M_PI * 2;

    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius - 2 startAngle:-M_PI_2 endAngle:endA clockwise:YES];
    // 设置颜色
    //[[UIColor greenColor] set];
    // 设置线宽
    //path.lineWidth = 3;
    // 填充的时候需要设置
    //[path addLineToPoint:center];
    [path stroke];

饼图

• 绘制饼图和绘制进度条很相似
• 重要的是如何计算每一部分的弧度是多少

    CGFloat radius = self.bounds.size.width * 0.5;
    CGPoint center = CGPointMake(radius, radius);


    CGFloat startA = 0;
    CGFloat angle = 0;
    CGFloat endA = 0;


    // 第一个扇形
    angle = 0.25 * M_PI * 2;
    endA = startA + angle;
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];

    // 添加一根线到圆心
    [path addLineToPoint:center];

    // 描边和填充通用
    [[UIColor redColor] set];

    [path fill];

    // 第二个扇形
    startA = endA;
    angle = 0.25 * M_PI * 2;
    endA = startA + angle;
    UIBezierPath *path1 = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];

    // 添加一根线到圆心
    [path1 addLineToPoint:center];

    // 描边和填充通用
    [[UIColor greenColor] set];

    [path1 fill];

    // 第二个扇形
    startA = endA;
    angle = 0.5 * M_PI * 2;
    endA = startA + angle;
    UIBezierPath *path2 = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startA endAngle:endA clockwise:YES];

    // 添加一根线到圆心
    [path2 addLineToPoint:center];

    // 描边和填充通用
    [[UIColor blueColor] set];

    [path2 fill];

柱状图

• 柱状图就是绘制一个又一个矩形
• 绘制柱状图最关键的就是计算绘制的CGRect

// 绘制一个矩形的代码
    CGRect rectt = CGRectMake(0, 0, 20, 100);
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:rectt];
    [[UIColor redColor] set];
    [path fill];