iOS - Overlay UIImage with color on non-transparent area only?

Question

I have a white image with transparent area in the middle like this:

I want to overlay it with colour (non-transparent area only) so it looks like this:

How can I do this?

I have looked into this answer but it overlay the whole image including the non-transparent area.

Answer 1

So your image is effectively a "mask". Play around with the "CGContextClipToMask" call and the above code that you referenced.

Answer 2

Try the following code and it gives the exact what you want.

    UIGraphicsBeginImageContextWithOptions(imgView.image.size, YES, 0);
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetFillColorWithColor(context, [[UIColor redColor] CGColor]);
    CGContextFillRect(context, (CGRect){ {0,0}, imgView.image.size} );

    CGAffineTransform flipVertical = CGAffineTransformMake(1, 0, 0, -1, 0, imgView.image.size.height);
    CGContextConcatCTM(context, flipVertical);
    CGContextDrawImage(context, (CGRect){ {0,0}, imgView.image.size }, [imgView.image CGImage]);

    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    [imgView setImage:image];