PathMasking.m

/*
   With an open path this yields less than desirable results;
   closed paths this technique should be fine with.
   Screenshot: http://tinypic.com/view.php?pic=7301up&s=7
 */

- (void)drawRect:(CGRect)rect {
	UIImage * bg = [UIImage imageNamed:@"bg.png"];
	CGContextRef context = UIGraphicsGetCurrentContext();
	CGRect bounds = [self bounds];
	

	CGColorSpaceRef cs = CGColorSpaceCreateDeviceRGB();
	
	CGMutablePathRef path = CGPathCreateMutable();
	CGPathMoveToPoint(path, NULL, 0.0f, bounds.size.height);
	CGPathAddCurveToPoint(path, NULL, bounds.size.width * 0.025, bounds.size.height * 0.95, bounds.size.width * 0.075, bounds.size.height * 0.95, bounds.size.width * 0.1, bounds.size.height * 0.9);
	CGPathAddCurveToPoint(path, NULL, bounds.size.width * 0.125, bounds.size.height * 0.97, bounds.size.width * 0.175, bounds.size.height * 0.97, bounds.size.width * 0.2, bounds.size.height * 0.8);	
	CGPathAddCurveToPoint(path, NULL, bounds.size.width * 0.325, bounds.size.height * 0.5, bounds.size.width * 0.375, bounds.size.height * 0.5, bounds.size.width * 0.5, bounds.size.height * 0.5);	
	
	const CGFloat components[8] = {
		1.0, 0.0, 0.0, 0.15,
		0.0, 1.0, 0.0, 1.0
	};
	const CGFloat locations[2] = {
		0.0, 1.0
	};
	CGGradientRef grad = CGGradientCreateWithColorComponents(cs, components, locations, 2);

	CGContextRef bmp = CGBitmapContextCreate(NULL, bounds.size.width, bounds.size.height, 8, 8 * 3 * bounds.size.width, cs, kCGImageAlphaPremultipliedLast);
	
	CGContextDrawLinearGradient(bmp, grad, CGPointZero, CGPointMake(bounds.size.width, 0.0f), 0);
	
	CGImageRef img = CGBitmapContextCreateImage(bmp);
	
	CGContextDrawImage(context, bounds, [bg CGImage]);
	
	CGContextAddPath(context, path);
	CGContextClip(context);
	CGContextDrawImage(context, bounds, img);

	CGImageRelease(img);
	CGContextRelease(bmp);
	CGGradientRelease(grad);
	CGPathRelease(path);
	CGColorSpaceRelease(cs);
}

/*
   This technique will yield the result you're looking for:
	http://tinypic.com/view.php?pic=35i9gdw&s=7
*/
- (void)drawRect:(CGRect)rect {
	CGContextRef context = UIGraphicsGetCurrentContext();
	
	UIImage * bg = [UIImage imageNamed:@"bg.png"];
	
	CGRect bounds = [self bounds];
	
	
	CGColorSpaceRef cs = CGColorSpaceCreateDeviceRGB();
	
	CGMutablePathRef path = CGPathCreateMutable();
	CGPathMoveToPoint(path, NULL, 0.0f, bounds.size.height);
	CGPathAddCurveToPoint(path, NULL, bounds.size.width * 0.025, bounds.size.height * 0.95, bounds.size.width * 0.075, bounds.size.height * 0.95, bounds.size.width * 0.1, bounds.size.height * 0.9);
	CGPathAddCurveToPoint(path, NULL, bounds.size.width * 0.125, bounds.size.height * 0.97, bounds.size.width * 0.175, bounds.size.height * 0.97, bounds.size.width * 0.2, bounds.size.height * 0.8);	
	CGPathAddCurveToPoint(path, NULL, bounds.size.width * 0.325, bounds.size.height * 0.5, bounds.size.width * 0.375, bounds.size.height * 0.5, bounds.size.width * 0.5, bounds.size.height * 0.5);	
	
	const CGFloat components[8] = {
		1.0, 0.0, 0.0, 0.15,
		0.0, 1.0, 0.0, 1.0
	};
	const CGFloat locations[2] = {
		0.0, 1.0
	};
	CGGradientRef grad = CGGradientCreateWithColorComponents(cs, components, locations, 2);
	
	CGContextRef bmp = CGBitmapContextCreate(NULL, bounds.size.width, bounds.size.height, 8, 8 * 3 * bounds.size.width, cs, kCGImageAlphaPremultipliedLast);
	CGContextSetFillColorWithColor(bmp, [UIColor clearColor].CGColor);
	CGContextFillRect(bmp, bounds);
	CGContextSetLineWidth(bmp, 4.0f);
	CGContextSetStrokeColorWithColor(bmp, [UIColor whiteColor].CGColor);
	CGContextAddPath(bmp, path);
	CGContextStrokePath(bmp);
	
	CGImageRef img = CGBitmapContextCreateImage(bmp);
	
	CGContextDrawImage(context, bounds, [bg CGImage]);
	CGContextClipToMask(context, bounds, img);
	CGContextDrawLinearGradient(context, grad, CGPointZero, CGPointMake(bounds.size.width, 0.0f), 0);
	
	CGImageRelease(img);
	CGContextRelease(bmp);
	CGGradientRelease(grad);
	CGPathRelease(path);
	CGColorSpaceRelease(cs);
}