现在存在的问题
如果一个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改变图片颜色