CODEWITHSUNDEEP
iphoneuibezierpath
Tripti Kumar
Tripti Kumar

Reputation: 1581

Fill color inside UIBezierPath

I want to fill color inside a graph using UIBezierPath. Till now I have used following code:

NSMutableArray *graphData=[[NSMutableArray alloc] initWithObjects:[NSArray arrayWithObjects:@"2013-06-26",@"46", nil],[NSArray arrayWithObjects:@"2013-06-27",@"37", nil],[NSArray arrayWithObjects:@"2013-06-28",@"96", nil],[NSArray arrayWithObjects:@"2013-06-29",@"29", nil],[NSArray arrayWithObjects:@"2013-06-30",@"29", nil],[NSArray arrayWithObjects:@"2013-07-01",@"24", nil], nil];
    UIBezierPath *aPath = [UIBezierPath bezierPath];
    [[UIColor blackColor] setStroke];
    [[UIColor redColor] setFill];

    [aPath moveToPoint:CGPointMake(10, kGraphBottom-[[[graphData objectAtIndex:0] objectAtIndex:1]floatValue])];

    for (int i = 1; i < graphData.count; i++)
    {
        [aPath addLineToPoint:CGPointMake(10+50* (i), kGraphBottom-[[[graphData objectAtIndex:i] objectAtIndex:1]floatValue])];

    }

    [aPath moveToPoint:CGPointMake(10+50*graphData.count , kGraphBottom)];
    [aPath moveToPoint:CGPointMake(10 , kGraphBottom)];
    [aPath moveToPoint:CGPointMake(10 , kGraphBottom-[[[graphData objectAtIndex:0] objectAtIndex:1]floatValue])];
     [aPath closePath];
    [aPath fill];
    [aPath stroke];

The output that i am getting is like the image shown below:Graph

How can i fill the color between the graph and the x,y axis?

Upvotes: 3

Views: 3896

Answers (2)

Sebastian
Sebastian

Reputation: 7710

As far as I understand, you want to stroke that path, but fill a different area (The area between your path and the axis).

You'll have to use two paths for that. The one you are drawing right now for the stroke and another one for the fill. Build both paths at the same time, but start the fill path from the origin of you coordinate system and add a line to the beginning of you graph. Keep adding lines to both paths and at the end add a line down to the x-axis for the fill path, close the fill path and you're done.

Upvotes: 2

Magic Bullet Dave
Magic Bullet Dave

Reputation: 9076

It looks like you are not closing your path properly, hence the straight line between the first and last points. You should use addLineToPoint for the last three points not just moveToPoint and then I think you will be there.

Upvotes: 2

Related Questions