ios - 如何在 iOS 中对图像的白色背景进行着色

Question

我正在将一款卡牌融合游戏从 Android 移植到 iOS(请参阅 https://play.google.com/store/apps/details?id=com.pipperpublishing.fivekings )。我想将外卡染成黄色(作为新手玩游戏的辅助)。

在 Android 中，这非常简单，只需使用黑底白字的卡片即可。

    static final int TINT_COLOR = Color.parseColor("#FFFF66"); //light yellow
    static final PorterDuff.Mode PORTER_DUFF_MODE = PorterDuff.Mode.DARKEN;
...

        if (highlightWildCard != null) {
            //mutate so this setting will not carry through to other rounds or to the Computer cards when shown
            this.getDrawable().mutate();
            this.getDrawable().setColorFilter(TINT_COLOR, PORTER_DUFF_MODE);
        }

我找不到在 iOS 中执行此操作的等效方法。我试过这个:

class CardView : UIImageView {
        static let TINT_COLOR = UIColor.yellowColor() //FIXME: UIColorFromRGB(0xFFFF66); //light yellow
...
        if (highlightWildCard != nil) {
            //for tintColor to be applied, have to replace with an image template - note this creates a new image
            self.image = self.image!.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate)
            self.backgroundColor = CardView.TINT_COLOR
        }

但这只会将整张卡片涂成黄色。

我尝试过使用 CGContextSetBlendMode，但遇到了一堆我不明白的错误。

希望 iOS 专家能够为我指出正确的方向(希望不涉及创建一组单独的有色卡片；)

更新:我尝试使用这篇文章中的这个出色的扩展: How to tint a transparent PNG image in iPhone?但这似乎使卡片没有着色。

Answer 1

您可以使用 CoreImage 框架来实现此目的。

我可以向您展示如何在 Objective-C 中做到这一点，所以我希望这对您有所帮助。您应该能够将其转换为 swift，或者您可以直接使用桥接 header 来使用它。

首先，您需要创建一个CoreImage上下文。最好初始化一次 - 因此使用属性保存对它的引用:

@property (strong, nonatomic) CIContext *ciContext;
...
self.ciContext = [CIContext contextWithOptions:@{kCIContextUseSoftwareRenderer : @NO}];

现在是有趣的部分 - 使用 CIColorMatrix 滤镜来移动白色。这是一个执行此操作的方法(注意它使用我们之前创建的 ciContext):

-(UIImage*)filteredImageFromImage:(UIImage*)sourceImage withColor:(UIColor*)color
{
    size_t componentCount = CGColorGetNumberOfComponents(color.CGColor);
    if (componentCount < 4)
    {
        return sourceImage;
    }

    CIImage *inputCIImage = [CIImage imageWithCGImage:sourceImage.CGImage];
    CGRect extent = [inputCIImage extent];

    CGFloat r, g, b, a;
    [color getRed:&r green:&g blue:&b alpha:&a];

    CIFilter *colorMatrixFilter = [CIFilter filterWithName:@"CIColorMatrix"];
    [colorMatrixFilter setDefaults];
    [colorMatrixFilter setValue:inputCIImage forKey:kCIInputImageKey];
    [colorMatrixFilter setValue:[CIVector vectorWithX:r Y:0 Z:0 W:0] forKey:@"inputRVector"];
    [colorMatrixFilter setValue:[CIVector vectorWithX:0 Y:g Z:0 W:0] forKey:@"inputGVector"];
    [colorMatrixFilter setValue:[CIVector vectorWithX:0 Y:0 Z:b W:0] forKey:@"inputBVector"];

    CGImageRef cgiimage = [self.ciContext createCGImage:colorMatrixFilter.outputImage fromRect:extent];
    UIImage *newImage = [UIImage imageWithCGImage:cgiimage scale:[[UIScreen mainScreen] scale] orientation:sourceImage.imageOrientation];
    CGImageRelease(cgiimage);

    return newImage;
}

最后，将卡片着色为黄色:

UIImage *cardImage = [self filteredImageFromImage:[UIImage imageNamed:@"card"] withColor:[UIColor yellowColor]];

编辑:

以下是如何在 swift 中通过桥接 header 使用它:

1. 添加新的 Objective-C 类。我们称之为 ImageFilter。

头文件:

// ImageFilter.h

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h> 

@interface ImageFilter : NSObject
-(UIImage*)filteredImageFromImage:(UIImage*)sourceImage withColor:(UIColor*)color;
@end

实现文件:

// ImageFilter.m

#import "ImageFilter.h"
#import <CoreImage/CoreImage.h>


@interface ImageFilter()
@property (strong, nonatomic) CIContext *ciContext;
@end

@implementation ImageFilter

- (instancetype)init
{
    self = [super init];
    if (self != nil)
    {
        self.ciContext = [CIContext contextWithOptions:@{kCIContextUseSoftwareRenderer : @NO}];
    }
    return self;
}

-(UIImage*)filteredImageFromImage:(UIImage*)sourceImage withColor:(UIColor*)color
{
    size_t componentCount = CGColorGetNumberOfComponents(color.CGColor);
    if (componentCount < 4)
    {
        return sourceImage;
    }

    CIImage *inputCIImage = [CIImage imageWithCGImage:sourceImage.CGImage];
    CGRect extent = [inputCIImage extent];

    CGFloat r, g, b, a;
    [color getRed:&r green:&g blue:&b alpha:&a];

    CIFilter *colorMatrixFilter = [CIFilter filterWithName:@"CIColorMatrix"];
    [colorMatrixFilter setDefaults];
    [colorMatrixFilter setValue:inputCIImage forKey:kCIInputImageKey];
    [colorMatrixFilter setValue:[CIVector vectorWithX:r Y:0 Z:0 W:0] forKey:@"inputRVector"];
    [colorMatrixFilter setValue:[CIVector vectorWithX:0 Y:g Z:0 W:0] forKey:@"inputGVector"];
    [colorMatrixFilter setValue:[CIVector vectorWithX:0 Y:0 Z:b W:0] forKey:@"inputBVector"];

    CGImageRef cgiimage = [self.ciContext createCGImage:colorMatrixFilter.outputImage fromRect:extent];
    UIImage *newImage = [UIImage imageWithCGImage:cgiimage scale:[[UIScreen mainScreen] scale] orientation:sourceImage.imageOrientation];
    CGImageRelease(cgiimage);

    return newImage;
}

@end

1. 在您的桥接文件(通常是 YourProject-Bridging-Header.h 中，当您向项目添加新的 Objective-C 文件时，Xcode 会询问并自动创建)导入我们的新文件:

   #import ImageEffect.h

另外，不要忘记确保在目标的build设置中的“Objective-C Bridging Header”下指定了“YourProject-Bridging-Header.h”。

1. 在您的 swift 代码中使用它:

   让 imageFilter: ImageFilter = ImageFilter()

   let cardImage = imageFilter.filteredImageFromImage(UIImage(named: "card"), withColor: UIColor.yellowColor());
   

注意:代码格式对我来说有点疯狂，不知道为什么。它导致 swift 中的最后一段代码无法正确显示为代码块......