C#實現聊天消息渲染與圖文混排詳解

更新時間：2023年02月06日 15:48:44 作者：zhuweisky

在實現聊天軟件時，渲染文字表情圖文混排是一項非常繁瑣的工作，再加上還要支持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 接口的定義具體如下所示：

/// <summary>
        /// 渲染名片 
        /// </summary>
        /// <param name="msgID">聊天記錄ID</param>
        /// <param name="userID">發(fā)送者</param>
        /// <param name="cardUserID">名片上的個人ID</param>
        /// <param name="index">插入聊天記錄的位置，默認是放到最后面</param>
        void AddChatItemCard(string msgID ,string userID, string cardUserID ,int? index = null);

        /// <summary>
        /// 渲染文件 
        /// </summary> 
        /// <param name="fileName">文件名稱</param>
        /// <param name="fileSize">文件大小</param>
        /// <param name="state">文件狀態(tài)</param> 
        void AddChatItemFile(string msgID, string userID, string fileName, ulong fileSize, FileTransState state, int? index = null);

        /// <summary>
        /// 渲染圖片
        /// </summary> 
        /// <param name="image">圖像</param>
        /// <param name="imgSize">圖像大小</param>
        /// <param name="observerable">默認傳null</param> 
        void AddChatItemImage(string msgID, string userID, object image, Size imgSize ,IProgressObserverable observerable = null, int? index = null);

        /// <summary>
        /// 渲染文本表情
        /// </summary> 
        /// <param name="text">內容，在渲染文本的內容中用 [000]來代表第一個表情，[001]即是二個表情，以此類推</param>
        /// <param name="referenced">引用內容可以是文本、圖片、文件或名片</param>
        /// <param name="textColor">文字顏色</param> 
        void AddChatItemText(string msgID, string userID, string text, ReferencedChatMessage referenced = null, Color? textColor = null, int? index = null);

        /// <summary>
        /// 渲染悄悄話，默認顯示內容—>> 悄悄話
        /// </summary> 
        void AddChatItemSnap(string msgID, string userID, int? index = null);

        /// <summary>
        /// 渲染語音消息
        /// </summary> 
        /// <param name="audioMessageSecs">語音時長</param>
        /// <param name="audioMessage">語音短信</param> 
        void AddChatItemAudio(string msgID, string userID, int audioMessageSecs, object audioMessage, int? index = null);

        /// <summary>
        /// 渲染多媒體通話類型
        /// </summary> 
        /// <param name="duration">通話時長</param>
        /// <param name="isAudioCommunicate">通話類型(語音/視頻)</param> 
        void AddChatItemMedia(string msgID, string userID, string duration, bool isAudioCommunicate, int? index = null); 

        /// <summary>
        /// 渲染系統(tǒng)消息
        /// </summary>
        /// <param name="msg">系統(tǒng)消息內容</param> 
        void AddChatItemSystemMessage(string msg, int? index = null);

        /// <summary>
        /// 渲染消息的發(fā)送時間
        /// </summary>
        /// <param name="dt">發(fā)送時間</param> 
        void AddChatItemTime(DateTime dt, int? index = null);   

        /// <summary>
        /// 自己撤回消息 
        /// </summary> 
        void RecallChatMessage(string msgID);

        /// <summary>
        /// 其他用戶撤回消息 
        /// </summary> 
        /// <param name="operatorName">操作者</param>
        void RecallChatMessage(string msgID ,string operatorName);

        /// <summary>
        /// 刪除對應的記錄
        /// </summary> 
        void RemoveChatMessage(string msgID);

三. 創(chuàng)建 IChatRender 實例

可以通過調用ESFramework.Extensions.ChatRendering.ChatRenderFactory 的靜態(tài)方法 CreateChatRender 創(chuàng)建一個 IChatRender 實例。

/// <param name="provider">提供必要的信息給聊天渲染器</param>
        /// <param name="ctrl">要在其表面渲染的UI控件</param>
        /// <param name="myID">自己的ID</param>
        /// <param name="destID">對方ID、或群ID</param>
        /// <param name="isGroup">群聊/單聊</param>
        /// <returns></returns>
        public static IChatRender CreateChatRender(IRenderDataProvider provider, IChatControl ctrl, string myID, string destID, bool isGroup);

第一個參數 IRenderDataProvider 用于在 IChatRender 渲染時，能從該接口獲取必要的信息（如用戶的頭像、名稱、表情圖片等）。

第二個參數則是要在其表面進行渲染的UI控件。