用C++品嘗Vista美味：界面的毛玻璃效果

2019-11-17 04:59:43

字體：大中小

供稿：網(wǎng)友

簡(jiǎn)介

　　本文將演示在基于Windows Vista的普通Windows應(yīng)用程序及對(duì)話框程序中，如何利用C++來(lái)生成Aero毛玻璃效果，此處使用的是Beta 2版本的Vista及Windows SDK，也許在后續(xù)的版本中，一些API在細(xì)節(jié)上會(huì)有所變化。另外，文中沒(méi)有使用MFC，全部例子用WTL 7.5生成，其可在http://wtl.sourceforge.net/下載得到，雖然此處使用的是Visual C++ 2003，但Visual C++ 2005也類似。

　　Aero主題及毛玻璃效果，是隨同Vista"桌面窗口治理（DWM）"而來(lái)的新特性，也是微軟市場(chǎng)推廣的一個(gè)重心，在應(yīng)用程序中集成毛玻璃效果，當(dāng)打開(kāi)Aero主題時(shí)，程序看上去會(huì)顯得非常與眾不同--很酷，對(duì)吧。

　　Aero主題中的毛玻璃效果

　　當(dāng)以Aero為主題時(shí)，Vista會(huì)根據(jù)計(jì)算機(jī)顯卡進(jìn)行判定是否開(kāi)啟毛玻璃效果，此時(shí)桌面由DWM進(jìn)行繪制，而DWM使用一個(gè)composition進(jìn)程來(lái)渲染桌面，其會(huì)在頂層窗口的非客戶區(qū)自動(dòng)使用Aero主題元素（有點(diǎn)類似于Windows xp）。話又說(shuō)回來(lái)，也不是總會(huì)添加這些毛玻璃效果的，假如計(jì)算機(jī)運(yùn)行于"電池模式"，或用戶決定關(guān)閉透明效果，那么非客戶區(qū)就不會(huì)有毛玻璃效果了，如下圖所示。

　　假如在控制面板的可視效果中打開(kāi)了透明玻璃效果，那非客戶區(qū)看上去就像下圖這樣：

　　請(qǐng)留意，記事本的邊框呈現(xiàn)綠色調(diào)，這是墻紙透過(guò)來(lái)的顏色，并且也可以透過(guò)標(biāo)題欄看到桌面的一些圖標(biāo)。

　　我們?cè)诰帉懘a的時(shí)候，要害只須留意composition是否打開(kāi)，而不是設(shè)置了什么毛玻璃效果，因?yàn)镈WM會(huì)處理毛玻璃效果繪制的部分。

　　項(xiàng)目開(kāi)始

　　第一個(gè)示例程序是不帶視窗口、工具條、狀態(tài)條的SDI應(yīng)用程序，在運(yùn)行完WTL AppWizard之后，第一件事就是設(shè)置stdafx.h中的#define，以便利用Vista的新特性。Vista的Windows版本為6，且Vista中IE的版本為7，設(shè)置完成后應(yīng)像下面這樣：

#define WINVER 0x0600
#define _WIN32_WINNT 0x0600
#define _WIN32_IE 0x0700
　　接下來(lái)包含ATL與WTL的頭文件：

#define _WTL_NO_WTYPES // 不要在WTL頭文件中定義CRect/CPoint/CSize
#include <atlbase.h>
#include <atltypes.h>//共享的CRect/CPoint/CSize
#include <atlapp.h>

extern CAppModule _Module;

#include <atlwin.h>
#include <atlframe.h>
#include <atlmisc.h>
#include <atlcrack.h>
#include <atltheme.h>// XP/Vista主題支持
#include <dwmapi.h>// DWM API
　　假如修改完成之后就編譯，將會(huì)從atltheme.h中得到4個(gè)錯(cuò)誤。例如，以下是不會(huì)編譯通過(guò)的CTheme::GetThemeTextMetrics()代碼：

HRESULT GetThemeTextMetrics(..., PTEXTMETRICW pTextMetric)
{
　ATLASSERT(m_hTheme != NULL);

　//注重：因?yàn)閡xtheme.h頭文件，所以轉(zhuǎn)換為PTEXTMETRIC。
　//替換掉PTEXTMETRICW是不對(duì)的
　return ::GetThemeTextMetrics(m_hTheme, ..., (PTEXTMETRIC) pTextMetric);
}
　　在GetThemeTextMetrics() API中的轉(zhuǎn)換，是對(duì)Platform SDK的uxtheme.h中錯(cuò)誤的修正，然而，Windows SDK卻沒(méi)有這個(gè)錯(cuò)誤，所以這個(gè)轉(zhuǎn)換導(dǎo)致了一個(gè)錯(cuò)誤，可刪除函數(shù)中的這個(gè)轉(zhuǎn)換，其他三個(gè)也同樣。添加邊框的毛玻璃效果

　　通過(guò)把毛玻璃效果從非客戶區(qū)擴(kuò)展到客戶區(qū)，就可完成添加程序的毛玻璃效果，這個(gè)API是DwmExtendFrameIntoClientArea()。DwmExtendFrameIntoClientArea()接受兩個(gè)參數(shù)：我們框架窗口的HWND和一個(gè)用于說(shuō)明毛玻璃效果擴(kuò)展到窗口四面多遠(yuǎn)的MARGINS結(jié)構(gòu)。可在OnCreate()中調(diào)用這個(gè)API：

LRESULT CMainFrame::OnCreate(LPCREATESTRUCT lpcs)
{
　//在底部添加玻璃效果
　MARGINS mar = {0};
　mar.cyBottomHeight = 100;
　DwmExtendFrameIntoClientArea ( m_hWnd, &mar );
　return 0;
}
　　但假如運(yùn)行程序，看不到有任何變化：

　　這是因?yàn)槊ＡЧ揽坑诖翱诘耐该鞫?，為顯示出玻璃效果，區(qū)域中像素（在本例中為客戶區(qū)底部的100像素）的alpha值必須設(shè)置為0。最簡(jiǎn)單的方法是用一個(gè)黑畫(huà)刷來(lái)繪制這個(gè)區(qū)域，它會(huì)把像素的顏色值（紅、綠、藍(lán)和alpha）設(shè)為0，可在OnEraseBkgnd()中完成：

BOOL CMainFrame::OnEraseBkgnd ( HDC hdc )
{
　CDCHandle dc = hdc;
　CRect rcClient;
　GetClientRect(rcClient);
　dc.FillSolidRect(rcClient, RGB(0,0,0));
　return true;
}
　　修改之后，框架窗口看起來(lái)像這樣：

　　底部的100像素現(xiàn)在是毛玻璃效果了。

　　在毛玻璃區(qū)域添加文本

　　在窗口中添加毛玻璃效果是比較簡(jiǎn)單的部分，但要把自己的界面元素（UI）添加到毛玻璃之上，就有點(diǎn)難度了。因?yàn)楸仨氁恢北３窒袼氐腶lpha值，所以就要用到那些可以理解并適當(dāng)設(shè)置alpha的繪圖API。壞消息是，GDI函數(shù)差不多全部不理會(huì)alpha--唯一剩下的API則為帶有SRCCOPY光柵操作的BilBlt()函數(shù)了，因此，程序必須使用GDI+或主題API來(lái)進(jìn)行繪圖，這些API都是時(shí)刻不忘alpha的。

　　在Vista中，有關(guān)毛玻璃的效果一般用在表示程序狀態(tài)的區(qū)域（取代了通用控件中的狀態(tài)欄），例如，Windows Media Player 11就在窗口底部的毛玻璃區(qū)域顯示播放控制與當(dāng)前歌曲信息：

用C++品嘗Vista美味：界面的毛玻璃效果（圖五）

　　以下，將演示怎樣在毛玻璃區(qū)域上繪制文本，并怎樣在文本上添加發(fā)光效果，以便文本在任何背景上都方便閱讀。使用正確的字體

　　Vista已經(jīng)徹底放棄使用MS Sans Serif與Tahoma字體，轉(zhuǎn)而把Segoe UI作為默認(rèn)的UI字體。我們的程序也應(yīng)該使用Segoe UI字體，所以，將會(huì)在基于當(dāng)前主題的情況下創(chuàng)建一個(gè)字體。假如主題被禁用（如用戶正在使用Windows經(jīng)典顏色方案），那我們就使用SystemParametersInfo() API。

　　首先，需要在CMainFrame中添加主題支持，這一點(diǎn)非常簡(jiǎn)單，因?yàn)閃TL已經(jīng)有一個(gè)用于處理主題的類：CThemeImpl。我們可把CThemeImpl添加到繼續(xù)列表，并把消息鏈接至CThemeImpl，以便在當(dāng)前主題改變時(shí)，程序可以得到相應(yīng)的通知。

class CMainFrame :
public CFrameWindowImpl<CMainFrame>,
public CMessageFilter,
public CThemeImpl<CMainFrame>
{
　// ...
　BEGIN_MSG_MAP(CMainFrame)
　　CHAIN_MSG_MAP(CThemeImpl<CMainFrame>)
　　// ...
　END_MSG_MAP()

　PRotected:
　　CFont m_font; //用于繪制文本的字體
};
　　在CMainFrame的構(gòu)造函數(shù)中，我們調(diào)用了CThemeImpl::SetThemeClassList()，其指定了我們正在使用哪一個(gè)主題的窗口類。對(duì)一般窗口來(lái)說(shuō)（即不是普通控件的窗口），名稱為"globals"。

CMainFrame::CMainFrame()
{
　SetThemeClassList ( L"globals" );
}

　　最后，在OnCreate()中，從主題中讀取字體信息，并創(chuàng)建一個(gè)字體自用：

LRESULT CMainFrame::OnCreate ( LPCREATESTRUCT lpcs )
{
　// ...
　//決定在文本中使用哪一種字體

　LOGFONT lf = {0};
　if ( !IsThemeNull() )
　　GetThemeSysFont ( TMT_MSGBOXFONT, &lf );
　else
　{
　　NONCLIENTMETRICS ncm = { sizeof(NONCLIENTMETRICS) };
　　SystemParametersInfo (SPI_GETNONCLIENTMETRICS, sizeof(NONCLIENTMETRICS),&ncm, false );
　　lf = ncm.lfMessageFont;
　}
　m_font.CreateFontIndirect ( &lf );
　return 0;
}
　　繪制文本

　　在毛玻璃效果上繪制文本涉及以下步驟：

　　·創(chuàng)建一個(gè)用于雙緩沖繪制的內(nèi)存DC。

　　·創(chuàng)建一個(gè)32位色深的DIB，并選入DC。

　　·用DrawThemeTextEx()把文本繪制在內(nèi)存中的DIB上。

　　·用BitBit()把文本復(fù)制到屏幕。

　　因?yàn)槲覀兊睦L制代碼將會(huì)因?yàn)閏omposition是否打開(kāi)而有所不同，所以需要在繪制期間檢查composition狀態(tài)。檢查狀態(tài)的API為DwmIsCompositionEnabled()，假如API執(zhí)行失敗，在返回值中就不會(huì)指示出打開(kāi)狀態(tài)，但CMainFrame中有一個(gè)包裝好的函數(shù)IsCompositionEnabled()，非常易于使用：

bool CMainFrame::IsCompositionEnabled() const
{
　HRESULT hr;
　BOOL bEnabled;
　hr = DwmIsCompositionEnabled(&bEnabled);
　return SUCCEEDED(hr) && bEnabled;

}
　　現(xiàn)在，讓我們?cè)贆z查一遍OnEraseBkgnd()，看看每個(gè)步驟是否都完成了。這個(gè)程序是一個(gè)時(shí)鐘程序，所以先用GetTimeFormat()獲取當(dāng)前時(shí)間：

BOOL CMainFrame::OnEraseBkgnd(HDC hdc)
{
　CDCHandle dc = hdc;
　CRect rcClient, rcText;
　GetClientRect ( rcClient );
　dc.FillSolidRect ( rcClient, RGB(0,0,0) );
　rcText = rcClient;
　rcText.top = rcText.bottom - 100;
　
　//獲取當(dāng)前時(shí)間

　TCHAR szTime[64];
　GetTimeFormat(LOCALE_USER_DEFAULT,0,NULL,NULL,szTime,_countof(szTime));
　……
}

　　假如composition打開(kāi)，我們就進(jìn)行合成繪制步驟，先設(shè)置好一個(gè)內(nèi)存DC：

if ( IsCompositionEnabled() )
{
　//設(shè)置一個(gè)我們將繪制的內(nèi)存DC和位圖
　CDC dcMem;
　CBitmap bmp;
　BITMAPINFO dib = {0};
　dcMem.CreateCompatibleDC ( dc );
　　接下來(lái)，填充BITMAPINFO結(jié)構(gòu)以得到一個(gè)32位色深位圖，且與毛玻璃區(qū)域的高寬相同。此處需重點(diǎn)留意的是，位圖高度（即BITMAPINFOHEADER的biHeight成員）為負(fù)數(shù)，這是因?yàn)橥ǔＧ闆r下BMP是按照從下至上的順序存儲(chǔ)在內(nèi)存中的，但DrawThemeTextEx()需要的位圖順序是從上至下，所以要把高度設(shè)為負(fù)數(shù)。

dib.bmiHeader.biSize = sizeof(BITMAPINFOHEADER);
dib.bmiHeader.biWidth = rcText.Width();
dib.bmiHeader.biHeight = -rcText.Height();
dib.bmiHeader.biplanes = 1;
dib.bmiHeader.biBitCount = 32;
dib.bmiHeader.biCompression = BI_RGB;

bmp.CreateDIBSection (dc,&dib,DIB_RGB_COLORS,NULL,NULL,0);
　　現(xiàn)在，我們的圖形對(duì)象就創(chuàng)建好了，可以開(kāi)始繪制文本了。

//設(shè)置好DC

dcMem.SelectBitmap ( bmp );
dcMem.SelectFont ( m_font );

//繪制文本

DTTOPTS dto = { sizeof(DTTOPTS) };
const UINT uFormat = DT_SINGLELINEDT_CENTERDT_VCENTERDT_NOPREFIX;
CRect rcText2 = rcText;
dto.dwFlags = DTT_COMPOSITEDDTT_GLOWSIZE;
dto.iGlowSize = 10;
rcText2 -= rcText2.TopLeft(); //相同的rect，但左上角為(0,0)

DrawThemeTextEx ( m_hTheme, dcMem, 0, 0, CT2CW(szTime), -1,
uFormat, rcText2, &dto );
　　DTTOPTS結(jié)構(gòu)控制了文本怎樣被繪制，在標(biāo)志中我們指明了要繪制"合成文本"，并讓文本有一個(gè)發(fā)光效果。最后，把內(nèi)存中的位圖貼到屏幕上：

　//將文本繪制到屏幕上。
　BitBlt ( dc, rcText.left, rcText.top, rcText.Width(), rcText.Height(), dcMem, 0, 0, SRCCOPY );
} // end if (IsCompositionEnabled())
　　假如composition未打開(kāi)，我們用GDI函數(shù)繪制文本：

else
{
　const UINT uFormat = DT_SINGLELINEDT_CENTERDT_VCENTERDT_NOPREFIX;
　//設(shè)置好DC

　dc.SetTextColor ( RGB(255,255,255) );
　dc.SelectFont ( m_font );
　dc.SetBkMode ( TRANSPARENT );

　//繪制文本

　dc.DrawText ( szTime, -1, rcText, uFormat );
}
return true; //我們繪制了整個(gè)背景
}
　　下面就是"合成文本"的模樣：

　　為演示發(fā)光效果，下面是同一背景上的一段文本，但沒(méi)有發(fā)光效果：

處理composition相關(guān)的通知

　　當(dāng)DWM的composition狀態(tài)打開(kāi)或關(guān)閉時(shí)，系統(tǒng)會(huì)向所有頂層窗口廣播一個(gè)WM_DWMCOMPOSITIONCHANGED消息；假如composition為打開(kāi)，需要再次調(diào)用DwmExtendFrameIntoClientArea()以告之DWM，我們窗口的哪一部分應(yīng)為毛玻璃效果：

LRESULT CMainFrame::OnCompositionChanged(...)
{
　if ( IsCompositionEnabled() )
　{
　　MARGINS mar = {0};
　　mar.cyBottomHeight = 100;

　　DwmExtendFrameIntoClientArea ( m_hWnd, &mar );
　}
　return 0;
}
　　在對(duì)話框程序中應(yīng)用毛玻璃效果

　　在對(duì)話框程序中添加毛玻璃效果的過(guò)程，與上面框架窗口的例子非常相似，但需要對(duì)代碼作一些稍微的改動(dòng)。在示例對(duì)話框程序中為頂層窗口添加了毛玻璃效果，下面，相對(duì)前一例子作了修改或添加的代碼，將以黑體字標(biāo)出。

　　設(shè)置對(duì)話框

　　如之前一樣，要告之CThemeImpl我們要使用哪個(gè)窗口類主題，并調(diào)用DwmExtendFrameIntoClientArea()為窗口邊框添加毛玻璃效果。

CMainDlg::CMainDlg()
{
　SetThemeClassList ( L"globals" );
}

BOOL CMainDlg::OnInitDialog ( HWND hwndFocus, LPARAM lParam )
{
　//刪除了向?qū)傻哪承┏跏蓟a
　//為頂層窗口添加毛玻璃效果

　if ( IsCompositionEnabled() )
　{
　　MARGINS mar = {0};
　　mar.cyTopHeight = 150;
　　DwmExtendFrameIntoClientArea ( m_hWnd, &mar );
　}
　　接下來(lái)，構(gòu)建文本字體。注重，我們需要顯式調(diào)用OpenThemeData()，而為什么在前面的框架窗口例子中不需要調(diào)用呢，因?yàn)镃ThemeImpl在它的WM_CREATE處理程序中已調(diào)用了。反觀對(duì)話框取而代之接收WM_INITDIALOG，而CThemeImpl未處理WM_INITDIALOG，所以就需要我們自己調(diào)用OpenThemeData()了。另外，在代碼中也把字體設(shè)置得更大，只是為了演示更大字體的發(fā)光效果。

//決定使用哪一種字體
LOGFONT lf = {0};
OpenThemeData();

if ( !IsThemeNull() )
　GetThemeSysFont ( TMT_MSGBOXFONT, &lf );
else
{
　NONCLIENTMETRICS ncm = { sizeof(NONCLIENTMETRICS) };
　SystemParametersInfo (SPI_GETNONCLIENTMETRICS, sizeof(NONCLIENTMETRICS),&ncm, false );
　lf = ncm.lfMessageFont;
}

lf.lfHeight *= 3;
m_font.CreateFontIndirect ( &lf );
　　對(duì)話框的頂層窗口上有一個(gè)大的靜態(tài)文本控件，也就是我們要繪制時(shí)間的地方。代碼設(shè)置了控件的owner-draw風(fēng)格，因此，我們可把所有的文本繪制代碼都放在OnDrawItem()中：

//設(shè)置靜態(tài)文本控件的owner-draw

m_wndTimeLabel.Attach ( GetDlgItem(IDC_CLOCK) );
m_wndTimeLabel.ModifyStyle ( SS_TYPEMASK, SS_OWNERDRAW );
　　最后，調(diào)用EnableThemeDialogTexture()以便對(duì)話框背景使用當(dāng)前主題來(lái)繪制。

//其他初始化代碼

EnableThemeDialogTexture ( ETDT_ENABLE );

//設(shè)置計(jì)時(shí)器的時(shí)間間隔為1秒，以在每個(gè)秒鐘內(nèi)都能更新時(shí)鐘

SetTimer ( 1, 1000 );
return TRUE;
}
　　打開(kāi)毛玻璃效果

　　如前面一樣，我們需要用黑色畫(huà)刷來(lái)填充毛玻璃區(qū)域，以便營(yíng)造一種透視效果。因?yàn)閮?nèi)置的對(duì)話框窗口處理過(guò)程會(huì)響應(yīng)WM_ERASEBKGND消息，來(lái)處理諸如非矩形或半透明控件，所以，我們需要在OnPaint()而不是OnEraseBkgnd()中做繪圖。

void CMainDlg::OnPaint ( HDC hdc )
{
　CPaintDC dc(m_hWnd);
　CRect rcGlassArea;

　if ( IsCompositionEnabled() )
　{
　　GetClientRect ( rcGlassArea );
　　rcGlassArea.bottom = 150;
　　dc.FillSolidRect(rcGlassArea, RGB(0,0,0));
　}
}
　　繪制文本

　　在OnTimer()中，獲取當(dāng)前時(shí)間，并以此設(shè)置靜態(tài)控件的文本：

void CMainDlg::OnTimer ( UINT uID, TIMERPROC pProc )
{
　//獲取當(dāng)前時(shí)間
　TCHAR szTime[64];
　GetTimeFormat ( LOCALE_USER_DEFAULT, 0, NULL, NULL,szTime, _countof(szTime) );
　m_wndTimeLabel.SetWindowText ( szTime )
}
　　SetWindowText()函數(shù)會(huì)使靜態(tài)控件重繪，導(dǎo)致OnDrawItem()函數(shù)的調(diào)用。OnDrawItem()函數(shù)中的代碼與前面框架窗口例子中的類似，在此不再贅述，以下是程序外觀：

在毛玻璃效果上繪制圖形

　　先前已提到，在毛玻璃區(qū)域中進(jìn)行繪圖需要用到可識(shí)別alpha的API，如GDI+函數(shù)。下面的例子用到GDI+中的Image類在對(duì)話框的左上角繪制了一個(gè)Logo，如圖示：

　　這個(gè)Logo是從與exe文件在同一目錄的mylogo.png文件中讀取的，請(qǐng)注重，因?yàn)槭褂昧薌DI+繪制Logo，所以Logo四周的透明度已被保留，并且看上去顯示得很正確。

　　使整個(gè)窗口毛玻璃化

　　我們還可以讓整個(gè)窗口看上去都像塊毛玻璃，以下有一段簡(jiǎn)短代碼，只需把MARGINS結(jié)構(gòu)的第一個(gè)成員設(shè)為 -1就行了：

MARGINS mar = {-1};
DwmExtendFrameIntoClientArea ( m_hWnd, &mar );
　　假如在我們的對(duì)話框程序中加入這段代碼，那么程序最終將看上去像這樣：

　　留意觀察，4個(gè)按鈕上的文本顏色顯示不正確，并且每個(gè)按鈕外圍都有一個(gè)不透明的矩形。通常來(lái)說(shuō)，透明性與子窗口不會(huì)配合得非常好，假如想要一個(gè)全為毛玻璃效果的對(duì)話框，那么控件部分就需要以一個(gè)不透明的背景來(lái)繪制，如"Windows Mobility Center"程序：

　　結(jié)論

　　在程序中添加毛玻璃效果可使程序在視覺(jué)上顯得非常與眾不同，而且能提供一個(gè)比通用控件中狀態(tài)欄更好的狀態(tài)顯示區(qū)域，本文主要是起到一個(gè)拋磚引玉的作用，也有助于大家在使用本地C++添加毛玻璃效果時(shí)，對(duì)DWM API有一個(gè)初步的了解。

上一篇：DShow中實(shí)現(xiàn)抓圖的幾種方法

下一篇：具體而微的繪圖程式-c++ Borland 入門