QuartzCore - Adding Rounded Corners to a Polygon - iphone

Question

I'm attempting to draw a translucent black rectangle with a triangle cut out of the center.
I have this working perfectly with the code below. However, I'd like to round the corners of the triangle.
I've tried a couple of different techniques for adding rounded corners such as setting CGContextSetLineCap for a stroke and by creating my path with quartz and using CGContextAddArcToPoint, but I've failed to get anything to work.
As I mentioned, the code below works for a triangle cutout. How can I round the corners of the triangle?
CGContextRef context = UIGraphicsGetCurrentContext();
CGPoint position = CGPointMake(rect.size.width/2, rect.size.height * .7);
CGSize size = CGSizeMake(rect.size.width*.8, rect.size.height*.5);
CGFloat firstPointX = (position.x - (size.width / 2));
CGFloat firstPointY = (position.y - (size.height));
CGPoint firstPoint = CGPointMake(firstPointX, firstPointY);
CGFloat secondPointX = position.x + (size.width / 2);
CGFloat secondPointY = position.y - (size.height);
CGPoint secondPoint = CGPointMake(secondPointX, secondPointY);
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:position];
[path addLineToPoint:firstPoint];
[path moveToPoint:firstPoint];
[path addLineToPoint:secondPoint];
[path addLineToPoint:position];
[path closePath];
CGContextAddRect(context, rect);
CGContextAddPath(context, path.CGPath);
CGContextEOClip(context);
UIColor *translucentColor = [UIColor colorWithWhite:0 alpha:0.5];
CGContextSetFillColorWithColor(context, translucentColor.CGColor);
CGContextFillRect(context, rect);
UIGraphicsEndImageContext();
EDIT: Here's an example of what I'm trying to accomplish.

Answer 1

I think you want to use CGContextAddArc. It draws part of a circle with a line leading up to it if necessary. Here's the code to draw a rounded box that fills a UIView. For a triangle you'd have 3 lines instead of 4. Two on the top and one in the middle on the bottom. This is from a roundBoxView class I have:
CGContextRef context = UIGraphicsGetCurrentContext();
CGRect boxRect = self.bounds;
float bRadius = self.cornerRadius;
float shrink = self.strokeThickness/2;
CGContextBeginPath(context);
// instead of this gray you could later add options for other colors
CGContextSetGrayFillColor(context, 0.0f, self.backgroundOpacity);
CGContextMoveToPoint(context, CGRectGetMinX(boxRect)+shrink + bRadius, CGRectGetMinY(boxRect)+shrink);
CGContextAddArc(context, CGRectGetMaxX(boxRect)-shrink - bRadius, CGRectGetMinY(boxRect)+shrink + bRadius, bRadius, 3 * (float)M_PI / 2, 0, 0);
CGContextAddArc(context, CGRectGetMaxX(boxRect)-shrink - bRadius, CGRectGetMaxY(boxRect)-shrink - bRadius, bRadius, 0, (float)M_PI / 2, 0);
CGContextAddArc(context, CGRectGetMinX(boxRect)+shrink + bRadius, CGRectGetMaxY(boxRect)-shrink - bRadius, bRadius, (float)M_PI / 2, (float)M_PI, 0);
CGContextAddArc(context, CGRectGetMinX(boxRect)+shrink + bRadius, CGRectGetMinY(boxRect)+shrink + bRadius, bRadius, (float)M_PI, 3 * (float)M_PI / 2, 0);
CGContextClosePath(context);
CGContextFillPath(context);
Of course instead of the boxRect being the full bounds you could pass that to your method and draw it using whatever bounds you want. To make it a triangle you would only have the 3 lines instead of two and you might have to do some math to figure out the start and end angles. On a box those angles are always 90 degrees (here given is icky radians) but on a triangle you'll either have to calc the angles on the fly or have a preset aspect ratio on the triangle so you can use preset start and stop angles. In the example as pictured with 3 equal angles you'd do 120 degrees or M_PI / 1.5 sized steps.