高分辨率下文字字體、圖像、界面布局的解決方案.doc

高分辨率下文字字體、圖像、界面布局的解決方案作者來源：劉大鵬 發(fā)布時間：2006年01月19日 為什么要保證我們的軟件產(chǎn)品或應(yīng)用程序中的文本、圖像和字體、布局等問題呢，因為我們用戶的終端顯示設(shè)備通常型號和設(shè)置各異，如最近出現(xiàn)的169，低于8”的等最新款式移動手提電腦，我們的應(yīng)用程序和軟件產(chǎn)品通常會在這樣的終端變得面目全非，而這顯然給用戶的使用帶來了嚴(yán)重的問題，直接導(dǎo)致的問題如：操作易用性Usability、功能可接近性Accessibility、文本可讀性Readability等，而這樣的問題并非不可逾越，要解決如何讓我們的應(yīng)用程序在高分辨率的顯示下仍然保持正?？梢?，重點需要解決四個方面的問題文本和字體、圖像（圖形、圖標(biāo)和鼠標(biāo)指針）、版面設(shè)置和重繪等。 前言 所有的應(yīng)用程序都可以工作在高分辨率下顯示嗎？答案當(dāng)然是否定的。現(xiàn)在比較標(biāo)準(zhǔn)的計算機顯示器都已經(jīng)可以支持顯示大概96像素點/英寸的分辨率了，而且越來越多的應(yīng)用程序都可以運行在這種分辨率下，但是卻仍然面臨分辨率日益增長的帶來的危險。現(xiàn)在，我們可以輕松的買到一臺133-DPI顯示分辨率的筆記本電腦，甚至還有170DPI的，也許幾年以后200-DPI的顯示分辨率已經(jīng)隨處可見了，著名的工業(yè)雜志DisplaySearch曾經(jīng)預(yù)言在2002年底有40%的膝上電腦已經(jīng)超過100-DPI的屏幕分辨率了，而且這個數(shù)字還在增長。例圖1.各種常見分辨率下字體外觀 現(xiàn)在大多數(shù)的應(yīng)用程序要想顯示正常都依賴于分辨率，我們有些應(yīng)用程序如果沒有高分辨率的支持將會變得非常丑陋并且導(dǎo)致用戶易用性降低，與此同時越來越多的用戶使用了大字體。但是遺憾的是當(dāng)分辨率在130-DPI和200-DPI的時候是不成比例的，在96-DPI下的同一個應(yīng)用程序在這種分辨率下會變得無法使用，有的時候這些應(yīng)用程序的字體或控件會一律變得很小，但是更多的情況是一部分界面元素的尺寸正確的（例如，應(yīng)用程序使用了缺省的字體，那么將會在這個基礎(chǔ)上比原來大一些）而另外一部分不正確，如下圖所示： 例圖2.改變分辨率帶來的影響 由此可見，增強和改善我們應(yīng)用程序在高分辨率下的顯示支持是非常有必要的，那么重要的標(biāo)準(zhǔn)應(yīng)該是：圖片看起來更好，文本也應(yīng)該看起來更清晰。比如文本在200-DPI分辨率顯示器上清晰的像激光打印機輸出的一樣（因為計算機顯示有更多的顏色像素和灰度縮放支持，200-DPI的顯示器的質(zhì)量相當(dāng)于600-DPI的打印機）所以PDA和Smartphone的廠商相對于紙介更看重高分辨率下的顯示。 開發(fā)一個適應(yīng)多分辨率的應(yīng)用程序不是很簡單，尤其對于一個已經(jīng)成形的應(yīng)用程序和系統(tǒng)來說，動靜可能不小，但是它的好處是可以使我們不必再假設(shè)分辨率的各種情況，避免不能縮放帶來的質(zhì)量下降（比如說位圖和位圖字體），而且開發(fā)支持高分辨率的應(yīng)用程序有時候會覺得有些單調(diào)和乏味，但是如果我們的產(chǎn)品或應(yīng)用程序是為了服務(wù)于特定人群的（比如說視力不好、和需要長時間工作的人以及視弱人群），那么我們的工作就會變得非常有必要（在高對比度下和使用擴展大字體的情況都和高分辨率有關(guān)）。 系統(tǒng)韻律 Windows平臺本身提供了幫助解決用戶系統(tǒng)高分辨率問題的解決途徑，我們可以通過一個小函數(shù)GetDeviceCaps()先獲得當(dāng)前的顯示分辨率，然后通過GetSystemMetrics()這個系統(tǒng)韻律函數(shù)和讀取系統(tǒng)信息和參數(shù)的SystemParametersInfo()函數(shù)提供的方法來改變windows中的圖形以及控件元素、和字體的尺寸，從一個3d的邊框效果乃至到一個小圖標(biāo)的尺寸，都可以隨心所欲的改變。 大概原理是首先利用GetDeviceDaps()這個函數(shù)獲得當(dāng)前分辨下的X、和Y軸的數(shù)值作為基準(zhǔn)；然后再確定要縮放到多少。 關(guān)鍵問題 在設(shè)計高分辨率的應(yīng)用程序過程中，我們要特別注意四個重要的方面：文本和字體、圖像（圖形、圖標(biāo)和鼠標(biāo)指針），版面設(shè)置以及重繪。 文本和字體 這里有兩種字體：位圖（光柵）字體和TrueType字體，而我們要想實現(xiàn)高分辨率的應(yīng)用程序就只能使用Truetype字體，因為位圖（光柵）字體只能在96-DPI的屏幕分辨率下正常，而且不能夠縮放，Windows已經(jīng)支持TrueType字體很長時間了，所以找到一個很好的TrueType字體并且定義到我們的應(yīng)用系統(tǒng)中并不是什么大的問題，另外一個原因只能使用Truetype字體，因為一些最新的技術(shù)，比如說GDI+，但是它只支持Truetype字體的操作。 缺省的字體可以通過windows句柄(HWNDs)和得到，而圖形設(shè)備(HDCs)獲得的是位圖（光柵）字體，所以有時候在改變字體的時候，不管缺省字體不是HWNDs和HDC字體，只要它是TrueType字體，我們就可以改變它： HFONTfont=(HFONT)GetStockObject(DEFAULT_GUI_FONT); SendMessage(hwnd,WM_SETFONT,(WPARAM)font,0); SelectObject(hdc,font); 當(dāng)我們在窗口上創(chuàng)建字體的時候，可以使用像素指定字體尺寸，然后調(diào)整分辨率。 LOGFONTlf; Memset(&lf,0,sizeof(lf); lf.lfHeight=SCALEY(13); HFONTfont=CreateFontIndirect(&lf); 或者可以使用WindowsAPI提供的選擇文字通用對話框，允許使用更準(zhǔn)確的像素點來指定字體尺寸，然后經(jīng)過一些算法后轉(zhuǎn)化字體尺寸為像素，可以指定只使用TrueType字體來顯示。 CHOOSEFONTdata; Memset(&data,0,sizeof(data); data.lStructSize=sizeof(data); data.hwndOwner=form; data.Flags=CF_TTONLY|CF_SCREENFONTS; ChooseFont(&data); 最好的方法常常是在各種高分辨率下指定一個尺寸和一個區(qū)域的尺寸并且使用字體尺寸作為度量比例尺來指定這個頁面中的其它元素，比如說，可以設(shè)定按鈕之間的間距為缺省字體的高度的多少，使用GetTextMetrics()這個函數(shù)可以重新設(shè)定一個字體的高度。 TEXTMETRICmetrics; GetTextMetrics(hdc,&metrics); Intheight=metrics.tmHeight; 最好不要使用TEXTMETRIC提供的tmAveCharWidth方法，因為它只可以處理英文字母，除此以外我們還可以使用GetTextExtent()的這個方法來確認(rèn)所關(guān)心的字符串的尺寸，我們可以用GetTextExtentPoint32()繪制一個環(huán)繞字符串的矩形，示例如下：SIZEsize; GetTextExtentPoint32(hdc,string,strlen(string),&size); IntpaddingX=SCALEX(8); IntpaddingY=SCALEX(8); Rectangle(hdc,x-paddingX,y-paddingY,x+size.cx +paddingX,y+size.cy+paddingY); TextOut(hdc,x,y,string,strlen(string); 最后，我們意識到盡管TrueType字體縮放精細(xì)，但是他們不是線性縮放，也就是說在DPI增加10%以后字符串的長度不能正確的增加10%，（使用GDI+就沒有這個問題），因為一些特定的字母只能在幾個尺寸上看起來不錯，而TrueType卻可以自動選擇一個近似的尺寸正確顯示，這是使用GetTextExtent這個函數(shù)的原因。 圖像 圖像是以光柵為基礎(chǔ)的文件，（比如說BMP、JPEG和GIF），如圖標(biāo)和鼠標(biāo)指針等。圖像相對于字體來說要更難處理一些，因為圖像是由離散的像素組成，如果當(dāng)前顯示分辨率和圖像設(shè)計時的分辨率不一致，那么圖像就需要根據(jù)正確的物理尺寸縮放，我們可以通過StrectchBlt()函數(shù)縮放一個位圖而不是BitBlt()，當(dāng)圖像被Load時它可以輕易的幫助應(yīng)用系統(tǒng)縮放圖像，而且更準(zhǔn)確些。 BITMAPinfo; GetObject(bitmap,sizeof(info),(PTSTR)&info); HDChdcBitmap=CreateCompatibleDC(target); SelectObject(hdcBitmap,bitmap); StretchBlt(target,x,y, SCALEX(info.bmWidth),SCALEY(info.bmHeight), hdcBitmap,0,0,info.bmWidth,info.bmHeight,SRCCOPY); DeleteDC(hdcBitmap); 當(dāng)然，縮放肯定會衰減圖像的質(zhì)量，尤其是當(dāng)從一個小的分辨率放大到一個大分辨率的時候；而且縮小也有一些問題，缺省是拉伸模式COLORONCOLOR，它運算雖然快速，但是會丟失一些細(xì)節(jié)，HALFTONE方式拉伸運算速度很慢，但是質(zhì)量會更高，（GDI+提供了一個擴展的選項）。 SetStretchBltMode(hdc,HALFTONE); 需要特別指出的是ICO和.CUR文件是可以在一個單獨的文件中存儲多個圖片的文件，那么我們就需要在多種分辨率下設(shè)計不同的圖片，建議使用GetSystemMetrics()來解決，那么如果必須縮放的話，系統(tǒng)將會替我們選擇合適的圖片。但是BMP或其它很多種文件合適是不支持在一個單獨的文件中存儲多個文件的，但是我們可以通過判斷來確定在Load的時候選擇建立哪個文件。 If(GetDeviceCaps(hdc,LOGPIXELSX)130)Bitmap=LoadBitmap(hInstance,(char*)IDB_BITMAP1); ElseBitmap=LoadBitmap(hInstance,(char*)IDB_BITMAP2); 對于特殊的ICON和鼠標(biāo)指針，目前我們采用的是標(biāo)準(zhǔn)的1616pixel和3232pixel大小，高分辨率的應(yīng)用程序最大可以支持到6464pixel，當(dāng)然這是在不改動注冊表的前提下。理想的情況是在每個主要的分辨率下都有相應(yīng)的大圖標(biāo)和小圖標(biāo)。如果使用Comctl2.0提供的圖片序列(HIMAGELIST)，需要在放置到序列里面之前把它們縮放到合適大小，一個更好的選擇是使用最新的comctl6.0，但是這只在WindowsXP下支持，最新的控件支持會自動縮放它們在不同的分辨率下（halftonStrechBlt）。 界面布局 版面是另一個會導(dǎo)致在高分辨率下出現(xiàn)問題的環(huán)節(jié)，很多對話框都使用對話單位(DLU)作為規(guī)格設(shè)置單位，因為它可以隨著系統(tǒng)分辨率而自動運算縮放變化；但是一些自定義的界面上常常需要被我們重新手動轉(zhuǎn)換并且設(shè)定，因為有很多界面或?qū)υ捒蚶碚撋瞎ぷ髟谙袼叵?，我們可以重新?guī)劃界面和對話框的設(shè)定，比如說完全使用對話單位，盡管我們也可以調(diào)用SetWindowPos()提供的方法，或者可以拋棄關(guān)于DPI的假設(shè)繼續(xù)工作，使用systemmetrics來自動處理這些字體和控件之間的關(guān)聯(lián)。 重繪 重繪也是一樣，有些時候我們需要繪制屏幕或控件，需要計算不同的分辨率。如果我們開發(fā)了一個自定義控件，那么它或許可以工作在像素環(huán)境下，但是我們需要使用systemmetrics來避免分辨率的問題，如果我們在繪制一個復(fù)雜的圖形可以使用SetMapMode來使用圖形縮放引擎。GDI+ GDI+是微軟下一代的2D圖形解決方案，是對GDI的增強和延續(xù)，GDI+提供了在高分辨率的解決方案，比如說線性的文本縮放，和平滑圖片、縮放功能都被很好的改善，GDI+提供了許多針對速度和質(zhì)量等方面圖片縮放的運算規(guī)則，但是相比較GDIStretchBlt的而言，對于小圖像InterpolationModeBilinear更快速質(zhì)量也不錯，對于會有一些質(zhì)量問題，所以使用GDI+提供的InterpolationModeHighQuanlityBicubic是個不錯的選擇。圖片和圖形的真實感增強OfficeXP采用改進(jìn)的圖形系統(tǒng)(GDI+)，使用該圖形系統(tǒng)，圖形和藝術(shù)字將具有更平滑的輪廓以及可調(diào)整的用真實顏色調(diào)和的透明度級別。在調(diào)整圖片大小時，圖片的顯示將更加清晰。 另外GDI+圍繞分辨率的問題還提供了（Image:GetPhysicalDimension和Bitmap:SetResolution）這樣的函數(shù)，可以使用這些信息來恰當(dāng)?shù)目s放圖片，或者可以讓GDI+去作這些，如果在調(diào)用Graphics:DrawImage的時候沒有指定一個高度和寬度，GDI也會根據(jù)屏幕分辨率來計算圖像分辨率。 如何測試高分辨率下的應(yīng)用程序是否有問題？ 改變下面系統(tǒng)對于分辨率的設(shè)置: 1.在windo