用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改变图片颜色

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,904评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,581评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,527评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,463评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,546评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,572评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,582评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,330评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,776评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,087评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,257评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,923评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,571评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,192评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,436评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,145评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,127评论 2 352

推荐阅读更多精彩内容