ios - How to fill a UIBezierPath with a gradient? -

i've drawn graph using uibezierpath. can fill area under graph solid color want fill area under graph gradient rather solid color. i'm not sure how make gradient apply graph , not whole view, i've read few questions not found applicable.

this main graph drawing code:

// draw graph uibezierpath *bargraph = [uibezierpath bezierpath]; bargraph.linewidth = 1.0f; [bluecolor setstroke]; tcdatapoint *datapoint = self.testdata[0]; cgfloat x = [self converttimetoxpoint:datapoint.time]; cgfloat y = [self convertdatatoypoint:datapoint.datausage]; cgpoint plotpoint = cgpointmake(x,y); [bargraph movetopoint:plotpoint]; (int ii = 1; ii < [self.testdata count]; ++ii) {     datapoint = self.testdata[ii];     x = [self converttimetoxpoint:datapoint.time];     y = [self convertdatatoypoint:datapoint.datausage];     plotpoint = cgpointmake(x, y);     [bargraph addlinetopoint:plotpoint]; } [bargraph stroke]; 

i've been attempting fill graph experimenting code following, honest not %100 sure i'm doing despite going through various tutorials , documentation:

[bargraph closepath];  cgfloat colors [] = {     1.0, 0.0, 0.0, 1.0,     1.0, 1.0, 1.0, 1.0 };  cgcolorspaceref basespace = cgcolorspacecreatedevicergb(); cggradientref gradient = cggradientcreatewithcolorcomponents(basespace, colors, null, 2); cgcolorspacerelease(basespace);  cgpoint startpoint = cgpointmake(cgrectgetmidx(self.bounds), self.topy); cgpoint endpoint = cgpointmake(cgrectgetmidx(self.bounds), self.bottomy);  cgcontextref context = uigraphicsgetcurrentcontext(); cgcontextclip(context); cgcontextdrawlineargradient(context, gradient, startpoint, endpoint, 0); cggradientrelease(gradient); 

the easiest approach use original graph bezier path construct mask , impose mask on gradient layer. impose graph layer on top of gradient layer.

so, example, make cashapelayer, close graph bezier path, set path shape layer's path, , fill black. have mask shape of area under graph. make cagradientlayer , make cashapelayer mask. in front of that, place actual graph.

so example (edited):

here's code used create drawing (my bezier path simple, 4 points joined 3 lines, can see area under gradient):

cashapelayer* shape = [[cashapelayer alloc] init]; shape.frame = self.graph.bounds; cgfloat h = shape.frame.size.height; cgfloat w = shape.frame.size.width;  nsarray* points = @[                     [nsvalue valuewithcgpoint:cgpointmake(0,h-50)],                     [nsvalue valuewithcgpoint:cgpointmake(70,h-100)],                     [nsvalue valuewithcgpoint:cgpointmake(140,h-75)],                     [nsvalue valuewithcgpoint:cgpointmake(w,h-150)],                     ];  uibezierpath* p = [uibezierpath new]; [p movetopoint:[points[0] cgpointvalue]]; (nsinteger = 1; < points.count; i++)     [p addlinetopoint:[points[i] cgpointvalue]];  shape.path = p.cgpath; shape.strokecolor = [uicolor blackcolor].cgcolor; shape.linewidth = 2; shape.fillcolor = nil;  cagradientlayer* grad = [[cagradientlayer alloc] init]; grad.frame = self.graph.bounds; grad.colors = @[(id)[uicolor bluecolor].cgcolor,                 (id)[uicolor yellowcolor].cgcolor];  cashapelayer* mask = [[cashapelayer alloc] init]; mask.frame = self.graph.bounds; [p addlinetopoint:cgpointmake(w,h)]; [p addlinetopoint:cgpointmake(0,h)]; [p closepath]; mask.path = p.cgpath; mask.fillcolor = [uicolor blackcolor].cgcolor; grad.mask = mask;  [self.graph.layer addsublayer:grad]; [self.graph.layer addsublayer:shape];