UIBezierPath and gradient iOS - 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
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) {