CODEWITHSUNDEEP
iosobjective-c
Naveen Ramanathan
Naveen Ramanathan

Reputation: 2206

Color a complex image in iOS

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

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.

enter image description here

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.

Upvotes: 3

Views: 98

Answers (2)

Naveen Ramanathan
Naveen Ramanathan

Reputation: 2206

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;

Upvotes: 0

matt
matt

Reputation: 535547

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:

enter image description here

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));

Upvotes: 4

Related Questions