How can I partially reveal and partially fill color in image

Question

In my project I'm displaying image like this,

But according to user progress I want to hide the partial image.

Example : If user process is 75% than my image will display like this,

One idea is that I will use some variation of image and show image according to the percentage. But if I can achieve this programmatically with one image than it will be better. plz help for this problem.

Answer 1

What you need is image masking. From apple docs -

An image mask is a bitmap that specifies an area to paint, but not the color. In effect, an image mask acts as a stencil to specify where to place color on the page. Quartz uses the current fill color to paint an image mask.

So as your percentage of download increases you decrease the alpha value of the uiimage below. Hope this is what you require.

Answer 2

Guys i have done it using this code :

 UIImage * flagImage = [UIImage imageNamed:flagImageStr];  //this is image of the flag
    UIImage * maskImg = [UIImage imageNamed:@"mask4.png"];  //Created heart shape mask image

    UIImage *image = [self maskImage:flagImage withMask:maskImg];
    CALayer *layer = partialFlagIV.layer;  //partialFlagIV is my imageview name
    layer.shadowOpacity = .9;
    layer.shadowColor = [[UIColor blackColor] CGColor];
    layer.shadowOffset = CGSizeMake(0,0);
    layer.shadowRadius = 2;

    partialFlagIV.image = image;

    int percentage = [percentageStr integerValue];  //percentageStr value will decide how much part of image will be in other color
    int percentageValue = 100-percentage;

    int maskImgYValue = (percentageValue*80)/100;
    int imgYvalue;
    if (percentageValue<40) {
        imgYvalue = 305-(maskImgYValue*4);
    }else{
        imgYvalue = 305-(maskImgYValue*3.8);
    }

//This code is needed when i use app in iPad bcoze of size of partialFlagIV is larger in iPad
    if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPad) {
        int baseValue = 80+(percentage*0.2);
        percentage = baseValue-percentage;
        maskImgYValue = maskImgYValue+percentage;
    }


    UIImageView *aImageView = [[UIImageView alloc] initWithFrame:CGRectMake(partialFlagIV.frame.origin.x, partialFlagIV.frame.origin.y, partialFlagIV.frame.size.width,maskImgYValue)];  //created another imageview to place it on the partialFlagIV so it will display like color field in partialFlagIV 


    aImageView.backgroundColor = [UIColor clearColor];
    image = [self imageByCropping:image toRect:CGRectMake(0, 0, image.size.width, image.size.height-imgYvalue)];  //this method is used to crop my flage image

    aImageView.image = [self newImageFromMaskImage:image  inColor:[UIColor colorWithRed:(186/255.0) green:(57/255.0) blue:(38/255.0) alpha:1]];   //this method will create mask image with given color
    [self.view addSubview:aImageView];
    [self.view bringSubviewToFront:aImageView];

//this method will crop the flag imge to heart shape
-(UIImage *)imageByCropping:(UIImage *)imageToCrop toRect:(CGRect)rect
{
    CGImageRef imageRef = CGImageCreateWithImageInRect([imageToCrop CGImage], rect);

    UIImage *cropped = [UIImage imageWithCGImage:imageRef];
    CGImageRelease(imageRef);

    return cropped;
}

//this method will create color image using mask image
-(UIImage *) newImageFromMaskImage:(UIImage *)mask inColor:(UIColor *) color {
    CGImageRef maskImage = mask.CGImage;
    CGFloat width = mask.size.width;
    CGFloat height = mask.size.height;
    CGRect bounds = CGRectMake(0,0,width,height);

    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGContextRef bitmapContext = CGBitmapContextCreate(NULL, width, height, 8, 0, colorSpace, kCGImageAlphaPremultipliedLast);
    CGContextClipToMask(bitmapContext, bounds, maskImage);
    CGContextSetFillColorWithColor(bitmapContext, color.CGColor);
    CGContextFillRect(bitmapContext, bounds);

    CGImageRef mainViewContentBitmapContext = CGBitmapContextCreateImage(bitmapContext);
    CGContextRelease(bitmapContext);

    UIImage *result = [UIImage imageWithCGImage:mainViewContentBitmapContext];
    return result;
}

Added comment to explain codes.Hope it help future user.