CALayer and CGGradientRef anti-aliasing?

Answer 1

maybe try dropping out the kCGGradientDrawsAfterEndLocation? It might be doing something weird with the alpha

Answer 2

Jeff - make topCenter a bit further out and use CGContextClipToMask with a circular mask.

Edit: Actually a much much better way to do it is to use a vector clipping path using CGContextClip.

Edit 2: Sample code:

CGContextAddEllipseInRect(theContext, CGRectMake(20, 20, 10, 10));
CGContextClip(theContext);

Add this before you draw your gradient, and draw it a bit further out.

Answer 3

Thanks guys. So it turns out that the answer is a combination of your two answers (coob and Alex). Basically it seems like the CGDrawRadialGradient function only has aliasing at the starting circle, not the ending one. Since I want aliased "edges" on both, I first set the function to draw from the inside out which takes care of the first "edge", but produces the following:

Step 1

Then, I clip the image as suggested by coob and that gives a nice aliasing around the final edge of the bubble:

Step 2

Looks good enough for me!

- (void)drawInContext:(CGContextRef)theContext{
CGContextSetAllowsAntialiasing(theContext, true);
CGContextSetShouldAntialias(theContext, true);

size_t num_locations = 2;
CGFloat locations[2] = { 0.0, 1.0 };
CGFloat components[8] = { 1.0, 1.0, 1.0, 0.0,  // Start color
     1.0, 1.0, 1.0, 0.5 }; // End color
CGColorSpaceRef rgbColorspace = CGColorSpaceCreateDeviceRGB();
CGGradientRef glossGradient = 
CGGradientCreateWithColorComponents(rgbColorspace, components, locations, num_locations);

CGContextAddEllipseInRect(theContext, CGRectMake(5, 5, 40, 40));
CGContextClip(theContext);

CGPoint topCenter = CGPointMake(25, 20);
CGPoint midCenter = CGPointMake(25, 25);
CGContextDrawRadialGradient(theContext, glossGradient, topCenter, 10, midCenter, 20, kCGGradientDrawsAfterEndLocation);

}