Quartz 2 Dの進捗バー、円グラフ、柱状図

Quartz 2 D実戦

は、前の図面の基礎知識を学び、進捗バー、円グラフ、柱状図など、複雑な図形の描画を行うことができます.

進捗バー

プログレスバーを描画するには、描画された円弧

を制御することが重要です.

    //        
    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];