Join two Rects in Core Graphics - iphone

Question

I'm trying to get into Core Graphics.
A the Moment I'm trying to draw a certain shape out of 2 rects. Now I want to join those booth to work with gradient and color functions. I'm not sure if there even is a way.
Here is a Picture:
Here are my Code Snippets:
-(void)drawRoundedRect:(CGRect)rect
{
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGRect frame1 = CGRectMake(self.bounds.origin.x, self.bounds.origin.y+45, self.bounds.size.width, self.bounds.size.height-45);
CGRect frame2 = CGRectMake(self.bounds.size.width-80, self.bounds.origin.y+25, 80, 50);
CGPathRef roundedRectPath1 = [self newPathForRoundedRect:frame1 radius:15];
CGPathRef roundedRectPath2 = [self newPathForRoundedRect:frame2 radius:11];
CGContextSetRGBFillColor(ctx, 200, 200, 200, 0.5);
CGContextAddPath(ctx, roundedRectPath1);
CGContextFillPath(ctx);
CGPathRelease(roundedRectPath1);
CGContextAddPath(ctx, roundedRectPath2);
CGContextFillPath(ctx);
CGPathRelease(roundedRectPath2);
}
-(CGPathRef) newPathForRoundedRect:(CGRect)rect radius:(CGFloat)radius
{
CGMutablePathRef retPath = CGPathCreateMutable();
CGRect innerRect = CGRectInset(rect, radius, radius);
CGFloat inside_right = innerRect.origin.x + innerRect.size.width;
CGFloat outside_right = rect.origin.x + rect.size.width;
CGFloat inside_bottom = innerRect.origin.y + innerRect.size.height;
CGFloat outside_bottom = rect.origin.y + rect.size.height;
CGFloat inside_top = innerRect.origin.y;
CGFloat outside_top = rect.origin.y;
CGFloat outside_left = rect.origin.x;
CGPathMoveToPoint(retPath, NULL, innerRect.origin.x, outside_top);
CGPathAddLineToPoint(retPath, NULL, inside_right, outside_top);
CGPathAddArcToPoint(retPath, NULL, outside_right, outside_top, outside_right, inside_top, radius);
CGPathAddLineToPoint(retPath, NULL, outside_right, inside_bottom);
CGPathAddArcToPoint(retPath, NULL, outside_right, outside_bottom, inside_right, outside_bottom, radius);
CGPathAddLineToPoint(retPath, NULL, innerRect.origin.x, outside_bottom);
CGPathAddArcToPoint(retPath, NULL, outside_left, outside_bottom, outside_left, inside_bottom, radius);
CGPathAddLineToPoint(retPath, NULL, outside_left, inside_top);
CGPathAddArcToPoint(retPath, NULL, outside_left, outside_top, innerRect.origin.x, outside_top, radius);
CGPathCloseSubpath(retPath);
return retPath;
}

Answer 1

You're doing way too much work here. Just use UIBezierPath's +bezierPathWithRoundedRect:cornerRadius: and – appendPath: methods.
CGRect rect1, rect2;
CGFloat radius;
// fill in the values you want for the rects and the radius
UIBezierPath *result =
[UIBezierPath bezierPathWithRoundedRect: rect1 cornerRadius:radius];
[result appendPath:
[UIBezierPath bezierPathWithRoundedRect: rect2 cornerRadius:radius];
// result is now a path comprising both of the roundrects. You can fill it with a gradient like any other path.

Answer 2

You have some options:
Construct a new path that forms the union of the two separate paths without intersections. Core Graphics would not help you with this approach, it does not provide boolean path operations.
Use a transparency layer to draw both shapes (one after each other). This would fix the overlapping area but it wouldn't work with gradients.
Create a bitmap context to create a mask. Draw both shapes into the mask. Then clip to the mask in your original context and draw a rect over the bounding box of your shape.