iphone - 画像の色を部分的に表示して部分的に塗りつぶすにはどうすればよいですか

Question

私のプロジェクトでは、このような画像を表示しています。

しかし、ユーザーの進行状況に応じて、部分的な画像を非表示にしたいと考えています。

例: ユーザー プロセスが 75% の場合、私の画像は次のように表示されます。

1 つのアイデアは、画像のいくつかのバリエーションを使用し、パーセンテージに従って画像を表示することです。しかし、1 つの画像を使用してプログラムでこれを達成できれば、それよりも優れたものになります。この問題のヘルプをお願いします。

Answer 1

必要なのは画像マスキングです。アップルのドキュメントから-

イメージ マスクは、ペイントする領域を指定するビットマップですが、色は指定しません。実際、イメージ マスクは、ページのどこに色を配置するかを指定するステンシルとして機能します。Quartz は、現在の塗りつぶしの色を使用してイメージ マスクをペイントします。

したがって、ダウンロードの割合が増加すると、uiimage以下のアルファ値が減少します。これがあなたが必要とするものであることを願っています。

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

コードを説明するコメントを追加しました。将来のユーザーに役立つことを願っています。