Gold Solution


#1

Here’s a Gold Solution with Shadow. Included is the file that does all the heavy lifting.

Addition to HypnosisterAppDelegate.m

    // Set image 2 pixels in and give extra space for shadow
    CGRect logoRect = CGRectMake(2, 2, 120, 120); 
    logoView = [[BNRLogo alloc] initWithFrame];
    [view addSubview];

BNRLogo.m

#import "BNRLogo.h"

@implementation BNRLogo

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        [self setBackgroundColor:[UIColor clearColor]];
    }
    return self;
}

- (void)drawRect:(CGRect)dirtyRect
{
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    UIImage *hat = [UIImage imageNamed:@"Icon.png"];
    CGRect hatRect;
    hatRect = CGRectMake(0, 0, 114, 114);  // size of the retina png
    
    // Going to create a white circle (fill)
    [[UIColor whiteColor] setFill];

    // Shadow offset will be 3,3
    CGSize offset = CGSizeMake(3, 3);
    
    // The shadow will be dark gray in color
    CGColorRef color = [[UIColor darkGrayColor] CGColor];
    
    // Draw the white circle
    CGContextAddArc(ctx, 57, 57, 57, 0.0, M_PI * 2.0, YES); // center & radius of PNG
    
    // Create the shadow for the circle
    CGContextSetShadowWithColor(ctx, offset, 2.0, color);
    
    // Draw circle with shadow
    CGContextFillPath(ctx);
    
    // Turn off shadow
    CGContextSetShadowWithColor(ctx, offset, 2.0, NULL);

    // Create a clipping plane for the logo and draw hat
    CGContextAddArc(ctx, 57, 57, 57, 0.0, M_PI * 2.0, YES);
    CGContextClip(ctx);
    [hat drawInRect:hatRect];
    
    // Apply a gradient to current clipping plane
    // See Quartz 2D programming Guide for more details
    CGGradientRef myGradient;
    CGColorSpaceRef myColorspace;
    
    size_t num_locations = 2;
    CGFloat locations[2] = { 0.0 , 1.0 };
    CGFloat components[8] = {0,0,1,.3,1,1,1,.2};
    
    myColorspace = CGColorSpaceCreateDeviceRGB();
    myGradient = CGGradientCreateWithColorComponents(myColorspace, components, locations, num_locations);
    
    CGPoint sp, ep; //StartPoint & EndPoint
    
    sp.x=57;
    sp.y=0;
    ep.x=57;
    ep.y=57;
    
    CGContextDrawLinearGradient(ctx, myGradient, sp, ep, 0);
    
    CGContextAddArc(ctx, 57, 57, 57, 0.0, M_PI * 2.0, YES);
    CGContextSetLineWidth(ctx, 1);
    CGContextStrokePath(ctx);
    
}

@end

#2

I’ve added this solution exactly line by line, but I am not getting the hat logo in the circle. I have the circle. I have the gradient. No logo. (Yes I have the file) Any ideas?

Thanks,
Chantel


#3

Have you added the image file to your project to make it part of the application’s bundle?


#4

For some reason it is the simplest things that trip me up. I had not added the file to the bundle. Thank you so much!


#5

Wow great solution, I spent a couple hours and realized I was wayy over complicating things. Thanks for sharing!

What’s the goal of turning off the shadow in this line:

//turning off the shadow after
CGContextSetShadowWithColor(ctx, offset, 2, NULL);

?

I commented out this specific line and the result looks the same?

Is it such that there is no offset for the gradient overlay?