摘要：作為windows工程師，UI開發(fā)是無可避免的工作，無論你是寫一個供銷存系統(tǒng)，還是一款聊天IM，UI開發(fā)總是會占據(jù)你大量的時間。接下來展示的將是一種windows下的非常輕松快捷的UI開發(fā)解決方案，實現(xiàn)大家實際工作中經(jīng)常需要實現(xiàn)的UI特效，力爭將你從繁復(fù)的UI工作中解放出來，將注意力投入到更有挑戰(zhàn)性的工作中去。
關(guān)鍵字:UI引擎 異形窗體 動畫按鈕 gdi引擎 自繪控件 輕便
作為windows工程師，UI開發(fā)是無可避免的工作，無論你是寫一個供銷存系統(tǒng)，還是一款聊天IM，UI開發(fā)總是會占據(jù)你大量的時間。前段時間在公司開發(fā)項目中，帶著些許私心實現(xiàn)了一個構(gòu)想了較長時間的UI引擎，自已在使用過程中感覺極大的加快了UI開發(fā)的效率，希望與大家分享，并用大家的建議來不斷完善。
接下來將以幾個在實際工作中常見的UI開發(fā)問題為例，介紹實現(xiàn)方法及效果，相信這幾個問題能引起客戶端UI開發(fā)同仁的共鳴。
1.多格式圖片支持
2.文字和超鏈接
3.自繪按鈕
4.臟處理與區(qū)域刷新
5.異形窗體(包括像素級透明異形窗體)
1.多格式圖片支持
UI開發(fā)離不開圖片，windows的api提供了一些加載圖片的方法，如常用的LoadImage，使用很簡單。但其功能也跟其用法一樣簡單，只能加載bmp，ico等幾種格式。眾所周知，bmp是不帶alpha通道的，一旦需要實現(xiàn)陰影等alpha漸變的效果，系統(tǒng)提供的api就有些捉襟見肘了。當(dāng)然很多人會想到大名鼎鼎的CxImage，這也是個不錯的選擇。我在內(nèi)部也是封裝了CxImage幫忙加載和保存多格式的圖片，但加載之后的圖像數(shù)據(jù)處理都是自處理的了，因為CxImage在處理RGB轉(zhuǎn)hsl，旋轉(zhuǎn)等特效時大量使用了浮點運算，效率不能使人十分滿意。我把所有的浮點運算都轉(zhuǎn)為整形運算，并大量使用了SSE2指令進行優(yōu)化，實測證明在旋轉(zhuǎn)，HSL轉(zhuǎn)換，灰化等特效時，效率可以提高4-10倍(CPU為T2330 1.6GHz)。圖片加載支持三種方式：從文件；從資源；從dc。需要說明的是從資源加載時請將資源類型命名為IMAGE。
演示代碼如下：
//GetSonicUI是引擎導(dǎo)出的唯一函數(shù)，是類廠和引擎總控，負責(zé)創(chuàng)建對象和銷毀對象等。ISonicImage * pImg = GetSonicUI()->CreateImage();pImg->Load("C:\\1.png");pImg->Draw(hdc, 10, 10);GetSonicUI()->DestroyObject(pImg);OK，一個帶透明通道的png圖片繪制就完成了，是不是輕松愜意。
2.文字和超鏈接
UI開發(fā)過程中經(jīng)常最麻煩的是繪制文字，需要你不停的初始化字體，設(shè)定字體屬性，如果產(chǎn)品人員要求文字按一定的格式排版或輸出彩色文字，那簡直就是我們的噩夢了。而在自己的界面加入超鏈接，網(wǎng)上已經(jīng)有不少演示代碼了，但我相信ISonicString是一個更簡單的實現(xiàn)方案。ISonicString是一個可以進行消息交互的UI組件對象。只需要像html語言一樣加入一些類似的控制符，你就可以隨心所欲的控制字體的大小顏色，超鏈接等屬性，非常方便。
ISonicString * pStr = GetSonicUI()->CreateString();pStr->Format("/c=%x, a='http://hi.csdn.net/zskof', font, font_height=16/點我打開鏈接", RGB(0, 0, 255));LRESULT CALLBACK WndProc(HWND hWnd, UINT message, WPARAM wParam, LPARAM lParam){PAINTSTRUCT ps;HDC hdc;switch (message){case WM_PAINT:{hdc = BeginPaint(hWnd, &ps);pStr->TextOut(hdc, 0, 0, hWnd);EndPaint(hWnd, &ps);}break;}...}如何，只需要創(chuàng)建，然后像CString的Format一樣格式化一個字符串，在WM_PAINT響應(yīng)中輸出即可，只需要三步，你就得到了一行藍色的功能完整的超鏈接，是不是很方便。通過控制字符，你還可以設(shè)定下劃線的樣式，鼠標形狀，響應(yīng)鼠標時變色等細節(jié)，具體參看ISonicUI.h中的注釋即可。
ISonicString也可以將文字和圖片混合輸出，或使圖片帶有超鏈接屬性，需要用'p'控制符指定一個ISonicImage的id：
ISonicImage * pImg = GetSonicUI()->CreateImage();pImg->Load("C:\\1.png");ISonicString * pStr = GetSonicUI()->CreateString();pStr->Format("/c=%x/你好嗎，朋友/p=%d, a='http://hi.csdn.net/zskof'/", RGB(0, 0, 255), pImg->GetObjectId());這樣就可以像寫網(wǎng)頁一樣在你的界面上進行文字和圖片的混合排版輸出了。
3.自繪按鈕
自繪按鈕恐怕是UI編寫中最常見也是重復(fù)度最高的工作，通常是繼承自CButton然后ownerdraw出來。我的實現(xiàn)是不使用窗體的純自繪。其實超鏈接也可以理解為按鈕的一種，所以我自繪按鈕的使用方式跟超鏈接也大同小異。
void WINAPI OnMove(ISonicString * pStr, LPVOID){g_pEffect->MoveGently(0, 0);}// 加載三態(tài)圖片資源ISonicImage * pImgNormal = GetSonicUI()->CreateImage();pImgNormal->Load(BMP_NORMAL);pImgNormal->SetColorKey(RGB(255, 0, 255));ISonicImage * pImgHover = GetSonicUI()->CreateImage();pImgHover->Load(BMP_HOVER);pImgHover->SetColorKey(RGB(255, 0, 255));ISonicImage * pImgClick = GetSonicUI()->CreateImage();pImgClick->Load(BMP_CLICK);pImgClick->SetColorKey(RGB(255, 0, 255));// ISonicString * g_pTest[10]g_pTest[10]->Format("/a, p=%d, ph=%d, pc=%d, linkt='點我移動'/", pImgNormal->GetObjectId(), pImgHover->GetObjectId(),pImgClick->GetObjectId());g_pTest[10]->Delegate(DELEGATE_EVENT_CLICK, NULL, NULL, OnMove);同樣的，格式化好后的ISonicString在OnPaint的時候輸出即可，這樣你就擁有一個具有三態(tài)變換的漂亮按鈕，其中'p'關(guān)鍵字代表normal態(tài)，'ph'代表hover態(tài)，'pc'代表click態(tài)。如果從美工那里得到的源圖是一張圖片三態(tài)平鋪的也不要緊，只需要將ph,pc都指向同一張img即可，內(nèi)部會自動進行源區(qū)域裁剪。另外用過QQ2009的人可能會發(fā)現(xiàn)，2009的很多按鈕三態(tài)變換是漸變的，體驗很好，ISonicString一樣可以做，只需要格式化時稍稍修改一下，
g_pTest[10]->Format("/a, p=%d, ph=%d, pc=%d, linkt='點我移動', animation=40/", pImgNormal->GetObjectId(),pImgHover->GetObjectId(), pImgClick->GetObjectId());增加一個'animation=40'的控制符(40是漸變速度)，就可以得到一個QQ2009一樣漂亮的三態(tài)漸變按鈕了。按鈕的點擊響應(yīng)是用“委托”的方式，你需要向按鈕委托一個形如void WINAPI Func(ISonicBase *, LPVOID)的全局函數(shù)或類的成員函數(shù)，以供引擎在按鈕被點擊時回調(diào)。
圖一:自繪按鈕
4.臟處理與區(qū)域刷新
我們都知道gdi的繪制效率是不高的，無法像DDraw直接操作顯存buffer那么爽快，所以InvalidateRect才提供了局部刷新的參數(shù)，而局部刷新也是gdi下進行優(yōu)化的關(guān)鍵所在?？稍趯嶋H操作中，我不?？匆娪腥俗鲞@么精細的切割，都是一個InvalidateRect(hwnd, NULL, TRUE)了事。這也難怪，我隨便TextOut一個字符串，我如果要去關(guān)心它占據(jù)了多少區(qū)域，區(qū)域之間的交叉裁剪等等，未免就太繁瑣了。所以我的引擎提供了一個ISonicPaint對象，意如其名，就是一塊畫布。創(chuàng)建這塊畫布時，你可以指定其擁有自己的memDC，而出于節(jié)省gdi對象的考慮，你也可以指定其是一塊無memDC的畫布，如何取舍根據(jù)實際情況。
創(chuàng)建一個畫布
ISonicPaint * pPaint = GetSonicUI()->CreatePaint();pPaint->Create(FALSE/*是否需要memDC*/, m_rtString.Width()/*寬*/, m_rtString.Height()/*高*/);
畫布創(chuàng)建之后，只需要在WM_PAINT中調(diào)用畫面的Draw方法即可，很簡單。如果你想在這個畫布上做畫，就需要像自繪按鈕一樣，向畫布委托一個你自己的繪制過程，以便在每次重繪時調(diào)用。示例代碼如下:
class CTest{public:void RenderImage(ISonicPaint * pPaint, LPVOID);};void CTest::RenderImage(ISonicPaint * pPaint, LPVOID){if(pPaint->GetCurrentPaint() == NULL){return;}HDC hdc = pPaint->GetCurrentPaint()->hdc;int x = pPaint->GetCurrentPaint()->x;int y = pPaint->GetCurrentPaint()->y;// draw here...}CTest test;pPaint->Delegate(DELEGATE_EVENT_PAINT, NULL, &test, CSonicString::RenderImage);如此每次只需要調(diào)用pPaint->Redraw()便會進行畫布的區(qū)域重繪。這里需要說明的是，ISonicString，包括接下來要介紹的幾個對象都是基于畫布的，也就是說引擎的所有對象都是具有臟處理檢查和區(qū)域自繪制優(yōu)化的，可以極大的提高運行效率。
除了委托繪制以外，你還可以向畫布上直接添加UI對象，畫布支持的對象有：ISonicImage, ISonicString, ISonicPaint
5.異形窗體(包括像素級透明異形窗體)
異形窗體也是UI特效中經(jīng)常需要使用的技術(shù)，常見的有兩種實現(xiàn)方法。一種方法是根據(jù)圖片裁剪出一個rgn，然后調(diào)用SetWindowRgn，另一個方法是將窗體設(shè)為WS_EX_LAYERED屬性，調(diào)用SetLayeredWindowAttributes或UpdateLayeredWindow實現(xiàn)透明裁剪。前一種方法效率較低，而且拖動窗體時會出現(xiàn)難看的殘影，后一種方法表現(xiàn)效果更好，拖動時可以避免殘影出現(xiàn)，但不能作用于WS_CHILD屬性的窗體。二者各有優(yōu)劣。SonicUI同時提供了這兩種實現(xiàn)方法，可以根據(jù)情況選擇。
方法1:
...// ISonicImage * pImgSetWindowRgn(hWnd, pImg->CreateRgn());
方法2:
...// ISonicImage * pImg// ISonicWndEffect * pEffectpEffect->Attach(hWnd, TRUE); // 使用像素級alpha模式attachpEffect->SetShapeByImage(pImg);
圖二:異形窗體效果圖
值得一提的是，如果使用UpdateLayeredWindow做窗體的像素級alpha特效，文字輸出就成為了一個麻煩，因為gdi的文字輸出函數(shù)是不帶alpha通道的，直接TextOut上去無法正常表現(xiàn)。不過ISonicString可以幫你解決這一難題，我在內(nèi)部已經(jīng)為文字增加了alpha通道，可以很好的適應(yīng)背景。
結(jié)束語：引擎中還有滾動字幕組件，動畫組件等常用的UI表現(xiàn)組件，限于篇幅就不一一介紹了，請大家參照ISonicUI.h中的說明自己試用。設(shè)計這個引擎時的基本原則就是輕便，高效，如果大家在使用過程中有什么好的建議或需求，也敬請聯(lián)系我，幫助我完善這個引擎。因為引擎完整實現(xiàn)代碼有數(shù)萬行，而且現(xiàn)在還屬于公司財產(chǎn)，就暫不公布完整源碼了，但對某些技術(shù)實現(xiàn)細節(jié)有興趣的朋友，可以與我聯(lián)系，共同學(xué)習(xí)進步。
