drawRect() draw a custom shape, why can't fill color?

Question

I 'm writing a custom shaped HUD and filling it with some color, but I can't fill the right part of my HUD.

#define startX 20
#define startY 20
#define circleDiameter 60
#define PI 3.14159265358979323846

Here is the code:

- (void)drawRect:(CGRect)rect

CGContextClearRect(UIGraphicsGetCurrentContext(), rect);
CGContextRef context = UIGraphicsGetCurrentContext();

CGContextSetFillColorWithColor(context, [UIColor clearColor].CGColor);
CGContextFillRect(context,self.bounds);

CGContextSetLineWidth(context, 1.0f);
CGContextSetFillColorWithColor(context, [UIColor colorWithRed:0 green:255 blue:0 alpha:0.5].CGColor);
CGRect circlePoint = CGRectMake(startX, startY, circleDiameter, circleDiameter);
CGContextFillEllipseInRect(context, circlePoint);
CGContextSetStrokeColorWithColor(context, [UIColor blackColor].CGColor);
CGContextAddEllipseInRect(context, circlePoint);
CGContextStrokePath(context);

CGContextSetLineWidth(context, 1.0f);

CGContextSetStrokeColorWithColor(context, [UIColor blackColor].CGColor);

CGContextSetFillColorWithColor(context, [UIColor colorWithRed:0 green:255 blue:0 alpha:0.5].CGColor);
CGContextBeginPath(context);
//line start x.
CGContextMoveToPoint(context, 70, 28);
CGContextAddLineToPoint(context, 170, 28);
CGContextMoveToPoint(context, 70, 72);
CGContextAddLineToPoint(context, 170, 72);
CGContextStrokePath(context);
//draw radius
CGContextAddArc(context, 170, 50, 22, -PI/2, PI/2, 0);
CGContextStrokePath(context);

CGContextClosePath(context);
CGContextFillPath(context);
}

I want to fill the whole path with the color green, what should I do?

here is the result snapshot.:

use `M_PI`, not `#define PI 3.14159265358979323846` (obviously, not going to answer your question) — justin, Jul 16 '13 at 06:51
`UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(55, 28, 140, 44) cornerRadius:22]; CGContextSetFillColorWithColor(context, [UIColor colorWithRed:0 green:255 blue:0 alpha:0.5].CGColor); [bezierPath fill];` — Bala, Jul 16 '13 at 07:41
try this bellow `CGContextClosePath(context); CGContextFillPath(context);` — Bala, Jul 16 '13 at 07:42
yeah,It worked. Please answer this question, I'll adopt as the right answer. Thank you very much. Maybe it's not the best one.the area filled is larger than what I expected. — HamasN, Jul 16 '13 at 08:10

score 3 · Answer 1 · answered Jul 17 '13 at 06:35

CGContextClearRect(UIGraphicsGetCurrentContext(), rect);
CGContextRef context = UIGraphicsGetCurrentContext();

CGContextSetFillColorWithColor(context, [UIColor clearColor].CGColor);
CGContextFillRect(context,self.bounds);
CGContextSetBlendMode(context, kCGBlendModeCopy);
CGContextSetAllowsAntialiasing(context, YES);
CGContextSetShouldAntialias(context, YES);


UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(55, 28, 138, 44) cornerRadius:22]; CGContextSetFillColorWithColor(context, [UIColor colorWithRed:0. green:0.5 blue:0. alpha:0.5].CGColor);
[bezierPath fill];
[bezierPath stroke];


CGContextSetLineWidth(context, 1.0f);

CGContextSetFillColorWithColor(context, [UIColor colorWithRed:0 green:0.5 blue:0 alpha:0.5].CGColor);
CGRect circlePoint = CGRectMake(startX, startY, circleDiameter, circleDiameter);
CGContextFillEllipseInRect(context, circlePoint);
CGContextSetStrokeColorWithColor(context, [UIColor blackColor].CGColor);
CGContextStrokeEllipseInRect(context, circlePoint);

Here is the result what I expect! enter image description here

score 3 · Accepted Answer · answered Jul 17 '13 at 07:41

Use BezierPath to draw that rounded rectangle with fill color

UIBezierPath *bezierPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(55, 28, 140, 44) cornerRadius:22];
 CGContextSetFillColorWithColor(context, [UIColor colorWithRed:0 green:255 blue:0 alpha:0.5].CGColor);
 [bezierPath fill];

drawRect() draw a custom shape, why can't fill color?

2 Answers2