Question

I’m drawing a rounded image in a UITableView cell like so:

CGRect imageRect = CGRectMake(8, 8, 40, 40);
CGFloat radius = 3;

CGFloat minx = CGRectGetMinX(imageRect);
CGFloat midx = CGRectGetMidX(imageRect);
CGFloat maxx = CGRectGetMaxX(imageRect);
CGFloat miny = CGRectGetMinY(imageRect);
CGFloat midy = CGRectGetMidY(imageRect);
CGFloat maxy = CGRectGetMaxY(imageRect);

CGContextMoveToPoint(context, minx, midy);
CGContextAddArcToPoint(context, minx, miny, midx, miny, radius);
CGContextAddArcToPoint(context, maxx, miny, maxx, midy, radius);
CGContextAddArcToPoint(context, maxx, maxy, midx, maxy, radius);
CGContextAddArcToPoint(context, minx, maxy, minx, midy, radius);
CGContextClosePath(context);

CGContextClip(context);

[self.theImage drawInRect:imageRect];

This looks great, but I’d like to add a shadow to it for added effect.
I’ve tried using something along the lines of:

CGContextSetShadowWithColor(context, CGSizeMake(2, 2), 2, [[UIColor grayColor] CGColor]);
CGContextFillPath(context);

But this only works when the image has transparent areas, if the image isn’t transparent at all, it won’t even draw a shadow around the border.

I’m wondering if there is something I’m doing wrong?

Answer 1

Turns out the correct way to do this is by clipping the UIImage itself rather than the path. It’s then a simple matter of:

CGContextSetShadow(...);
[self.theClippedImage drawInRect:...];