画一个圆的百分比

Question

I would like to draw a circle like those in the picture in objective-c :

_{(source: hostingpics.net )}

I just want to draw the blue circle filled with the corresponding percentage starting from the bottom. (NB : the range of the percentage is between 0 and 100) Don't worry about the tick in the center, it's just an imageView added over the circle view.

Answer 1

You could make 2 image views. One would contain your circle with the check mark, and the rest transparent. The other image would be below that, with a light blue rectangle. As the percentage increases, you raise the blue rectangle more and more by modifying it's frame. It would be visible of course through the transparent part of the image on top.

Hope this helps!

Answer 2

// Draw circle of radius r and center X,Y
CGRect r;
r.origin.y = Y-radius;
r.origin.x = X-radius;
r.size.width = 2*radius;
r.size.height 2*radius;

CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextAddEllipseInRect(ctx, r);
CGContextSetFillColor(ctx, CGColorGetComponents([[UIColor lightGray] CGColor]));
CGContextFillPath(ctx);

// Draw a blue color filled path. Below is half circle filled with blue color.
CGContextBeginPath(ctx);
CGContextAddArc(ctx, X, Y, r, -M_PI_2, M_PI_2, 1);
CGContextClosePath(ctx); // could be omitted
CGContextSetFillColorWithColor(ctx, [UIColor blueColor].CGColor);
CGContextFillPath(ctx);

Idea is to draw a circle and fill it with light gray color and than draw and close path from arc of the circle (whatever angle is required) and fill it with blue color.

Answer 3

Adding to Levi's suggestion.

You can scale the rect image using CGAffineTransformScale .

eg:

CGAffineTransform transform = self.rectImageView.transform;
float scale = 0.5;
self.rectImageView.transform = CGAffineTransformScale(transform, 1, scale);

This will scale the image to 50%

to set it back to 100%, just set scale = 2.