CODEWITHSUNDEEP
iphoneobjective-ciosipad
booker
booker

Reputation: 1286

Draw a percentage of a circle

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

Heberger image
(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.

Upvotes: 1

Views: 808

Answers (3)

Abdullah Umer
Abdullah Umer

Reputation: 4624

Adding to Levi's suggestion.

You can scale the rect image using CGAffineTransformScale.

e.g:

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.

Upvotes: 0

msk
msk

Reputation: 8905

// 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.

Upvotes: 1

Levi
Levi

Reputation: 7343

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!

Upvotes: 4

Related Questions