How do I draw a rectangle with clipped, not rounded, corners on the iPhone?

Question

I saw many examples of how to draw a rounded rectangle using iPhone SDK. What I really need is a trimmed corner rectangle, something that will look as follows:

Thanks, Josh

Answer 1

I would just use 8 line segments (start path, add line to path, end path, stroke path). You would just need to add or subtract some constant from each x or y corner coordinate to get all 8 points. You could write a simple function with the same api as CGStrokeRect to encapsulate all the above.

Answer 2

(This is edited to take Jonathan Grynspan's suggestion and just use the helper function to create a path. It also now allows for the trimmed corner's height to be different from its width.)

Here is a helper C-function to create a such a path:

// Note: caller is responsible for releasing the returned path
CGPathRef createAngledCornerRectPath(CGRect rect,
                                     CGSize cornerSize,
                                     CGFloat strokeWidth)
{
    CGMutablePathRef p = CGPathCreateMutable();

    // Make points for the corners
    CGFloat inset = strokeWidth/2; // because the stroke is centered on the path.
    CGPoint tlc = CGPointMake(CGRectGetMinX(rect) + inset,
                              CGRectGetMinY(rect) + inset);
    CGPoint trc = CGPointMake(CGRectGetMaxX(rect) - inset,
                              CGRectGetMinY(rect) + inset);
    CGPoint blc = CGPointMake(CGRectGetMinX(rect) + inset,
                              CGRectGetMaxY(rect) - inset);
    CGPoint brc = CGPointMake(CGRectGetMaxX(rect) - inset,
                              CGRectGetMaxY(rect) - inset);

    // Start in top left and move around counter-clockwise.
    CGPathMoveToPoint(p, NULL, tlc.x, tlc.y+cornerSize.height);
    CGPathAddLineToPoint(p, NULL, blc.x, blc.y-cornerSize.height);
    CGPathAddLineToPoint(p, NULL, blc.x+cornerSize.width, blc.y);
    CGPathAddLineToPoint(p, NULL, brc.x-cornerSize.width, brc.y);
    CGPathAddLineToPoint(p, NULL, brc.x, brc.y-cornerSize.height);
    CGPathAddLineToPoint(p, NULL, trc.x, trc.y+cornerSize.height);
    CGPathAddLineToPoint(p, NULL, trc.x-cornerSize.width, trc.y);
    CGPathAddLineToPoint(p, NULL, tlc.x+cornerSize.width, trc.y);
    CGPathCloseSubpath(p);

    return p;
}

And here is how you would use this in your custom view's -drawRect: method:

- (void)drawRect:(CGRect)rect
{
    // Define a few parameters
    CGSize cornerSize = CGSizeMake(30.f, 30.f);
    CGFloat strokeWidth = 3.f;
    CGColorRef strokeColor = [UIColor redColor].CGColor;

    CGContextRef c = UIGraphicsGetCurrentContext();
    CGContextSetStrokeColorWithColor(c, strokeColor);
    CGContextSetLineWidth(c, strokeWidth);

    // Create the path, add it to the context, and stroke it.
    CGPathRef path = createAngledCornerRectPath(rect,
                                                cornerSize,
                                                strokeWidth);
    CGContextAddPath(c, path);
    CGContextStrokePath(c);

    // we are responsible for releasing the path
    CGPathRelease(path);
}