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];
}