设置聊天泡泡颜色以及添加描边的方式
来源:互联网 发布:fc2最新域名2016 编辑:程序博客网 时间:2024/05/02 04:34
一种简易的聊天泡泡设置颜色以及添加描边的方式
遇到的问题
比如我现在有以下这个图片:
然后我想做到以下这种效果:
第一种方法
应该是最简单的一种方法,直接提供带描边的图片,在这里例子里就是提供一张篮框绿底的图片以及一张红框黄底的图片。
但是问题来了,如果需要提供多种配色方案怎么办?比如白天模式下是一种配色方案,夜晚模式下是另一种配色方案,或者哪天想把当前配色方案修改掉,这会导致程序里需要存储大量的图片。目前iOS每种图片都需要提供三种分辨率的图片,多一张图片就意味着其实要多三张图片。
还有一个问题就是,泡泡有两种方向,难道我们也需要提供两种图片吗?再结合第一个问题,好像我们需要提供很多图片。
第二种方法
这就是这篇文章所要阐述的方法。该方法就是由程序自动给图片上色。
让我们定义如下这个方法:
- (UIImage *)imageMaskedWithColor:(UIColor *)color {UIImage *bubbleImage = [UIImage imageNamed:@"bubble"];CGRect imageRect = CGRectMake(0.0f, 0.0f, bubbleImage.size.width, bubbleImage.size.height);UIImage *newImage = nil; UIGraphicsBeginImageContextWithOptions(imageRect.size, NO, bubbleImage.scale); { CGContextRef context = UIGraphicsGetCurrentContext(); // 根据文档,使用这种方式展示图片会是上下颠倒的 // 因此先要将图片向下反转 CGContextScaleCTM(context, 1.0f, -1.0f); // 反转之后再把反转后的图片移回到原来位置 CGContextTranslateCTM(context, 0.0f, -(imageRect.size.height)); CGContextClipToMask(context, imageRect, bubbleImage.CGImage); // 填充所期望的颜色 CGContextSetFillColorWithColor(context, color.CGColor); CGContextFillRect(context, imageRect); // 生成新的图片返回 newImage = UIGraphicsGetImageFromCurrentImageContext(); } UIGraphicsEndImageContext(); return newImage;}
该函数调用方式如下:
self.imageview.image = [self imageMaskedWithColor:[UIColor yellowColor]];
展示效果如下:
那接下来我们再来处理描边的问题。这里我也研究了很久,如果想纯粹用程序自动来做一个通用的非规则图片描边,目前看来好像比较困难(如果大家有比较好的办法,请不吝告知)。
因此我选择了相对简单的办法,就是直接用泡泡的图片把中间扣掉,然后生成一张描边图片,如以下图片:
然后我们直接使用上面的技术,分别为实心的泡泡图片和描边的泡泡图片填充想要的颜色,然后再把两种图片画在一起,这样一张带描边的实心泡泡图片就出来了。
让我们定义如下这个新的方法:
- (UIImage *)imageMaskedWithColor:(UIColor *)color strokeColor:(UIColor *)strokeColor { UIImage *bubbleImage = [UIImage imageNamed:@"bubble"]; UIImage *strokeImage = [UIImage imageNamed:@"bubble_stroke"]; CGRect imageRect = CGRectMake(0.0f, 0.0f, bubbleImage.size.width, bubbleImage.size.height); UIImage *newImage = nil; UIGraphicsBeginImageContextWithOptions(imageRect.size, NO, bubbleImage.scale); { CGContextRef context = UIGraphicsGetCurrentContext(); CGContextScaleCTM(context, 1.0f, -1.0f); CGContextTranslateCTM(context, 0.0f, -(imageRect.size.height)); // 设置底色 CGContextClipToMask(context, imageRect, bubbleImage.CGImage); CGContextSetFillColorWithColor(context, color.CGColor); CGContextFillRect(context, imageRect); // 设置描边色 CGContextClipToMask(context, imageRect, strokeImage.CGImage); CGContextSetFillColorWithColor(context, strokeColor.CGColor); CGContextFillRect(context, imageRect); newImage = UIGraphicsGetImageFromCurrentImageContext(); } UIGraphicsEndImageContext(); return newImage;}
该函数调用方式如下:
self.imageview.image = [self strokeImageWithColor:[UIColor yellowColor] strokeColor:[UIColor redColor]];
展示效果如下:
那我们还就剩下最后一个问题了,反向的泡泡怎么办?
我们在定义一个方法,用来使得泡泡图片转向:
- (UIImage *)horizontallyFlippedImageFromImage:(UIImage *)image{ return [UIImage imageWithCGImage:image.CGImage scale:image.scale orientation:UIImageOrientationUpMirrored];}
和之前定义的方法结合起来使用:
UIImage *newImage = [self strokeImageWithColor:[UIColor greenColor] strokeColor:[UIColor blueColor]];self.imageview.image = [self horizontallyFlippedImageFromImage:newImage];
展示效果如下:
总结
到这里这次要介绍的内容都已经介绍完了,这篇博客所介绍方法的最大好处就是可以非常容易适应各种配色方案,同时提供了一种比较实用的描边方式,也解决图片过多导致程序无谓膨胀的问题。
当然也有缺点,比如描边的宽度无法自定义,除非重新截图。另外如果泡泡形状发生改变,也需要重新截图。
其实我这里使用的一些方法基本都来自于JSQMessagesViewController这个第三方库。
- 设置聊天泡泡颜色以及添加描边的方式
- Android泡泡聊天界面的实现
- iPhone开发:类似iChat的聊天泡泡
- Android泡泡聊天界面的实现
- UITabBar背景、icon图标颜色、被选中背景设置以及隐藏UITabBar的方式
- QQ聊天对话框内 聊天者昵称,发送者昵称 的字体颜色怎么设置
- IOS设置NavigationBar的颜色以及透明度
- latex表格线的颜色设置(边框添加颜色)
- ios颜色设置的三种方式
- view 设置背景颜色的集中方式
- echart如何设置饼图的颜色以及柱状图颜色
- 关于android 聊天页面 类似泡泡包裹聊天内容的实现
- 聊天泡泡需要切割图片
- POI操作Excel表格系列3 --- 背景颜色、边框等属性的读取和设置以及数据有效性的添加
- Android 设置颜色方式
- 【iOS开发-31】UITabBar背景、icon图标颜色、被选中背景设置以及隐藏UITabBar的两种方式
- iOS开发UITabBar背景、icon图标颜色、被选中背景设置以及隐藏UITabBar的两种方式
- Android Studio的快捷键以及设置方式
- visual studio 2008 express editions安装
- 通过shell脚本操作mysql数据库
- c# 配置文件 从外部路径获取程序集
- Java实现二叉搜索树
- 为程序员准备的7个网站
- 设置聊天泡泡颜色以及添加描边的方式
- MCAPI学习笔记<一>——简介与Linux下示例程序测试
- Coursera Algorithm, Part2 Week2: Minimum Spanning Trees & Shortest Paths
- oracle存储过程简单实例 变量赋值 游标遍历
- 2014.11.22 差分约束学习笔记
- HEVC标准概览(翻译)
- datagrid改变url参数值
- C++标准库---智能指针auto_ptr初探
- OpenGL简单绘制游戏角色阴影