CAGradientLayer with Angle

Question

I am drawing CGPath which is not rectangle or square,and adding CGPath to CAShapeLayer. This CAShapeLayer's frame getting from CGPath using CGPathGetBoundingBox(path). So it will be rectangle or square. Now i want to set gradient color to layer but my path is not rectangle or square so it is not spreading gradient color equally in whole CGPath. Is there any way to set gradient color to CGPath or how can i set gradient color with angle?

Please refer screen shot to understand situation. Here white color indicates frame of CGPath and green colour, that is our drawn CGPath. At the bottom of CGPath you can see white gradient colour which is not distributed equally in CGPath.

enter image description here

if i understand your question correctly, this link will help you http://stackoverflow.com/a/422208/1059705 — Bala, Aug 26 '13 at 05:56
so you are trying to say i should use location property.Is it correct? — h999, Aug 26 '13 at 05:59
this is my one part of hexagon,what if i change it to pentagon?I appreciate your answer but it is not more generic.i cant pass static values... — h999, Aug 26 '13 at 06:07
Can you add another image showing what you'd _like_ to see? I'm not sure what you mean by "distributed evenly" here. — jrturton, Aug 26 '13 at 06:25
@jrturton I want to set gradient color to polygon layer.First image(Layer 1) that is my one part of hexagon.Now in second image you can understand my problem.green color is frame of Layer 2 and white color is frame of layer 1.If i want to set gradient color then i have to use startPoint and endPoint property.But if polygon changed , then it will not useful.I want to set gradient color same as Layer 2.you can see that in Layer 2,it is looking good.same thing i want in Layer 1 but for that i need to set it at angle 60.So how can i do that?please help me... — h999, Aug 26 '13 at 06:54
Do you mean that you want the colour transition in layer 1 (which is a horizontal line across the word "layer 2" in layer 2) to be halfway along the layer and at an angle in layer 1? Can you show your current drawing code - are you using a CAGradientLayer or are you drawing the gradient in drawRect? — jrturton, Aug 26 '13 at 07:23
Exactly .here is my code:CAShapeLayer *shapeLayer = [CAShapeLayer layer]; [shapeLayer setPath: self.path]; CAGradientLayer *gradientLayer = [CAGradientLayer layer]; gradientLayer.startPoint = CGPointMake(0.5,0.5); gradientLayer.endPoint = CGPointMake(0.0,0.0); — h999, Aug 26 '13 at 08:23
CGRect rect = CGPathGetPathBoundingBox(self.path); gradientLayer.frame = CGRectMake(rect.origin.x, rect.origin.y, rect.size.width, rect.size.height/2); gradientLayer.borderWidth = 0.2; gradientLayer.bounds = CGRectMake(rect.origin.x, rect.origin.y, rect.size.width, rect.size.height/2);; — h999, Aug 26 '13 at 08:23
UIColor * glossColor1 = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.35];UIColor * glossColor2 = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.1];gradientLayer.borderColor = glossColor2.CGColor;NSMutableArray *colors = [[NSMutableArray alloc]initWithObjects:(id)glossColor1.CGColor,(id)[glossColor2 CGColor], nil]; gradientLayer.colors = colors; [gradientLayer setMask:shapeLayer]; [self addSublayer:gradientLayer]; — h999, Aug 26 '13 at 08:24
Please edit your question to include this code, don't put it in comments where nobody can read it. — jrturton, Aug 26 '13 at 21:23

score 14 · Accepted Answer · answered Aug 26 '13 at 21:29

The start and end points of a linear gradient are specified in points relative to the whole size of the layer, with (0,0) at the top left and (1,1) at the bottom right.

Therefore, to make a linear gradient at an angle, you simply need to set the start and end points appropriately. For example, If you used (0,0) and (1,1) as the start and end points, the gradient would run from the top left to the bottom right, at a 45 degree angle.

Working out the specific start and end points for your needs is therefore just a matter of trigonometry.

CAGradientLayer with Angle

1 Answers1