在 RichEdit 中加入表情圖片的 CFaceEdit 類別

本文根據 VC 知識庫《線上雜誌》第 30 期文章「類似 MSN 訊息發送框的製作」，介紹一個可在 RichEdit 中加入表情圖片的類別 CFaceEdit。以下是使用此類別的程式截圖：

圖一 CFaceEdit 類別使用效果

使用方法

先看使用範例：

// 將對話方塊類別成員變數由 CRichEditCtrl 改為 CFaceEdit
CFaceEdit m_FaceEdit;
// 自訂一組表情符號
CString pSymbol[] = {":)", ":(", ";)", ":0", ";-)"};
// 表情對應的圖片資源 ID
UINT nIDBmp[] = { IDB_BITMAP1, IDB_BITMAP2, IDB_BITMAP3, IDB_BITMAP4, IDB_BITMAP5 };
m_FaceEdit.Init(5, pSymbol, nIDBmp);
......
m_FaceEdit.SetText("Visual Studio 包含許多範例:)，用以說明開發人員為.NET 平台;)建立的應用程式:-) 。");

也可用點陣圖檔案形式匯入：

CString sBmpFile[] = {"res\\kid.bmp", "res\\sad.bmp", "res\\showoff.bmp", "res\\quip.bmp", "res\\maze.bmp"};
m_FaceEdit.Init(5, pSymbol, sBmpFile);
...
m_FaceEdit.SetText("Visual Studio 包含許多範例:)，用以說明開發人員為.NET 平台;)建立的應用程式:-) 。");

核心原理

插入圖片主要由原文提供的 InsertBitmap() 函數實現，可透過指定圖片資源 ID 或圖片檔案路徑插入圖片。

如何將文字中的字元表情（如 :)、;-) 等）轉換成圖片？例如字串：

"Visual Studio 包含許多範例:)，用以說明開發人員為.NET 平台;)建立的應用程式:-)。"

轉換後變成：

"Visual Studio 包含許多範例[圖片] ，用以說明開發人員為.NET 平台[圖片] 建立的應用程式[圖片]。"

實現細節

發現只要先選取 RichEdit 中某段文字內容，再呼叫 InsertBitmap()，即可將選取內容替換為圖片。利用 CRichEditCtrl::SetSel() 實現，但需先儲存各表情字元的位置、類型、長度等資訊。以下是轉換文字的核心函數 SetTextWithFace：

void CFaceEdit::SetTextWithFace(CString str)
{
    // 步驟 1：在 str 中查找表情字元
    // 步驟 2：使用泛型演算法 sort 依出現順序排序
    // 步驟 3：調整各表情字元位置
    // 步驟 4：呼叫 InsertBitmap 插入各處理完成的節點
    // 詳細程式碼請參考本文附帶原始碼
}

注意事項：本類別有兩個版本，一個針對 RichEdit 1.0（漢字視為兩個位元組），另一個針對 RichEdit 2.0（漢字視為一個位元組）。請讀者依環境選擇使用。

本文附帶完整原始碼。