Question

I am developing a coloring book application for iPad (iOS4+). The application should allow to color only one area of an image at a time.

I mean, if users touches anywhere on the screen and starts moving the finger, the color should be applied to only those pixels that are contained within the same area as the first touch point. For example, if users touches center of the left image and starts moving finger all over the image he should get something like the right image.

I think that one of the solutions for the task might be to create a mask in shape of the area touched and then apply this mask to the image before doing farther modifications. But, honestly, I have no idea where to start.

Could you please tell me how can I create such a mask?

The solution might use Core Graphics and Open GL.

Answer 1

As @Till suggested, I implemented queued flood fill algorithm. I had to do some optimizations to keep memory consumption and speed of execution in reasonable limits.

I don’t use the algorithm to really fill an image. I use the algorithm to create masks:

• Create an array of mask bytes (image_width * image_height bytes)
• Fill the whole array with 0xFF values
• Use flood-fill algorithm to find all pixels within the area and coordinates of the rectangle containing the area.
• For each found pixel set corresponding value in array of mask bytes to 0
• Create another (smaller array) of mask bytes and copy part (defined by the calculated rectangle) of the array of mask bytes to the new array.
• Create a mask using following code

    NSData* maskData = // construct NSData from mask bytes

    CGDataProviderRef dataProvider = CGDataProviderCreateWithCFData((CFMutableDataRef)maskData);

    int width = maskRight - maskLeft + 1;
    int height = maskBottom - maskTop + 1;
    CGImageRef maskImage = CGImageMaskCreate(width, height, 8, 8, width, dataProvider, NULL, YES);
    CGDataProviderRelease(dataProvider);

• You can use the mask later using code like the following

    CGContextSaveGState(context);

    CGContextTranslateCTM(context, 0.0, 768);
    CGContextScaleCTM(context, 1.0, -1.0);

    CGRect r = CGRectApplyAffineTransform(maskImageRect, CGContextGetCTM(context));
    CGContextClipToMask(context, r, maskImage);

    CGContextTranslateCTM(context, 0.0, 768);
    CGContextScaleCTM(context, 1.0, -1.0);

    // mask is setup, draw here 

    CGContextRestoreGState(context);

Using this code you can create a mask of any shape. You can even create a semi-transparent mask if you want. To create a semi-transparent mask you need to set some values other than 0 in the array of mask bytes for transparent areas (0 – fully transparent, 255 – fully opaque).