How can I draw nested radial gradients on iOS?
core-graphics, ios, objective-c, quartz-2d
Solution
You do not need a "second nested gradient" in order to draw the gradient shown in your illustration. That is one gradient. A gradient can have multiple colors at multiple locations, and that is what we are seeing in that illustration. It appears to have four colors/points.
So, when the drawing needs to change, just replace the first gradient (your simple two-point gradient) with the second gradient (with four colors/points) and vice versa.
Problem
I'm developing an iOS 5.0+ app with latest SDK. I want to do something similar to I want to know how to nest radial gradients. This is my code now: ``` - (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)context { _innerColor = [UIColor yellowColor]; _outerColor = [UIColor redColor]; CGContextSetAllowsAntialiasing(context, true); CGContextSetShouldAntialias(context, true); CGFloat graWidth = layer.frame.size.width / 2; CGFloat graHeight = layer.frame.size.height / 2; CGFloat firstGlossLocation = 0.0f; CGFloat outterPercent = 0.0f; if (_isUnSelected) { firstGlossLocation = 0.7f; outterPercent = graWidth * 0.0f; } else { firstGlossLocation = 0.0f; outterPercent = graWidth * 0.25f; } CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB(); CGFloat iRed = 0.0, iGreen = 0.0, iBlue = 0.0, iAlpha =0.0; [_innerColor getRed:&iRed green:&iGreen blue:&iBlue alpha:&iAlpha]; CGFloat oRed = 0.0, oGreen = 0.0, oBlue = 0.0, oAlpha =0.0; [_outerColor getRed:&oRed green:&oGreen blue:&oBlue alpha:&oAlpha]; CGFloat gradientColors[] = { oRed, oGreen, oBlue, oAlpha, iRed, iGreen, iBlue, iAlpha }; // We have to change first value when user taps over the Guage. // The second one must one to fill the entire Gauge. CGFloat glossLocations[] = {firstGlossLocation, 1}; CGGradientRef ballGradient = CGGradientCreateWithColorComponents(colorSpace, gradientColors, glossLocations, 2); CGContextAddEllipseInRect(context, CGRectMake(0, 0, graWidth*2, graHeight*2)); CGContextClip(context); CGPoint startPoint = CGPointMake(graWidth, graHeight); CGPoint endPoint = CGPointMake(graWidth, graHeight); CGContextDrawRadialGradient(context, ballGradient, startPoint, 0, endPoint, graWidth - outterPercent, kCGGradientDrawsAfterEndLocation); CGContextDrawPath(context, kCGPathStroke); } ``` I want to draw a second gradient when `_isUnSelected` is `NO`. Do you know how can I draw a second nested gradient?