Adding more than 1 item filled with gradient to your UIView ?

In previous article,   we talked about how to fill gradient in a clipped area on your screen. What if you have more than 1 shape to be displayed on your screen. As mentioned previously you need to use CGContextSaveGState(context) and CGContextRestoreGState(context).


Lets add these 2 commands to our code where we created and arc with gradient filled.

   //Add Arc with gradient
   CGContextSaveGState(context);
   CGContextMoveToPoint(context, 100, 100);
   CGContextAddArc(context, 100, 100, radius, 1.04 , 2.09 , 0);
   CGContextClosePath(context);
   CGContextClip(context);


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

Lets add a square with gradient. Of course you can change the gradient of your own colors of choice. But for now let it have same gradient colors.Make sure to keep the code bound in CGContextSaveGState(context) and CGContextRestoreGState(context) , so that we can keep adding more shapes to our scene without getting it clipped.

   //Add Square WITH GRADIENT
   CGContextSaveGState(context);
   CGContextAddRect(context, CGRectMake(5, 5, 50, 50));
   CGContextClip(context);

   startshine = CGPointMake(5,55);
   endshine = CGPointMake(5,5);
   CGContextDrawLinearGradient(context,gradient , startshine, endshine, kCGGradientDrawsAfterEndLocation);
   CGContextRestoreGState(context);

Now lets add finally a circle which has same gradient colors to our scene.

   //Add Circle WITH GRADIENT
   CGContextSaveGState(context);
   CGContextAddEllipseInRect(context, CGRectMake(105, 5, 70, 70));
   CGContextClip(context);

   CGPoint startPoint = CGPointMake(140, 40);
   CGPoint endPoint = CGPointMake(140, 40);
   CGContextDrawRadialGradient(context, gradient, startPoint, 5,endPoint , 35, kCGGradientDrawsBeforeStartLocation);
   CGContextRestoreGState(context);

Now on running the code, our scene will look like following:

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: