How to render a radial gradient onto a new UIImage on an iphone
Solution 1
You should read about Graphics Contexts in the same document as the section you linked. All drawing happens in a graphics context. If you want to create an image that has a radial gradient, or a linear gradient, or anything else, you'll need to:
- Create a graphics context for your image with UIGraphicsBeginImageContextWithOptions.
- Do whatever drawing you want to appear in the image.
- Call UIGraphicsGetImageFromCurrentImageContext to get the image from the context. This gives you a UIImage, so no need to convert from a CGImage.
- Call UIGraphicsEndImageContext to clean up the context.
Solution 2
Ok here's the gist of the working solution, let me know if i missed anything (eg releasing handles / references)
Also posted on my blog: http://splinter.com.au/rendering-a-radial-gradient-on-the-iphone-obj
- (UIImage *)radialGradientImage:(CGSize)size start:(float)start end:(float)end centre:(CGPoint)centre radius:(float)radius {
// Render a radial background
// http://developer.apple.com/library/ios/#documentation/GraphicsImaging/Conceptual/drawingwithquartz2d/dq_shadings/dq_shadings.html
// Initialise
UIGraphicsBeginImageContextWithOptions(size, YES, 1);
// Create the gradient's colours
size_t num_locations = 2;
CGFloat locations[2] = { 0.0, 1.0 };
CGFloat components[8] = { start,start,start, 1.0, // Start color
end,end,end, 1.0 }; // End color
CGColorSpaceRef myColorspace = CGColorSpaceCreateDeviceRGB();
CGGradientRef myGradient = CGGradientCreateWithColorComponents (myColorspace, components, locations, num_locations);
// Normalise the 0-1 ranged inputs to the width of the image
CGPoint myCentrePoint = CGPointMake(centre.x * size.width, centre.y * size.height);
float myRadius = MIN(size.width, size.height) * radius;
// Draw it!
CGContextDrawRadialGradient (UIGraphicsGetCurrentContext(), myGradient, myCentrePoint,
0, myCentrePoint, myRadius,
kCGGradientDrawsAfterEndLocation);
// Grab it as an autoreleased image
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
// Clean up
CGColorSpaceRelease(myColorspace); // Necessary?
CGGradientRelease(myGradient); // Necessary?
UIGraphicsEndImageContext(); // Clean up
return image;
}
Solution 3
You can also use CoreImage in iOS5+ and use the Vignette Filter.
- (UIImage *)vignetteImageOfSize:(CGSize)size withImage:(UIImage *)image {
UIGraphicsBeginImageContextWithOptions(size, YES, 0);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, [UIColor whiteColor].CGColor);
CGContextFillRect(context, CGRectMake(0.0, 0.0, size.width, size.height));
CIImage *coreImage = [CIImage imageWithCGImage:image.CGImage];
CGPoint origin = [coreImage extent].origin;
CGAffineTransform translation =
CGAffineTransformMakeTranslation(-origin.x, -origin.y);
coreImage = [coreImage imageByApplyingTransform:translation];
CIFilter *vignette = [[CIFilter filterWithName:@"CIVignette"] retain];
[vignette setValue:@1.5 forKey:@"inputRadius"];
[vignette setValue:@1.5 forKey:@"inputIntensity"];
[vignette setValue:coreImage forKey:@"inputImage"];
UIImage *vignetteImage = [UIImage imageWithCIImage:vignette.outputImage];
[vignette release];
CGRect imageFrame = CGRectMake(0.0, 0.0, size.width, size.height);
[image drawInRect:imageFrame];
UIImage *renderedImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return renderedImage;
}
Solution 4
I wrote this simplyfied method here, (put it into a UIImage category for example)
+ (UIImage *)radialGradientImageWithRadius:(CGFloat)radius StartColor:(UIColor*)startColor EndColor:(UIColor*)endColor ApplyScreenScale:(BOOL)useScreenScale
{
// Initialize
UIGraphicsBeginImageContextWithOptions(CGSizeMake(radius * 2, radius * 2), NO, (useScreenScale ? 0.f : 1.f));
CGContextRef context = UIGraphicsGetCurrentContext();
// bottom glow gradient
CGColorSpaceRef colourspace = CGColorSpaceCreateDeviceRGB();
// build color components
CGFloat red1 = 0.f, green1 = 0.f, blue1 = 0.f, alpha1 = 0.f;
[(startColor == nil ? [UIColor clearColor] : startColor) getRed:&red1 green:&green1 blue:&blue1 alpha:&alpha1];
CGFloat red2 = 0.f, green2 = 0.f, blue2 = 0.f, alpha2 = 0.f;
[(endColor == nil ? [UIColor clearColor] : endColor) getRed:&red2 green:&green2 blue:&blue2 alpha:&alpha2];
CGFloat cComponents[] = { red1, green1, blue1, alpha1, red2, green2, blue2, alpha2 };
CGFloat cGlocations[] = { 0.f, 1.f };
CGGradientRef gradient = CGGradientCreateWithColorComponents(colourspace, cComponents, cGlocations, 2);
CGPoint centerPoint = CGPointMake(radius, radius);
CGContextDrawRadialGradient(context, gradient, centerPoint, 0.f, centerPoint, radius , 0.f);
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
CGGradientRelease(gradient);
CGColorSpaceRelease(colourspace);
UIGraphicsEndImageContext();
return image;
}
Sample usages:
// resulting image size 128x128 px
UIImage* myRadialImage = [UIImage radialGradientImageWithRadius:128.f StartColor:[UIColor greenColor] EndColor:nil ApplyScreenScale:NO];
// resulting image size 256x256 px on normal retina display, or 384x384 on iPhone 6 or gre
UIImage* myRadialImage = [UIImage radialGradientImageWithRadius:128.f StartColor:[UIColor greenColor] EndColor:[UIColor redColor] ApplyScreenScale:YES];
Hope it's useful
Comments
-
Chris almost 2 years
Just wondering how to render a radial gradient (point > circle) onto a new UIImage (iphone). I saw the following:
And it made me think i need to use CGShadingRef or CGGradientRef, and use UIImage's 'imageWithCGImage' constructor to go from the CG* to a UIImage... but i can't figure out how.
Any suggestions greatly appreciated!