Question

Im working on rendering a graph in app. Working with the data (drawing the dots, and lines between dots) is covered, what I am interested in is mapping this data ontop of a graphic.

Firstly, let me show you what I want to do (see below), the solution is that the graph base has a gradient.

I presume the solution is to just take a block image of the gradient, and just cut the edges in code (somehow).

Is there an existing algorithm (Objective-C) that will do this?

Thanks

Answer 1

My solution was to map an image to a path with the use of a bezierPath. See the example code below

UIBezierPath* beizerPath2 = [UIBezierPath bezierPath];
[beizerPath2 moveToPoint:CGPointMake(0.0, 167)];       //Starting Point
[beizerPath2 addLineToPoint:CGPointMake(100, 40)];  
[beizerPath2 addLineToPoint:CGPointMake(200, 70)];    
[beizerPath2 addLineToPoint:CGPointMake(300, 30)];    
[beizerPath2 addLineToPoint:CGPointMake(320, 30)];    
[beizerPath2 addLineToPoint:CGPointMake(320, 167)];     //Finishing Point
[beizerPath2 closePath];                                //Close Path


NSLog(@"Masking Feedstock with Bezier");
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.path = [beizerPath2 CGPath];
graphFeedStock.layer.mask = maskLayer;