Search code examples
iosobjective-cuibezierpath

UIBezierPath with color gradient


I've got an question about UIBezierPath.

For example I've got this path:

Now I want to have a color gradient from white to red. From left to right.

Here is my code:

UIBezierPath *bezierPath;
bezierPath = [UIBezierPath bezierPathWithArcCenter:_center radius:_radius startAngle:((4 * angle)) endAngle:(((20) * angle)) clockwise:YES];
[bezierPath addLineToPoint:_center];
[bezierPath closePath];
UIColor *color = [UIColor colorWithHue:0/sectors saturation:1. brightness:1. alpha:1];
[color setFill];
[color setStroke];
[bezierPath fill];
[bezierPath stroke];

Can anyone help me?

Edit 1:

I have this color wheel:

enter image description here

    UIBezierPath *bezierPath;

for ( int i = 0; i < 360; i++) {
    bezierPath = [UIBezierPath bezierPathWithArcCenter:_center radius:_radius startAngle:((i * angle)) endAngle:(((i + 1) * angle)) clockwise:YES];

    [bezierPath addLineToPoint:_center];
    [bezierPath closePath];
    UIColor *color = [UIColor colorWithHue:i/sectors saturation:1. brightness:1. alpha:1];
    [color setFill];
    [color setStroke];
    [bezierPath fill];
    [bezierPath stroke];
}

but I want this: (With the white Gradient)

enter image description here


Solution

  • you can give it a try :)

    - (void)drawRect:(CGRect)rect
    {
        CGFloat arcStep = (M_PI *2) / 360; // M_PI*2 is equivalent of full cirle
        BOOL clocklwise = NO;
        CGFloat x = CGRectGetWidth(rect) / 2; // circle's center
        CGFloat y = CGRectGetHeight(rect) / 2; // circle's center
        CGFloat radius = MIN(x, y) / 2;
        CGContextRef ctx = UIGraphicsGetCurrentContext();
        // draw colorful circle
        CGContextSetLineWidth(ctx, radius*2);
        for (CGFloat i = 0; i < 360; i+=1)
        {
            UIColor* c = [UIColor colorWithHue:i/360 saturation:1. brightness:1. alpha:1];
    
            CGContextSetStrokeColorWithColor(ctx, c.CGColor);
    
            CGFloat startAngle = i * arcStep;
            CGFloat endAngle = startAngle + arcStep + 0.02;
    
            CGContextAddArc(ctx, x, y, radius, startAngle, endAngle, clocklwise);
            CGContextStrokePath(ctx);
        }
        // drawing circles then, you might want few of them - smaller radius and less alpha with each step
        UIColor* c = [[UIColor whiteColor] colorWithAlphaComponent: 0.03];
        for (CGFloat fillRadius = radius/2; fillRadius > 0; fillRadius -= 1.f)
        {
            CGContextSetLineWidth(ctx, fillRadius*2);
            CGContextSetStrokeColorWithColor(ctx, c.CGColor);
            CGContextAddArc(ctx, x, y, fillRadius, 0, M_PI * 2, clocklwise);
            CGContextStrokePath(ctx);
        }
    }