Question

I’m trying to add a shadow behind a circular view, but my attempts have led me to only a shadow on my view’s border—and this shadow doesn’t appear all the way around the view either (just the top). Here’s my code:

-(void)drawRect:(CGRect)dirtyRect{
    CGContextRef ctx=UIGraphicsGetCurrentContext();
    CGRect bounds=[self bounds];

    // Figure out the centre of the bounds rectangle
    CGPoint centre;
    centre.x=bounds.origin.x+0.5*bounds.size.width;
    centre.y=bounds.origin.y+0.5*bounds.size.height;

    // Clip context
    CGPathRef path = CGPathCreateWithEllipseInRect(bounds, NULL);
    CGContextAddPath(ctx, path);
    CGContextClip(ctx);

    // Add black outline
    path = CGPathCreateWithEllipseInRect(bounds, NULL);
    CGContextAddPath(ctx, path);
    [[UIColor blackColor] setStroke];
    CGContextSetLineWidth(ctx, 3.0);

    // Specify shadow
    CGSize offset=CGSizeMake(1,4);
    CGColorRef colour=[[UIColor darkGrayColor] CGColor];
    CGContextSetShadowWithColor(ctx, offset, 2, colour);

    // Draw image
    UIImage *littleImage=[UIImage imageNamed:@"image.png"];
    [littleImage drawInRect:bounds];

    CGContextStrokePath(ctx);

}

Thanks for reading.

Answer 1

OK, there were a couple things that needed doing to fix this. I think that this code could likely be reduced by a few lines, but here’s what worked:

-(void)drawRect:(CGRect)dirtyRect{
    CGContextRef ctx=UIGraphicsGetCurrentContext();

    // Create bounds and path for rectangle slightly smaller than view (Thanks, Andrew T., for this!)
    CGRect bounds=[self bounds];
    CGFloat smallerBy=20.0;
    CGRect smallBounds=CGRectMake(bounds.origin.x+smallerBy/2, bounds.origin.y+smallerBy/2, bounds.size.width-smallerBy, bounds.size.height-smallerBy);
    CGPathRef path = CGPathCreateWithEllipseInRect(smallBounds, NULL);
    CGContextAddPath(ctx, path);

    // Add black outline with shadow to bounds
    [[UIColor blackColor] setStroke];
    CGContextSetLineWidth(ctx, 5.0);
    CGSize offset=CGSizeMake(3,4);
    CGColorRef colour=[[UIColor lightGrayColor] CGColor];
    CGContextSetShadowWithColor(ctx, offset, 8, colour);
    CGContextStrokePath(ctx);

    // Draw opaque white circle (to cover up shadow that was leaking "inside" image)
    [[UIColor whiteColor] setFill];
    CGContextSetLineWidth(ctx, 0.0);
    CGContextFillEllipseInRect(ctx, smallBounds);

    // Draw shadowless black outline over white circle (the circle had bitten into the original outline)
    CGContextSetShadowWithColor(ctx, offset, 3, NULL);
    CGContextAddPath(ctx, path);
    [[UIColor blackColor] setStroke];
    CGContextSetLineWidth(ctx, 5.0);
    CGContextStrokePath(ctx);

    // Clip context to bounds
    CGContextAddPath(ctx, path);
    CGContextClip(ctx);

    // Draw image
    UIImage *newImage=[UIImage imageNamed:@"image.png"];
    [newImage drawInRect:smallBounds];


}