iOS 图像的渲染模式
最近做项目需要减小图片资源, 原本通过不同的背景图片进行界面主题等内容切换,现在需要直接通过渲染改变背景图片的颜色. 这里就涉及到图片的渲染颜色, 这里一般而言有两种方式.
1. 直接使用tintColor解决
iOS7的时候,UIView有一个新增加属性叫做tintColor, 这个属性是一个非默认的着色颜色值, 会影响以这个View为根的所有视图层次结构的颜色. 我们常见的app图标, navigationBar, Tabbar等控件,都有默认的tintColor.具体的相关内容请参考 详解UIView的TintColor属性.
其中比较特殊的是UIImageView中image的渲染颜色, 对于UIImage,我们需要设置image的渲染模式成AlwaysTemplate, 这样会将该图的每一个像素如果其alpha通道为1, 那么将它的颜色设置成tintColor, 如果alpha通道不为1(半透明或者透明),那么该像素会渲染成透明, 这样就满足了我们的需求.
// 加载图片
var image = UIImage(named: "text.jpg")
// 设置渲染模式
image = image?.imageWithRenderingMode(.AlwaysTemplate)
self.imageView?.image = image
// 设置需要渲染成的tintColor, 那么UIImage会根据每个像素是否透明进行渲染
self.imageView.tintColor = UIColor.red
当然UIImage也有其他的渲染模式, 默认请求下UIImage渲染成图片的原始颜色
2. 使用CoreGraphic重绘
当前tintColor方法里面,只能改变图片的渲染颜色, 如果对图片还有其他的处理要求, 那么就只能通过CoreGraphic来对图片进行重绘了.
在图片的拉伸，渲染和swift实现一个与智能机器人聊天的app(二) 文章里面提到的需求类似, 具体的绘制方法如下:
- (UIImage *)coloredImage:(UIImage *)image red:(CGFloat)red green:(CGFloat)green blue:(CGFloat)blue alpa:(CGFloat)alpa {
// 获取图片大小
CGRect rect = CGRectMake(0, 0, image.size.width, image.size.height);
// 创建位图绘图上下文
UIGraphicsBeginImageContextWithOptions(image.size, false, image.scale);
// 获取位图绘图上下文并开始渲染操作
CGContextRef context = UIGraphicsGetCurrentContext();
[image drawInRect:rect];
// 全局渲染成需要的颜色(会和图片进行混合, 只要设置成混合模式是kCGBlendModeSourceAtop, 就能得到图片轮廓但是图颜色是我们需要的颜色)
CGContextSetRGBFillColor(context, red, green, blue, alpa);
// 纯色图片渲染的关键设置
CGContextSetBlendMode(context, kCGBlendModeSourceAtop);
// 全局渲染颜色
CGContextFillRect(context, rect);
// 获取到绘图结果，结束位图绘图上下文并返回绘图结果
UIImage *resulet = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return resulet;
}
上面的方法就是对传入的图片进行染色处理，相关的解释在代码里有, 但是这样处理只能将图片处理成纯色图片, 如果原始图片是有一定透明度变化的的gradient图是无法满足需求的, 但是第一种使用tintColor就能满足需求
其中还有一部分使用的是图片拉伸相关内容, 这里也贴出来:
- (void)viewDidAppear:(BOOL)animated {
NSString *imageName = @"MessageBubble";
UIImage *image = [UIImage imageNamed:imageName];
// 原始的图片
UIImageView *originView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 200, 48, 35)];
originView.image = image;
// 尖头向右的图片
UIImage *rightImage = [self coloredImage:image red:51/255.0 green:123/255.0 blue:214/255.0 alpa:1];
// 设置可拉伸区域
rightImage = [rightImage resizableImageWithCapInsets:UIEdgeInsetsMake(17, 21, 17.5, 26.5)];
UIImageView *rightImageView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 300, 320, 100)];
rightImageView.image = rightImage;
// 尖头向左的图片
UIImage *leftImage = [UIImage imageWithCGImage:image.CGImage scale:2.0 orientation:UIImageOrientationUpMirrored];
leftImage = [self coloredImage:leftImage red:255/255.0 green:0.0 blue:0.0 alpa:1];
leftImage = [leftImage resizableImageWithCapInsets:UIEdgeInsetsMake(17, 26.5, 17.5, 21)];
UIImageView *leftImageView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 450, 320, 100)];
leftImageView.image = leftImage;
// 将他们显示出来
[self.view addSubview:originView];
[self.view addSubview:rightImageView];
[self.view addSubview:leftImageView];
}
