Implement drawing gradient arc with CAShapeLayer

Question

Referring to the accepted answer found here I'm trying to implement this and running into an issue with the path of the CAShapeLayerThe code I have is as follows:

-(void)drawGradientArc{
    UIBezierPath *bezierPath = [UIBezierPath bezierPath];

    CAShapeLayer *circleLayer = [CAShapeLayer new];
    circleLayer.lineWidth = 25;
    circleLayer.fillColor = [UIColor clearColor].CGColor;
    circleLayer.strokeColor = [UIColor redColor].CGColor;

    CGFloat radius = 150;


    [bezierPath addArcWithCenter:self.view.center radius:radius startAngle:0 endAngle:M_PI clockwise:YES];


    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.startPoint = CGPointMake(0,0);
    gradientLayer.endPoint = CGPointMake(1,0);


    NSMutableArray *colors = [NSMutableArray array];
    for (int i = 0; i < 10; i++) {
        [colors addObject:(id)[[UIColor colorWithHue:(0.1 * i) saturation:1 brightness:.8 alpha:1] CGColor]];
    }

    gradientLayer.colors = colors;
    [gradientLayer setMask:circleLayer];

    circleLayer.path = bezierPath.CGPath;

    [self.view.layer addSublayer:circleLayer];
}

This will draw the half circle arc correctly but the path for the gradients is not being set correctly and I was unable to piece together how exactly to configure the code to get this to work using a gradient. There is a CGPathCreateCopyByStrokingPath that I think I may also need to call to set the path properly for the gradient but was not quite sure how. Any help on how to structure the code to get this working would be appreciated. I've also included an image of the gradient that I'm trying to reproduce. a CAShapeLayer and CAGradientLayerapproach would be ideal.

matt · Accepted Answer · 2015-12-23T16:50:05.640

4

Problem 1: Your layers have no frames. Add this:

gradientLayer.frame = self.view.layer.bounds;
circleLayer.frame = gradientLayer.bounds;

Problem 2: You are adding the wrong layer to your view's layer. Where you have:

[self.view.layer addSublayer:circleLayer];

say this instead:

[self.view.layer addSublayer:gradientLayer];

Result:

edited Dec 23 '15 at 16:50

answered Dec 23 '15 at 16:42

matt

515,959
87
875
1,141

This won't solve all your problems, but at least you'll see _something_ meaningful on the screen, and fixing your code after that will be pretty much trivial. – matt Dec 23 '15 at 16:43
Using this while setting the frames for the gradientLayer and shapeLayer worked exactly as needed. Thanks! – zic10 Dec 23 '15 at 16:45
Well, it's upside down from your drawing. But that should be easy to fix! – matt Dec 23 '15 at 16:45
Yeah thats no problem, Just needed to see the rainbow arc is all I care about. Thanks again! – zic10 Dec 23 '15 at 16:46
Yup, I figured seeing the rainbow would make you a lot happier. :) – matt Dec 23 '15 at 16:46
Note, however, that if you really want a _rainbow_, where the colors themselves curve in stripes around the arc, you won't be able to do it this way. You will need a _radial_ gradient. – matt Dec 23 '15 at 16:49
Yeah actually I really only need to fade from two colors. I just need to see this working using many colors to get an idea of how this works. In reality, I'm going to just attempt a fade from blue to violet on one end of the arc. – zic10 Dec 23 '15 at 16:51

Implement drawing gradient arc with CAShapeLayer

1 Answers1