用blend修改圖片的顏色

現在存在的問題

如果一個APP中可以根據用戶喜好,更改APP中圖片的顏色,則設計師必須重復修改圖片,開發者圖片文件重命名、移動和導入無用功較多,下載安裝包較大。

解決方案

用blending給這張圖片加上另一個純色作為tint,并保持原來的alpha通道,然后結合Core Graphics。步驟如下:

1.創建一個上下文用以畫新的圖片
2.將新的tintColor設置為填充顏色
3.將原圖片畫在創建的上下文中,并用新的填充色著色(注意保持alpha通道)
4.從當前上下文中取得圖片并返回

代碼示例

UIImage+tint

#import "UIImage+tint.h"

@implementation UIImage (tint)

- (UIImage *)imageWithTintColor:(UIColor *)tintColor blendMode:(CGBlendMode)blendMode
{
    UIGraphicsBeginImageContextWithOptions(self.size, NO, 0.0f);
    [tintColor setFill];//填充顏色
    CGRect bounds = CGRectMake(0, 0, self.size.width, self.size.height);
    UIRectFill(bounds);
    //設置繪畫透明混合模式和透明度
    [self drawInRect:bounds blendMode:blendMode alpha:1.0f];
    if (blendMode == kCGBlendModeOverlay) {
        //保留透明度信息
        [self drawInRect:bounds blendMode:kCGBlendModeDestinationIn alpha:1.0f];
    }
    UIImage * tintedImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    
    return tintedImage;
}

@end

ViewController

#import "ViewController.h"
#import "UIImage+tint.h"

@interface ViewController ()

@property (nonatomic, strong) UIImageView * imageView;
@property (nonatomic, strong) UILabel * msgLabel;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    [self createUI];
}

- (void)createUI
{
    _imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image.png"]];
    _imageView.center = self.view.center;
    _imageView.userInteractionEnabled = YES;
    UITapGestureRecognizer * tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(changeBlendMode:)];
    tap.numberOfTouchesRequired = 1;
    tap.numberOfTapsRequired = 1;
    [_imageView addGestureRecognizer:tap];
    [self.view addSubview:_imageView];
    
    _msgLabel = [[UILabel alloc] initWithFrame:CGRectMake(20, CGRectGetMaxY(_imageView.frame) + 20, CGRectGetWidth(self.view.frame) - 40, 120)];
    _msgLabel.numberOfLines = 0;
    _msgLabel.text = @"在屏幕中繪圖時設置透明度;點擊圖片切換為混合模式繪制的圖片";
    _msgLabel.textAlignment = NSTextAlignmentCenter;
    _msgLabel.textColor = [UIColor blackColor];
    _msgLabel.layer.borderColor = [UIColor grayColor].CGColor;
    _msgLabel.layer.borderWidth = 1.0;
    [self.view addSubview:_msgLabel];
}

- (void)changeBlendMode:(UIGestureRecognizer*)gesture
{
    static CGBlendMode blendMode = kCGBlendModeNormal;
    NSString *strMsg;
    switch (blendMode) {
        case kCGBlendModeNormal:
            strMsg = @"kCGBlendModeNormal:正常;也是默認的模式。前景圖會覆蓋背景圖";
            break;
        case kCGBlendModeMultiply:
            strMsg = @"kCGBlendModeMultiply:正片疊底;混合了前景和背景的顏色,最終顏色比原來的都暗";
            break;
        case kCGBlendModeScreen:
            strMsg = @"kCGBlendModeScreen:濾色;把前景和背景圖的顏色先反過來,然后混合";
            break;
        case kCGBlendModeOverlay:
            strMsg = @"kCGBlendModeOverlay:覆蓋:能保留灰度信息,結合kCGBlendModeDestinationIn能保留透明度信息,在imageWithBlendMode方法中兩次執行drawInRect方法實現我們的基本需求";
            break;
        case kCGBlendModeDarken:
            strMsg = @"kCGBlendModeDarken:變暗";
            break;
        case kCGBlendModeLighten:
            strMsg = @"kCGBlendModeLighten:變亮";
            break;
        case kCGBlendModeColorDodge:
            strMsg = @"kCGBlendModeColorDodge:顏色變淡";
            break;
        case kCGBlendModeColorBurn:
            strMsg = @"kCGBlendModeColorBurn:顏色加深";
            break;
        case kCGBlendModeHardLight:
            strMsg = @"kCGBlendModeHardLight:強光";
            break;
        case kCGBlendModeSoftLight:
            strMsg = @"kCGBlendModeSoftLight:柔光";
            break;
        case kCGBlendModeDifference:
            strMsg = @"kCGBlendModeDifference:插值";
            break;
        case kCGBlendModeExclusion:
            strMsg = @"kCGBlendModeExclusion:排除";
            break;
        case kCGBlendModeHue:
            strMsg = @"kCGBlendModeHue:色調";
            break;
        case kCGBlendModeSaturation:
            strMsg = @"kCGBlendModeSaturation:飽和度";
            break;
        case kCGBlendModeColor:
            strMsg = @"kCGBlendModeColor:顏色";
            break;
        case kCGBlendModeLuminosity:
            strMsg = @"kCGBlendModeLuminosity:亮度";
            break;
            
            //Apple額外定義的枚舉
            //R: premultiplied result, 表示混合結果
            //S: Source, 表示源顏色(Sa對應透明度值: 0.0-1.0)
            //D: destination colors with alpha, 表示帶透明度的目標顏色(Da對應透明度值: 0.0-1.0)
        case kCGBlendModeClear:
            strMsg = @"kCGBlendModeClear:R = 0";
            break;
        case kCGBlendModeCopy:
            strMsg = @"kCGBlendModeCopy:R = S";
            break;
        case kCGBlendModeSourceIn:
            strMsg = @"kCGBlendModeSourceIn:R = S * Da";
            break;
        case kCGBlendModeSourceOut:
            strMsg = @"kCGBlendModeSourceOut:R = S * (1 - Da)";
            break;
        case kCGBlendModeSourceAtop:
            strMsg = @"kCGBlendModeSourceAtop:R = S * Da + D * (1 - Da)";
            break;
        case kCGBlendModeDestinationOver:
            strMsg = @"kCGBlendModeDestinationOver:R = S * (1 - Da) + D";
            break;
        case kCGBlendModeDestinationIn:
            strMsg = @"kCGBlendModeDestinationIn: R = D * Sa;保留透明度信息";
            break;
        case kCGBlendModeDestinationOut:
            strMsg = @"kCGBlendModeDestinationOut: R = D * (1 - Sa)";
            break;
        case kCGBlendModeDestinationAtop:
            strMsg = @"kCGBlendModeDestinationAtop: R = S * (1 - Da) + D * Sa";
            break;
        case kCGBlendModeXOR:
            strMsg = @"kCGBlendModeXOR: R = S * (1 - Da) + D * (1 - Sa)";
            break;
        case kCGBlendModePlusDarker:
            strMsg = @"KCGBlendModePlusDarker: R = MAX(0, (1 - D) + (1 - S))";
            break;
        case kCGBlendModePlusLighter:
            strMsg = @"kCGBlendModePlusLighter: R = MIN(1, S + D)(最后一種混合模式)";
            break;
        default:
            break;
    }
    _imageView.image = [[UIImage imageNamed:@"image.png"] imageWithTintColor:[UIColor orangeColor] blendMode:blendMode];
    _msgLabel.text = strMsg;
    
    blendMode ++;
    if (blendMode > kCGBlendModePlusLighter) {
        blendMode = kCGBlendModeNormal;
    }
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}


@end

注:用kCGBlendModeOverlay能保留灰度信息,用kCGBlendModeDestinationIn能保留透明度信息。
因為每次使用UIImage+tint的方法繪圖時,都使用了CG的繪制方法,這就意味著每次調用都會是用到CPU的Offscreen drawing,大量使用的話可能導致性能的問題。對于這里的UIImage+tint的實現,可以寫一套緩存的機制,來確保大量重復的元素只在load的時候blend一次,之后將其緩存在內存中以快速讀取。這是一個權衡的問題,在時間和空間中做出正確的平衡和選擇是程序設計的樂趣所在。

參考鏈接
iOS中使用blend改變圖片顏色

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容