5

I would like to draw a circular gradient like in the example picture below. I can manage a radial gradient easily but I am not sure how to do a circular one. I was thinking of drawing a gradient on a line and then transforming it to a circle. Would that be possible?

enter image description here

This is how I draw the radial gradient:

CGFloat a = MIN(self.frame.size.width, self.frame.size.height) - _lineWidth;

 //Get current context
 CGContextRef mainContext = UIGraphicsGetCurrentContext();

CGRect newRect = rect;
newRect.origin.x = ((self.frame.size.width - a)/2.0f);
newRect.origin.y = ((self.frame.size.height - a)/2.0f);
newRect.size.width = a;
newRect.size.height = a;

 // Fill circle

const CGFloat *_components = CGColorGetComponents(_fillColor.CGColor);
CGFloat red     = _components[0];
CGFloat green = _components[1];
CGFloat blue   = _components[2];
CGFloat alpha = _components[3];

CGColorSpaceRef baseSpace = CGColorSpaceCreateDeviceRGB();
CGFloat redBallColors[] = {
    red,green,blue,0.5,
    red,green,blue,alpha,
};
CGFloat glossLocations[] = {0.0, 1.0};
CGGradientRef ballGradient = CGGradientCreateWithColorComponents(baseSpace, redBallColors, glossLocations, 2);
CGPoint startPoint = self.center;
CGPoint endPoint = self.center;
CGContextDrawRadialGradient(mainContext, ballGradient, startPoint, 0, endPoint, a/2, 0);

Thanks a lot!

freshking
  • 1,824
  • 18
  • 31
  • 2
    possible duplicate of [CGContextDrawAngleGradient?](http://stackoverflow.com/questions/6905466/cgcontextdrawanglegradient) – Desdenova Apr 23 '14 at 11:20
  • You can try this: http://stackoverflow.com/questions/5617113/how-to-render-a-radial-gradient-onto-a-new-uiimage-on-an-iphone – pankaj asudani Apr 23 '14 at 11:22

0 Answers0