Color a complex image in iOS

Question

I am trying to color the image below using Objective C in iOS.

I want to color the image based on height. For example the first 10 pixels with red, the next 20 with blue and the next 20 with green. I want the image to be colored like this.

I have searched in Stack overflow but I am not able find a way to do it.

Thanks

Edit:

This is how I have drawn the image

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextMoveToPoint(context, 0, 300);
CGContextAddLineToPoint(context, 20, 230);
CGContextAddLineToPoint(context, 80, 230);
CGContextAddLineToPoint(context, 120, 150);
CGContextAddLineToPoint(context, 140, 230);
CGContextAddLineToPoint(context, 300, 300);
CGContextClosePath(context);


CGContextSetStrokeColorWithColor(context, [UIColor blackColor].CGColor);
CGContextStrokePath(context);

This is a terrain graph. The points in the graph will be dynamic. So based on the height of the terrain, it has to be colored. So I will not be able to create separate paths for the individual colors as I only get the heights. I do not have any point information for the individual color paths in the graph.

Color the Image? How is defined your image at start? Any BezierPath/CGPath? Do you know the delimitations? — Larme, Jan 22 '16 at 16:31
u need a separate bezierpath for each color segment u want to fill. — Teja Nandamuri, Jan 22 '16 at 16:31
do u want to fill the whole segment at once / fill it based on touch just like painting ? — Teja Nandamuri, Jan 22 '16 at 16:35
I would color an enclosing rectangle, and then use the image as a mask. — , Jan 22 '16 at 16:42
@Mr.T I will not be able to get separate bezierpaths, as I only have the height information — Naveen Ramanathan, Jan 22 '16 at 16:48
@MichaelL Can you please elaborate that. I am not sure I understood that. — Naveen Ramanathan, Jan 22 '16 at 16:49

matt · Accepted Answer · 2016-01-22T17:17:18.433

As you've already been told, one way is simply to treat your graph shape as a mask. The mask means that your graph shape punches a "hole" in the image. The bands of color can simply be three colored rectangular views behind the image, easy to create in code. The three rectangular views behind the image show through the hole.

Alternatively, draw the graph shape, then treat the graph shape as a clipping path and draw the three colored rectangles.

Using the second approach, I was easily able to get this result:

Here's the code I used:

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 3);

// your code:
CGContextMoveToPoint(context, 0, 300);
CGContextAddLineToPoint(context, 20, 230);
CGContextAddLineToPoint(context, 80, 230);
CGContextAddLineToPoint(context, 120, 150);
CGContextAddLineToPoint(context, 140, 230);
CGContextAddLineToPoint(context, 300, 300);
CGContextClosePath(context);

CGContextSetStrokeColorWithColor(context, [UIColor blackColor].CGColor);
CGContextStrokePath(context);

// my code starts here - first, draw path again:

CGContextMoveToPoint(context, 0, 300);
CGContextAddLineToPoint(context, 20, 230);
CGContextAddLineToPoint(context, 80, 230);
CGContextAddLineToPoint(context, 120, 150);
CGContextAddLineToPoint(context, 140, 230);
CGContextAddLineToPoint(context, 300, 300);
CGContextClosePath(context);

// clip to that path, and draw the rectangles:
CGContextClip(context);
CGContextSetFillColorWithColor(context, [UIColor greenColor].CGColor);
CGContextFillRect(context, CGRectMake(0,250,300,50));
CGContextSetFillColorWithColor(context, [UIColor blueColor].CGColor);
CGContextFillRect(context, CGRectMake(0,200,300,50));
CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);
CGContextFillRect(context, CGRectMake(0,150,300,50));

For a similar example, see my answer here: http://stackoverflow.com/a/23202718/341994 — matt, Jan 22 '16 at 16:54

score 0 · Answer 2 · answered Jan 22 '16 at 18:05

This is the code for the first method mentioned by @matt

UIBezierPath *maskPath = [UIBezierPath bezierPath];
[maskPath moveToPoint:CGPointMake(0, 300)];
[maskPath addLineToPoint:CGPointMake(20, 230)];
[maskPath addLineToPoint:CGPointMake(80, 230)];
[maskPath addLineToPoint:CGPointMake(120, 150)];
[maskPath addLineToPoint:CGPointMake(140, 230)];
[maskPath addLineToPoint:CGPointMake(300, 300)];
[maskPath addLineToPoint:CGPointMake(300, 0)];
[maskPath addLineToPoint:CGPointMake(0, 0)];
[maskPath closePath];
CAShapeLayer *mask = [CAShapeLayer layer];
mask.path = maskPath.CGPath;
self.maskView.layer.mask = mask;

But you're not showing how to get the colored bands. – matt Jan 22 '16 at 19:36 — matt, Jan 22 '16 at 19:36

Color a complex image in iOS

2 Answers2