在实现聊天软件时,渲染文字表情图文混排是一项非常繁琐的工作,再加上还要支持GIF动图、引用消息、撤回消息、名片等不同样式的消息渲染时,就更加麻烦了。
好在我们可以使用 ESFramework 提供的 IChatRender 组件,使用它我们就能轻松实现类似于微信聊天消息的渲染效果。IChatRender 支持 Windows、Linux(包括国产OS)。在Windows平台上提供了基于 WinForm 和基于 WPF 的实现,在Linux上则是基于.NET Core 实现的。
废话不多说,先上张渲染Demo的效果图(该Demo源码可于文末下载):
效果还不错吧!下面我们就简单介绍下如何使用 IChatRender 实现上图所展示的渲染效果,大家下载源码对照着看,会更容易理解。
一.支持的聊天消息类型
IChatRender 支持渲染的聊天消息类型包括:
(1)文本表情混排。
(2)图片,GIF 动图。
(3)文件传输进度及控制。
(4)个人名片、群名片。
(5)引用消息。
(6)语音消息。
(7)语音通话。
(8)视频通话。
(9)撤回消息、删除消息。
二.IChatRender 接口定义
IChatRender 接口的定义具体如下所示:
////// 渲染名片 /// /// 聊天记录ID /// 发送者 /// 名片上的个人ID /// 插入聊天记录的位置,默认是放到最后面 void AddChatItemCard(string msgID ,string userID, string cardUserID ,int? index = null); ////// 渲染文件 /// /// 文件名称 /// 文件大小 /// 文件状态 void AddChatItemFile(string msgID, string userID, string fileName, ulong fileSize, FileTransState state, int? index = null); ////// 渲染图片 /// /// 图像 /// 图像大小 /// 默认传null void AddChatItemImage(string msgID, string userID, object image, Size imgSize ,IProgressObserverable observerable = null, int? index = null); ////// 渲染文本表情 /// /// 内容,在渲染文本的内容中用 [000]来代表第一个表情,[001]即是二个表情,以此类推 /// 引用内容可以是文本、图片、文件或名片 /// 文字颜色 void AddChatItemText(string msgID, string userID, string text, ReferencedChatMessage referenced = null, Color? textColor = null, int? index = null); ////// 渲染悄悄话,默认显示内容—>> 悄悄话 /// void AddChatItemSnap(string msgID, string userID, int? index = null); ////// 渲染语音消息 /// /// 语音时长 /// 语音短信 void AddChatItemAudio(string msgID, string userID, int audioMessageSecs, object audioMessage, int? index = null); ////// 渲染多媒体通话类型 /// /// 通话时长 /// 通话类型(语音/视频) void AddChatItemMedia(string msgID, string userID, string duration, bool isAudioCommunicate, int? index = null); ////// 渲染系统消息 /// /// 系统消息内容 void AddChatItemSystemMessage(string msg, int? index = null); ////// 渲染消息的发送时间 /// /// 发送时间 void AddChatItemTime(DateTime dt, int? index = null); ////// 自己撤回消息 /// void RecallChatMessage(string msgID); ////// 其他用户撤回消息 /// /// 操作者 void RecallChatMessage(string msgID ,string operatorName); ////// 删除对应的记录 /// void RemoveChatMessage(string msgID);
三. 创建 IChatRender 实例
可以通过调用ESFramework.Extensions.ChatRendering.ChatRenderFactory 的静态方法 CreateChatRender 创建一个 IChatRender 实例。
/// 提供必要的信息给聊天渲染器 /// 要在其表面渲染的UI控件 /// 自己的ID /// 对方ID、或群ID /// 群聊/单聊 ///public static IChatRender CreateChatRender(IRenderDataProvider provider, IChatControl ctrl, string myID, string destID, bool isGroup);
第一个参数 IRenderDataProvider 用于在 IChatRender 渲染时,能从该接口获取必要的信息(如用户的头像、名称、表情图片等)。
第二个参数 则是要在其表面进行渲染的UI控件。
四. Demo 源码下载
ChatRenderDemo 源码链接: Windows 端 + Linux 端 源码 提取码:6daw
源码解决方案中包括三个项目:
(1)ChatRenderDemo.WPF: 该Demo的Windows端(基于WPF)。
(2)ChatRenderDemo.WinForm: 该Demo的Windows端(基于WinForm)。
(3)ChatRenderDemo.Linux: 该Demo的Linux客户端(基于.NetCore),支持在统信UOS、银河麒麟等国产OS上运行。
注:Linux 端内置的是x86/x64非托管so库,若需要其它架构的so,可以评论区留下email,到时我会发给大家。
以上就是C#实现聊天消息渲染与图文混排详解的详细内容,更多关于C#聊天消息渲染图文混排的资料请关注脚本之家其它相关文章!