18

I want to fill specific color on specific area of an image.

EX:

enter image description here

In above Joker image, If touch on hair of Joker then fill specific color on hair Or touch on nose then fill specific color on nose.. etc. I hope may you understand what I am trying to say.

After googling it's may be achieve by use of UIBezierPath or CGContext Reference but I am very new for it, I tried to read this documentation but I do not understand (take more time) anything also I have limit of time for this Project. So I can not spend more time on it.

Also I found that we can use Flood fill algorithm. But I don't know how to use in my case.

NOTE: I don't want to divide original image (such like hair. nose, cap,...etc) because If I will do then there will be so many images in bundle so I need to handle it for both normal and retina device so this option is not helpful for me.

So please give me your valuable suggestion and also tell me which is best for me UIBezierPath or CGContext Reference? How can I fill color on specific portion of image? and/or can we fill color under the black border of area ? Because I am new at Quartz 2D Programming.

  • One way you can do this using beizerpath. Another by image masking. I guess. – Exploring Mar 03 '14 at 08:40
  • hi i face one issue with flood fill library..if i touch on border that fill border color..and how to stop fill border color..? – Ankit Kargathra Sep 01 '15 at 12:17
  • Hi, I have tried this code for my image, but sometimes it does not detect the actual point and fill color somewhere else. So can anybody provide the generic algorithm for filling color on uiimage? – Jane Mar 06 '17 at 05:33
  • @Ankit Did u found any solution for the issue with border touch. Me too facing the same issue with that. Let me know if u find any solution for this it would be helpful for me.. – Madhavan Dec 15 '17 at 11:32
  • how to implement brush tool for coloring the specific area https://stackoverflow.com/questions/50944736/how-to-draw-inside-the-black-edges-in-ios-sdk-with-opengl-es – Ramkumar Paulraj Jun 26 '18 at 05:25

4 Answers4

9

Use the Github library below. The post uses the flood fill algorithm : UIImageScanlineFloodfill

Objective C description : ObjFloodFill

If you want to look at detailed explanation of the algorithm : Recursion Explained with the Flood Fill Algorithm (and Zombies and Cats)

few of the other tutorials in other languages : Lode's Computer Graphics Tutorial : Flood Fill

CRDave
  • 9,279
  • 5
  • 41
  • 59
Harsh
  • 2,852
  • 1
  • 13
  • 27
  • +1 For the links. _Recursion Explained With Zombies and Cats_ is visually and conceptually a very good article. – Kasper Munck Mar 09 '14 at 08:53
  • how to implement brush tool for coloring the specific area -https://stackoverflow.com/questions/50944736/how-to-draw-inside-the-black-edges-in-ios-sdk-with-opengl-es – Ramkumar Paulraj Jun 21 '18 at 11:13
4

Rather than attempting to flood fill an area of a raster-based image, a better approach (and much smaller amount of data) would be to create vector images. Once you have a vector image, you can stroke the outline to draw it uncolored, or you can fill the outline to draw it colored.

I recommend using CoreGraphics calls like CGContextStrokePath() and CGContextFillPath() to do the drawing. This will likely look better than using the flood fill because you will get nicely anti-aliased edges.

Apple has some good documentation on how to draw with Quartz 2D. Particularly the section on Paths is useful to what you're trying to do.

user1118321
  • 25,567
  • 4
  • 55
  • 86
  • This is a good option to start with but is there any demo or any starting point for how to create the raster based images and also how to get the touch points on the image and define the area? Will you help me out a little bit [@user1118321](http://stackoverflow.com/users/1118321/user1118321) – The iOSDev Aug 04 '15 at 13:07
  • @TheLion I believe [this sample code](https://developer.apple.com/library/mac/samplecode/Quartz2DShadings/Introduction/Intro.html) shows some basic examples of how to do it. – user1118321 Aug 04 '15 at 13:37
  • how to implement brush tool for coloring the specific area -https://stackoverflow.com/questions/50944736/how-to-draw-inside-the-black-edges-in-ios-sdk-with-opengl-es – Ramkumar Paulraj Jun 21 '18 at 11:13
2

You can Clip the context based on image Alpha transparency

I have created a quick image with black color and alpha

enter image description here

Then using the below Code

- (void)drawRect:(CGRect)rect
{
    CGContextRef context = UIGraphicsGetCurrentContext(); // Get the context
    CGContextSetFillColorWithColor(context, [UIColor blueColor].CGColor); // Set the fill color to be blue

    // Flip the context so that the image is not flipped
    CGContextTranslateCTM(context, 0, rect.size.height);
    CGContextScaleCTM(context, 1.0, -1.0);

    // Clip the context by a mask created from the image
    UIImage *image = [UIImage imageNamed:@"image.png"];
    CGImageRef cgImage = image.CGImage;
    CGContextClipToMask(context, rect, cgImage);

    // Finally fill the context with the color and mask you set earlier
    CGContextFillRect(context, rect);
}

The result

enter image description here

This is a quick hint of what you can do. However you need now to convert your image to add alpha transparent to the parts you need to remove

After a quick search I found these links

How can I change the color 'white' from a UIImage to transparent

How to make one colour transparent in UIImage

Community
  • 1
  • 1
Hani Ibrahim
  • 1,448
  • 11
  • 21
  • how to implement brush tool for coloring the specific area -https://stackoverflow.com/questions/50944736/how-to-draw-inside-the-black-edges-in-ios-sdk-with-opengl-es – Ramkumar Paulraj Jun 21 '18 at 11:13
2

If You create your image as SVG vector base image, it will be very light (less than png, jpg) and really easy to manage via Quartz 2D using bezier paths. Bezier paths can be filled (white at starting). UIBezierPath have a method (containsPoint:) that help define if you click inside.

Armand DOHM
  • 1,121
  • 1
  • 7
  • 9