如何在图像中部分显示和部分填充颜色

Question

在我的项目中，我正在显示这样的图像，

但根据用户进度，我想隐藏部分图像。

示例：如果用户流程为75％，我的图片会显示如下，

一个想法是我会根据百分比使用一些图像变化并显示图像。但是，如果我能用一个图像以编程方式实现这一目标，那么它会更好。请帮助解决这个问题。

Answer 1

您需要的是图像遮罩。来自apple docs -

  

图像蒙版是一个位图，用于指定要绘制的区域，但不是   颜色。实际上，图像蒙版充当模板以指定在何处   在页面上放置颜色。 Quartz使用当前填充颜色进行绘制   图像蒙版。

因此，随着下载百分比的增加，您可以降低下面uiimage的Alpha值。希望这是你所需要的。

Answer 2

伙计们我使用此代码完成了它：

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

添加评论以解释代码。希望它能帮助未来的用户。