Gold Challenge Problem - outlining the logo


#1

I seem to be having a problem getting the stroke and shadow to work for this Gold Challenge. Here is the code so far. I am getting the logo clipped and the color space to work. Here is the code below. Also here is a screenshot https://www.dropbox.com/s/jdux3jhijuax3y8/iOS%20Simulator%20Screen%20shot%20Dec%202%2C%202012%201.03.35%20PM.png from the simulator. You will see that the sides are clipped - part of the logo is cut off. Anyone got any idea what is going on here? I have my shadow code commented out because I wanted to focus on the stroke for now but if you have any pointers about the shadow that would be good too. I think i might be overthinking something. Also as a side note antialiasing doesnt seem to be working. thanks…

EDIT: It looks like the original frame is intersecting the logo somehow. here is a link with the background color commented out.

https://www.dropbox.com/s/txsfwmqzax90x88/iOS%20Simulator%20Screen%20shot%20Dec%202%2C%202012%202.03.44%20PM.png

Obviously when setting up the frame setting i increased x and y to see if that was the problem and indeed it was. So what is the best solution here?

[code]

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

-(id)init{

logo = [UIImage imageNamed:@"Icon@2x.png"];
CGRect logoBounds;
logoBounds.size = logo.size;

[self setImageBounds:logoBounds];

return [self initWithFrame:CGRectMake(10, 10, logoBounds.size.width, logoBounds.size.height)];

}

(void)drawRect:(CGRect)rect
{
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGGradientRef logoGradient;
CGColorSpaceRef logoColorSpace;
CGFloat locations[2] = {0.0, 1.0};
CGFloat components[8] = { 0.0, 0.0, 1.0, 0.25, 1.0, 1.0, 1.0, 0.0 };
CGPoint startPoint, endPoint;
startPoint.x = logo.size.width / 2;
startPoint.y = 0.0;
endPoint.x = logo.size.width / 2;
endPoint.y = logo.size.height / 2;

logoColorSpace = CGColorSpaceCreateDeviceRGB();
logoGradient = CGGradientCreateWithColorComponents(logoColorSpace, components, locations, 2);
CGSize offset = CGSizeMake(0, 3);

//CGContextSetStrokeColorWithColor(ctx, [[UIColor blackColor] CGColor]);
//CGContextSetShadowWithColor(ctx, offset, 3.0, [[UIColor blackColor] CGColor]);
//[[UIColor blackColor] setFill];

//CGContextTranslateCTM(ctx, 0.0, imageBounds.size.height);
//default CGContextDrawImage will draw the image upside down, reversing the y-axis here.
//CGContextScaleCTM(ctx, 1.0, -1.0);

CGContextSaveGState(ctx);
CGContextBeginPath(ctx);
CGContextAddArc(ctx, logo.size.width / 2, logo.size.height / 2, logo.size.width / 2, 0, M_PI * 2, 0);
CGContextSetAllowsAntialiasing(ctx, YES);
CGContextSetShouldAntialias(ctx, YES);
CGContextSetLineWidth(ctx, 4.0);
CGContextDrawPath(ctx, kCGPathStroke);
CGContextRestoreGState(ctx);

/*CGContextSaveGState(ctx);
CGContextBeginPath(ctx);
CGContextAddArc(ctx, logo.size.width / 2, logo.size.height / 2, logo.size.width / 2, 0, M_PI * 2, 0);
CGContextSetShadowWithColor(ctx, offset, 4.0, [[UIColor darkGrayColor] CGColor]);
CGContextDrawPath(ctx, kCGPathFill);
CGContextRestoreGState(ctx);*/

//clip the logo and draw the color space
CGContextSaveGState(ctx);
CGContextBeginPath(ctx);
CGContextAddArc(ctx, logo.size.width / 2, logo.size.height / 2, logo.size.width / 2, 0, M_PI * 2, 0);
CGContextClosePath(ctx);
CGContextClip(ctx);

//CGContextDrawImage(ctx, [self imageBounds], logo.CGImage); //this doesnt work very well...??
[logo drawInRect:[self imageBounds]];

CGContextDrawLinearGradient(ctx, logoGradient, startPoint, endPoint, 0);
CGGradientRelease(logoGradient);
CGColorSpaceRelease(logoColorSpace);
CGContextRestoreGState(ctx);[/code]

}[/code]


#2

You need to inset the stroke by a few pixels. The stroke, I believe, is centered on the drawn line. But to show up inside of the clipping circle evenly, you need to inset the arc of the circle by 2/4/6 pix etc. That seemed to work for me.