Apply Gradient to a clipped area in 5 steps.

In one of our previous articles, we talked about how to fill your entire screen with gradient. In this article,We explain how to fill an arc area in the circle with the gradient in 5 steps.

First you need to create gradient of your color choice

   CGColorSpaceRef RGBColorspace = CGColorSpaceCreateDeviceRGB();

   CGFloat BGLocations3[2] = { 0.0, 1.0 };
   CGFloat BgComponents3[12] = {0.290,0.07,0.552 , 1.0, // Start color
0.696,0.554,0.8 , 1.0}; // End color
   CGGradientRef gradient = CGGradientCreateWithColorComponents(RGBColorspace, BgComponents3, BGLocations3, 2);

Now you  create your context and make sure anti-alias is  ON.

   float radius=100.0;

   CGContextRef context = UIGraphicsGetCurrentContext();
   CGContextSetAllowsAntialiasing(context, true);
   CGContextSetShouldAntialias(context, true);

Now create your arc

   CGContextMoveToPoint(context, 100, 100);
   CGContextAddArc(context, 100, 100, radius, 1.04 , 2.09 , 0); //angles are in radians 1.04 = 60 deg , 2.09 = 120 deg
   CGContextClosePath(context);

Clip your path

   CGContextClip(context);

Now draw your gradient.

   CGPoint endRadius;
   CGPoint startshine;
   startshine = CGPointMake(100 + radius * cosf(1.57),100+ radius * sinf(1.57));
   endRadius =CGPointMake(100,100);
   CGContextDrawLinearGradient(context,gradient , startshine, endRadius, kCGGradientDrawsAfterEndLocation);

So today you learnt how to apply gradient to an area of entire screen. Now I want make more figure on same screen. You will have to use now CGContextSaveGState(context) and CGContextRestoreGState(context). We will see in  next article  about how to use them.



Complete Code:

 - (void)drawRect:(CGRect)rect
 {

   CGColorSpaceRef RGBColorspace = CGColorSpaceCreateDeviceRGB();
   CGFloat BGLocations3[2] = { 0.0, 1.0 };
   CGFloat BgComponents3[12] = {0.290 , 0.07 , 0.552 , 1.0, // Start color
0.696 , 0.554 , 0.8 , 1.0}; // End color
   CGGradientRef gradient = CGGradientCreateWithColorComponents(RGBColorspace, BgComponents3, BGLocations3, 2);



   float radius=100.0;

   CGContextRef context = UIGraphicsGetCurrentContext();
   CGContextSetAllowsAntialiasing(context, true);
   CGContextSetShouldAntialias(context, true);



   CGContextMoveToPoint(context, 100, 100);
   CGContextAddArc(context, 100, 100, radius,1.04,2.09, 0);
   CGContextClosePath(context);

   CGContextClip(context);


   CGPoint endRadius;
   CGPoint startshine;
   startshine = CGPointMake(100 + radius * cosf(1.57),100+ radius * sinf(1.57));
   endRadius =CGPointMake(100,100);
   CGContextDrawLinearGradient(context,gradient , startshine, endRadius, kCGGradientDrawsAfterEndLocation);


 }

Here is what it will look like: