UIBezierPath and gradient iOS

Question

I have path with values and I want to make this gradient.

Here is the code:

    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetStrokeColorWithColor(context, [[UIColor colorWithRed:245.0/255.0 green:245.0/255.0 blue:171.0/255.0 alpha:0.6] CGColor]);
    CGContextSetFillColorWithColor(context, [[UIColor colorWithRed:245.0/255.0 green:245.0/255.0 blue:171.0/255.0 alpha:0.6] CGColor]);



    UIBezierPath *aPath = [UIBezierPath bezierPath];
    [aPath moveToPoint:CGPointMake(30.0, 100.0)];


    [aPath addLineToPoint:CGPointMake(200.0, 120.0)];
    [aPath addLineToPoint:CGPointMake(300, 210)];
    [aPath addLineToPoint:CGPointMake(300, 420)];
    [aPath addLineToPoint:CGPointMake(30, 420.0)];
    [aPath addLineToPoint:CGPointMake(30, 100.0)];

    [aPath closePath];
    [aPath fill];

Any pointers to figure out issue with this code?

Answer 1

First - I've created simple arrow with Bezier path:

UIBezierPath* bezierPath = [UIBezierPath bezierPath];
[bezierPath moveToPoint: CGPointMake(24.5, 1.5)];
[bezierPath addLineToPoint: CGPointMake(2.5, 14.5)];
[bezierPath addLineToPoint: CGPointMake(24.5, 28.5)];
[bezierPath addLineToPoint: CGPointMake(24.5, 1.5)];
[bezierPath closePath];
[[UIColor blackColor] setStroke];
bezierPath.lineWidth = 1;
[bezierPath stroke];

Then I've drawn simple linear gradient from black to white:

CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef context = UIGraphicsGetCurrentContext();

NSArray* simpleLinearGradientColors = [NSArray arrayWithObjects:
                                       (id)[UIColor blackColor].CGColor,
                                       (id)[UIColor whiteColor].CGColor, nil];
CGFloat simpleLinearGradientLocations[] = {0, 1};
CGGradientRef simpleLinearGradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef)simpleLinearGradientColors, simpleLinearGradientLocations);


// Bezier Drawing
UIBezierPath* bezierPath = [UIBezierPath bezierPath];
[bezierPath moveToPoint: CGPointMake(24.5, 1.5)];
[bezierPath addLineToPoint: CGPointMake(2.5, 14.5)];
[bezierPath addLineToPoint: CGPointMake(24.5, 28.5)];
[bezierPath addLineToPoint: CGPointMake(24.5, 1.5)];
[bezierPath closePath];
CGContextSaveGState(context);
[bezierPath addClip];
CGContextDrawLinearGradient(context, simpleLinearGradient, CGPointMake(2.5, 15), CGPointMake(24.5, 15), 0);
CGContextRestoreGState(context);

[[UIColor blackColor] setStroke];
bezierPath.lineWidth = 1;
[bezierPath stroke];

CGGradientRelease(simpleLinearGradient);
CGColorSpaceRelease(colorSpace);

That's what I got:

Basically you can create linear, radial gradient with bunch of settings (locations, colors) and of course you should modify code above.

Answer 2

1.Create .h and .m files for eg CustomGradientView

1. CustomGradientView.h file should look like this

   @interface CustomGradientView : UIView

and CustomGradientView.m file should look like this - (void)drawRect:(CGRect)rect {

CGContextRef context = UIGraphicsGetCurrentContext();
// color1 and color 2 u can take as u wish here i m taking for explaining
UIColor *color1=[UIColor whiteColor];
CGColorRef startColor =color1.CGColor;

UIColor *color2=[UIColor redColor];
CGColorRef endColor = color2.CGColor;

drawLinearGradient(context, rect, startColor, endColor);

//for rounded corners
CGPathRef p = [[UIBezierPath bezierPathWithRoundedRect:rect
                                          5] CGPath];
CGContextAddRect(context, rect);
CGContextAddPath(context, p);
CGContextEOClip(context);
CGContextClearRect(context, rect);

}

then in the .xib files to which view you want to be gradient extend its class CustomGradientView instead of UIView

the drawLinearGradient method is in another class u have to import it they are

Common.h

#import <Foundation/Foundation.h>
void drawLinearGradient(CGContextRef context, CGRect rect, CGColorRef startColor, CGColorRef  endColor);
CGRect rectFor1PxStroke(CGRect rect);
void draw1PxStroke(CGContextRef context, CGPoint startPoint, CGPoint endPoint, CGColorRef color);
void drawGlossAndGradient(CGContextRef context, CGRect rect, CGColorRef startColor, CGColorRef endColor);
static inline double radians (double degrees) { return degrees * M_PI/180; }
CGMutablePathRef createArcPathFromBottomOfRect(CGRect rect, CGFloat arcHeight);
CGMutablePathRef createRoundedRectForRect(CGRect rect, CGFloat radius);

and Common.m

#import "Common.h"

CGRect rectFor1PxStroke(CGRect rect) {
    return CGRectMake(rect.origin.x + 0.5, rect.origin.y + 0.5, rect.size.width - 1, rect.size.height - 1);
}

void drawLinearGradient(CGContextRef context, CGRect rect, CGColorRef startColor, CGColorRef  endColor) {
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGFloat locations[] = { 0.0, 1.0 };

    NSArray *colors = [NSArray arrayWithObjects:(__bridge id)startColor, (__bridge id)endColor, nil];

    CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef) colors, locations);

    CGPoint startPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMinY(rect));
    CGPoint endPoint = CGPointMake(CGRectGetMidX(rect), CGRectGetMaxY(rect));

    CGContextSaveGState(context);
    CGContextAddRect(context, rect);
    CGContextClip(context);
    CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);
    CGContextRestoreGState(context);

    CGGradientRelease(gradient);
}

void draw1PxStroke(CGContextRef context, CGPoint startPoint, CGPoint endPoint, CGColorRef color) {

    CGContextSaveGState(context);
    CGContextSetLineCap(context, kCGLineCapSquare);
    CGContextSetStrokeColorWithColor(context, color);
    CGContextSetLineWidth(context, 1.0);
    CGContextMoveToPoint(context, startPoint.x + 0.5, startPoint.y + 0.5);
    CGContextAddLineToPoint(context, endPoint.x + 0.5, endPoint.y + 0.5);
    CGContextStrokePath(context);
    CGContextRestoreGState(context);        

}

void drawGlossAndGradient(CGContextRef context, CGRect rect, CGColorRef startColor, CGColorRef endColor) {

    drawLinearGradient(context, rect, startColor, endColor);

    CGColorRef glossColor1 = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.35].CGColor;
    CGColorRef glossColor2 = [UIColor colorWithRed:1.0 green:1.0 blue:1.0 alpha:0.1].CGColor;

    CGRect topHalf = CGRectMake(rect.origin.x, rect.origin.y, rect.size.width, rect.size.height/2);

    drawLinearGradient(context, topHalf, glossColor1, glossColor2);

}

CGMutablePathRef createArcPathFromBottomOfRect(CGRect rect, CGFloat arcHeight) {

    CGRect arcRect = CGRectMake(rect.origin.x, rect.origin.y + rect.size.height - arcHeight, 
                                rect.size.width, arcHeight);

    CGFloat arcRadius = (arcRect.size.height/2) + (pow(arcRect.size.width, 2) / (8*arcRect.size.height));
    CGPoint arcCenter = CGPointMake(arcRect.origin.x + arcRect.size.width/2, arcRect.origin.y + arcRadius);

    CGFloat angle = acos(arcRect.size.width / (2*arcRadius));
    CGFloat startAngle = radians(180) + angle;
    CGFloat endAngle = radians(360) - angle;

    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddArc(path, NULL, arcCenter.x, arcCenter.y, arcRadius, startAngle, endAngle, 0);
    CGPathAddLineToPoint(path, NULL, CGRectGetMaxX(rect), CGRectGetMinY(rect));
    CGPathAddLineToPoint(path, NULL, CGRectGetMinX(rect), CGRectGetMinY(rect));
    CGPathAddLineToPoint(path, NULL, CGRectGetMinX(rect), CGRectGetMaxY(rect));
    return path;    

}

CGMutablePathRef createRoundedRectForRect(CGRect rect, CGFloat radius) {