iOS draw filled Circles iOS draw filled Circles ios ios

iOS draw filled Circles


I like the answer from @AaronGolden, just wanted to add:

CGRect borderRect = CGRectInset(rect, 2, 2);

Or, better:

CGFloat lineWidth = 2;CGRect borderRect = CGRectInset(rect, lineWidth * 0.5, lineWidth * 0.5);


Those circles are just getting clipped to the bounds of the views that draw them. The views must be slightly larger than the circles to be drawn. You can imagine the CGContextStrokeEllipseInRect call tracing a circle of radius 30 and then painting one pixel on each side of the traced curve. Well on the far edges you're going to have one of those pixels just outside the boundary of the view.

Try making your views something like 62x62, or make the circle radius slightly smaller to leave room for the thick stroke in your 60x60 views.


I Wrote this so that you can draw many circles easily.

Add the following code to your .m file:

- (void) circleFilledWithOutline:(UIView*)circleView fillColor:(UIColor*)fillColor outlineColor:(UIColor*)outlinecolor{CAShapeLayer *circleLayer = [CAShapeLayer layer];float width = circleView.frame.size.width;float height = circleView.frame.size.height;[circleLayer setBounds:CGRectMake(2.0f, 2.0f, width-2.0f, height-2.0f)];[circleLayer setPosition:CGPointMake(width/2, height/2)];UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(2.0f, 2.0f, width-2.0f, height-2.0f)];[circleLayer setPath:[path CGPath]];[circleLayer setFillColor:fillColor.CGColor];[circleLayer setStrokeColor:outlinecolor.CGColor];[circleLayer setLineWidth:2.0f];[[circleView layer] addSublayer:circleLayer];}

Then Add the following code to your view did load and replace "yourView" with any view that you want to place the circle in. If you want to make a bunch of circles just add some small views to the page and repeat the code below. The circle will become the size of the view you make.

[self circleFilledWithOutline:self.yourView fillColor:[UIColor redColor] outlineColor:[UIColor purpleColor]];