C#發(fā)現(xiàn)之旅第五講 圖形開發(fā)基礎(chǔ)篇
袁永福 2008-5-15
系列課程說明
為了讓大家更深入的了解和使用C#，我們將開始這一系列的主題為“C#發(fā)現(xiàn)之旅”的技術(shù)講座。考慮到各位大多是進(jìn)行WEB數(shù)據(jù)庫開發(fā)的，而所謂發(fā)現(xiàn)就是發(fā)現(xiàn)我們所不熟悉的領(lǐng)域，因此本系列講座內(nèi)容將是C#在WEB數(shù)據(jù)庫開發(fā)以外的應(yīng)用。目前規(guī)劃的主要內(nèi)容是圖形開發(fā)和XML開發(fā)，并計(jì)劃編排了多個(gè)課程。在未來的C#發(fā)現(xiàn)之旅中，我們按照由淺入深，循序漸進(jìn)的步驟，一起探索和發(fā)現(xiàn)C#的其他未知的領(lǐng)域，更深入的理解和掌握使用C#進(jìn)行軟件開發(fā)，拓寬我們的視野，增強(qiáng)我們的軟件開發(fā)綜合能力。
本系列課程配套的演示代碼下載地址為 https://files.cnblogs.com/xdesigner/cs_discovery.zip 。其中的EllipseButtonLib.zip 就是本課程的演示代碼。
本系列課程已發(fā)布的文章有
C#發(fā)現(xiàn)之旅第一講 C#－XML開發(fā)
C#發(fā)現(xiàn)之旅第二講 C#－XSLT開發(fā)
C#發(fā)現(xiàn)之旅第三講 使用C#開發(fā)基于XSLT的代碼生成器
C#發(fā)現(xiàn)之旅第四講 Windows圖形開發(fā)入門
C#發(fā)現(xiàn)之旅第五講 圖形開發(fā)基礎(chǔ)篇
C#發(fā)現(xiàn)之旅第六講 C#圖形開發(fā)中級(jí)篇
C#發(fā)現(xiàn)之旅第七講 C#圖形開發(fā)高級(jí)篇
C#發(fā)現(xiàn)之旅第八講 ASP.NET圖形開發(fā)帶超鏈接的餅圖
C#發(fā)現(xiàn)之旅第九講 ASP.NET驗(yàn)證碼技術(shù)
C#發(fā)現(xiàn)之旅第十講 文檔對(duì)象模型
經(jīng)過上次Windows圖形開發(fā)基本原理的課程，大家對(duì)Windows圖形開發(fā)有著一些感性的認(rèn)識(shí)，但還可能對(duì)此不甚了解，還有一些迷茫，在本次課程中，我們將用C#從零開始開發(fā)一個(gè)比較簡單的橢圓形按鈕的圖形軟件，和大家一起開始探索C#圖形開發(fā)。
功能需求在本次快速軟件開發(fā)中，首先是確定軟件功能需求。
現(xiàn)有一個(gè)客戶，需要一個(gè)軟件，其功能要求如下
- 實(shí)現(xiàn)一個(gè)橢圓形的按鈕。可居中顯示一段單行文本。
- 鼠標(biāo)離開按鈕和進(jìn)入這個(gè)按鈕時(shí)，按鈕邊框和背景色需要變化。
- 鼠標(biāo)點(diǎn)擊按鈕會(huì)觸發(fā)一個(gè) Click 事件。
最后生成的軟件的用戶界面如圖所示
根據(jù)功能需求，本軟件設(shè)計(jì)如下
- 橢圓形按鈕是從UserControl 派生的一種自定義控件。
- 控件內(nèi)部重寫OnPaint事件來繪制按鈕界面。
- 重寫OnMouseMove，OnMouseEnter,OnMouseLeave事件來實(shí)現(xiàn)按鈕的動(dòng)態(tài)效果。
- 重寫OnClick事件來觸發(fā) Click 事件。
經(jīng)過簡單的設(shè)計(jì)，我們開始來開發(fā)這個(gè)軟件了。
新建C# WinForm.NET工程 打開VS.NET2003集成開發(fā)環(huán)境。新建立一個(gè)C#WinForm.NET程序。客戶最終需要一個(gè)組件，但此處為了調(diào)試方便，開始使用WinForm.NET應(yīng)用程序工程模式，開發(fā)完畢后可以設(shè)置它為DLL工程模式提交給客戶。
要進(jìn)行圖形開發(fā)，C#工程必須引用 System.Drawing.dll，在新增WinForm.NET過程時(shí)，會(huì)自動(dòng)添加該引用，而新增其他類型的工程時(shí)可能不會(huì)默認(rèn)添加該引用，此時(shí)需要手動(dòng)添加該引用。圖形編程需要頻繁引用System.Drawing名稱空間中的類型，因此在代碼的開頭需要添加 using System.Drawing ; 不過很多時(shí)候VS.NET會(huì)自動(dòng)添加這個(gè)代碼，若不自動(dòng)添加則需要手動(dòng)添加。
新增一個(gè)名稱為EllipseButton 的用戶控件。
首先是定義控件的一些屬性，主要有邊框色，按鈕背景色，鼠標(biāo)懸浮時(shí)邊框色和按鈕背景色。
定義一個(gè)鼠標(biāo)懸停標(biāo)志變量。 bool bolMouseHoverFlag = false ;
繪制控件用戶界面重寫控件的OnPaint方法，繪制橢圓形按鈕，其代碼在演示程序中可以看到。在開發(fā)自定義的控件時(shí)，可以相應(yīng)控件的Paint事件，也可以重寫OnPaint方法，這里為了代碼結(jié)構(gòu)簡單，此處重寫了OnPaint方法，在重寫該方法時(shí)一定要調(diào)用基類的 base.OnPaint 方法。
在重寫的OnPaint 方法中，具有一個(gè)類型為 PaintEventArgs 的參數(shù)，該參數(shù)有若干個(gè)成員，其中最重要的就是Graphics成員和ClipRectangle成員，Graphics成員是圖形繪制對(duì)象，可以看作一個(gè)空白的畫布，可以任意繪制圖形；ClipRectangle成員就是繪制區(qū)域剪切矩形。
在C#圖形開發(fā)中，Graphics類型是最重要的類型，它表示一個(gè)畫布對(duì)象，任何圖形操作都是輸出到這個(gè)畫布上。這個(gè)類型提供了很多屬性和方法，可以設(shè)置某些圖形輸出質(zhì)量，還提供了一系列的以Draw開頭的方法來繪制圖形，以Fill開頭的方法來填充圖形。此外還提供方法和屬性進(jìn)行坐標(biāo)轉(zhuǎn)換。
ClipRectangle表示剪切矩形，一般情況下，控件重新繪制內(nèi)容時(shí)是不需要重寫所有的內(nèi)容，而是繪制一部分內(nèi)容，該參數(shù)就指明控件中那個(gè)部分是需要重新繪制的，該區(qū)域以外的界面是不需要繪制，因此該參數(shù)是優(yōu)化圖形界面軟件性能的基礎(chǔ)，在這里，由于橢圓形按鈕繪制的內(nèi)容少，界面結(jié)構(gòu)簡單，因此不需要優(yōu)化，不需要使用ClipRectangle參數(shù)。
我們重寫的OnPaint函數(shù)代碼如下
| protected override void OnPaint(PaintEventArgs e) { base.OnPaint (e); // 創(chuàng)建橢圓路徑 using( System.Drawing.Drawing2D.GraphicsPath path = new System.Drawing.Drawing2D.GraphicsPath()) { path.AddEllipse( 0 , 0 , this.ClientSize.Width -1 , this.ClientSize.Height -1 ); // 填充背景色 using( SolidBrush b = new SolidBrush( bolMouseHoverFlag ? this.HoverBackColor : this.ButtonBackColor )) { e.Graphics.FillPath( b , path ); } // 繪制邊框 using( Pen p = new Pen( bolMouseHoverFlag ? this.HoverBorderColor : this.BorderColor , 2 )) { e.Graphics.DrawPath( p , path ); } } if( this.Caption != null ) { // 繪制文本 using( StringFormat f = new StringFormat()) { // 水平居中對(duì)齊 f.Alignment = System.Drawing.StringAlignment.Center ; // 垂直居中對(duì)齊 f.LineAlignment = System.Drawing.StringAlignment.Center ; // 設(shè)置為單行文本 f.FormatFlags = System.Drawing.StringFormatFlags.NoWrap ; // 繪制文本 using( SolidBrush b = new SolidBrush( this.ForeColor )) { e.Graphics.DrawString( this.Caption , this.Font , b , new System.Drawing.RectangleF( 0 , 0 , this.ClientSize.Width , this.ClientSize.Height ) , f ); } } } }//protected override void OnPaint(PaintEventArgs e) |
在這個(gè)方法中，我們首先創(chuàng)建了一個(gè) GraphicsPath 對(duì)象，這個(gè)對(duì)象表示一個(gè)路徑，所謂路徑就是若干個(gè)直線和曲線的組合。我們可以向路徑對(duì)象中添加各種直線段或曲線。在這里我們調(diào)用它的 AddEllipse 方法向路徑中添加了一個(gè)橢圓曲線，這是一個(gè)封閉曲線。AddEllipse 方法的參數(shù)表示一個(gè)橢圓的外切矩形。在這里外切矩形就是控件的客戶區(qū)域。
所謂客戶區(qū)就是控件內(nèi)部可以自定義繪制圖形的區(qū)域。某些Windows控件具有邊框，比如文本輸入框，邊框上面是不能繪制圖形的，因此若控件有邊框則它的客戶區(qū)大小不等于控件大小，此時(shí)需要使用控件的 ClientSize 屬性獲得控件客戶區(qū)大小，當(dāng)然若控件沒有邊框，則它的客戶區(qū)大小等于控件大小，為了編程方便，建議大家以后繪制控件內(nèi)容時(shí)都使用 ClientSize 屬性獲得可繪制區(qū)域的大小。
創(chuàng)建了一個(gè)橢圓路徑后，我們可以使用繪制橢圓形了，首先是創(chuàng)建一個(gè) SolidBrush 對(duì)象，然后調(diào)用圖形繪制對(duì)象的FillPath方法來填充路徑。然后創(chuàng)建 Pen 對(duì)象，使用Graphics的DrawPath方法來繪制路徑。這里要注意順序不能搞反。若先繪制邊框然后填充橢圓，則會(huì)導(dǎo)致后面的操作覆蓋掉前面的操作成果。
圖形編程有一個(gè)很明顯的特點(diǎn)，那就是各種圖形操作是要注意順序的，因?yàn)楹笠粋€(gè)圖形操作很容易覆蓋掉前面的圖形操作結(jié)果，這造成了圖形開發(fā)中調(diào)試?yán)щy，很多時(shí)候需要對(duì)代碼進(jìn)行非常仔細(xì)的靜態(tài)檢查。
很多圖形編程對(duì)象，例如SolidBrush，Pen，GraphisPath等等，都實(shí)現(xiàn)了System.IDisposable接口，其內(nèi)部都使用了非托管資源，在不使用的時(shí)候要銷毀這些對(duì)象，因此在代碼中使用了 using 語法結(jié)構(gòu)來處理這些對(duì)象。
這里我們使用鼠標(biāo)懸停標(biāo)志變量 bolMouseHoverFlag ，使得鼠標(biāo)懸停和不懸停時(shí)按鈕的背景色和邊框色有所不同。
繪制出橢圓區(qū)域后，我們就可以繪制按鈕文本。首先創(chuàng)建一個(gè) StringFormat 對(duì)象，這個(gè)對(duì)象用于控制繪制文本時(shí)的樣式。我們?cè)O(shè)置文本格式為水平居中對(duì)齊方式，垂直居中對(duì)齊樣式，而且還不能換行，只能顯示單行文本。
我們根據(jù)文本顏色創(chuàng)建一個(gè)SolidBrush對(duì)象，然后繪制文本，然后調(diào)用圖形繪制對(duì)象的 DrawString 方法來繪制字符串。這個(gè)函數(shù)第一個(gè)參數(shù)是文本內(nèi)容，第二個(gè)是字體，第三個(gè)就是繪制文本使用的畫刷對(duì)象，第四個(gè)就是包含文本顯示區(qū)域的矩形區(qū)域，第5個(gè)就是文本格式控制。
完成了OnPaint方法后，我們就獲得了一個(gè)具有橢圓形外觀的用戶控件，我們編譯程序，然后進(jìn)入一個(gè)窗體設(shè)計(jì)器，在工具箱的“我的用戶控件”欄目，上面可以看到已經(jīng)有一個(gè) EllipseButton 項(xiàng)目，按下這個(gè)項(xiàng)目就可以在窗體上放置一個(gè)橢圓形的按鈕了，你可以在屬性列表中設(shè)置它的文本。然后運(yùn)行程序，可以看到運(yùn)行的窗體上顯示了一個(gè)橢圓形的按鈕，但這個(gè)按鈕就像圖片一樣，毫無生機(jī)，我們還需要改進(jìn)這個(gè)控件來實(shí)現(xiàn)動(dòng)態(tài)效果。
響應(yīng)事件，實(shí)現(xiàn)動(dòng)態(tài)效果打開這個(gè)按鈕控件的代碼，開始添加代碼來實(shí)現(xiàn)鼠標(biāo)懸停的動(dòng)態(tài)效果。首先編寫一個(gè) CheckMouseHover 函數(shù)，該函數(shù)用于判斷鼠標(biāo)是否懸停到按鈕上面，由于按鈕是橢圓形，控件上有部分內(nèi)容不屬于按鈕區(qū)域，因此即使鼠標(biāo)在控件上面，也要判斷鼠標(biāo)光標(biāo)是否在橢圓形區(qū)域中。CheckMouseHover函數(shù)代碼如下
| /// <summary> /// 檢測釋放發(fā)生鼠標(biāo)懸停狀態(tài)發(fā)生改變,若發(fā)生改變則重寫繪制控件 /// </summary> /// <param name="x">測試點(diǎn)X坐標(biāo)</param> /// <param name="y">測試點(diǎn)Y坐標(biāo)</param> /// <returns>測試點(diǎn)是否在橢圓區(qū)域中</returns> private bool CheckMouseHover( int x , int y ) { using( System.Drawing.Drawing2D.GraphicsPath path = new System.Drawing.Drawing2D.GraphicsPath()) { path.AddEllipse( 0 , 0 , this.ClientSize.Width -1 , this.ClientSize.Height -1 ); bool flag = path.IsVisible( x , y ); if( flag != bolMouseHoverFlag ) { bolMouseHoverFlag = flag ; // 控件整體無效,準(zhǔn)備重新繪制,但不立即繪制用戶界面. this.Invalidate(); //this.Refresh(); // 強(qiáng)制立即繪制用戶界面. } return flag ; } } |
我們創(chuàng)建一個(gè)路徑對(duì)象，向該路徑添加橢圓區(qū)域，然后調(diào)用路徑的 IsVisible 函數(shù)判斷指定點(diǎn)是否包含在這個(gè)路徑中，若不包含在路徑中，則該點(diǎn)不在橢圓形按鈕上面。若這次判斷的結(jié)果和上次判斷的結(jié)果不相同，則設(shè)置鼠標(biāo)懸停狀態(tài)變量，然后重新繪制按鈕。
代碼中重新繪制控件具有兩種選擇，一個(gè)是調(diào)用控件的 Invalidate 方法，另外可調(diào)用 Refresh 方法。兩者都能重新繪制用戶界面，但是有差別的。Invalidate方法是聲明控件用戶界面一部分或全部無效，但不會(huì)導(dǎo)致立即重新繪制用戶界面，而是延遲一段時(shí)間后才真正的重新繪制用戶界面，可以看作是一種異步操作；而Refresh則是立即重新繪制用戶界面，繪制完畢后才結(jié)束Refresh方法，是一種同步操作。
在一般情況下Invalidate函數(shù)導(dǎo)致的延遲時(shí)間很短暫，人類無法察覺，此時(shí)應(yīng)當(dāng)調(diào)用Invalidate方法；但在少數(shù)情況下使用Invalidate會(huì)導(dǎo)致明顯的可察覺的延遲，則需要使用 Refresh 方法。Invalidate導(dǎo)致的延遲時(shí)間的長短和Windows底層消息驅(qū)動(dòng)機(jī)制有關(guān)，這里看出比較精細(xì)的圖形編程和Windows底層是有關(guān)聯(lián)的，Invalidate方法是Win32API函數(shù)InvalidateRect的.NET封裝，而Refresh方法是Win32API函數(shù)UpdateWindow的封裝。查閱MSND中關(guān)于這兩個(gè)API函數(shù)的說明就可以理解為什么會(huì)出現(xiàn)這種情況。
微軟提出.NET框架目的是讓開發(fā)者脫離Windows底層API來進(jìn)行快速軟件開發(fā)，這個(gè)目標(biāo)在ASP.NET中得到的相當(dāng)好的實(shí)現(xiàn)，因此常規(guī)的Web數(shù)據(jù)庫開發(fā)中是不會(huì)用到Win32API的。但在圖形開發(fā)中，.NET框架仍然很大程度的依賴Win32API函數(shù)，.NET圖形相關(guān)類庫中有很多部分是Win32API的封裝，這方面和VC的MFC框架有點(diǎn)類似，VC的MFC個(gè)人認(rèn)為是傻大黑粗，功能是強(qiáng)大，可是使用很不方便，而.NET框架中包含了一個(gè)充滿靈性的MFC，使用方便，功能也不弱，但仍然是基于Win32API的。因此要很深入的學(xué)習(xí).NET圖形編程，就要求對(duì)Win32API有所了解，這也加大了.NET圖形編程的學(xué)習(xí)難度。當(dāng)然比較簡單的.NET圖形編程是不需要了解Win32API的。
在這里也反映出圖形開發(fā)中對(duì)用戶體驗(yàn)的一些特殊要求。圖形軟件需要在計(jì)算機(jī)屏幕上繪制圖形，而人類由于其生理特點(diǎn)，各種感覺器官和運(yùn)動(dòng)器官的速度是不同的，大腦思維反應(yīng)最遲鈍，手操作鍵盤和鼠標(biāo)速度一般，而人眼的反映速度是很快的，能感知屏幕上幾十毫秒內(nèi)發(fā)生的變化，由于人眼具有很高的反應(yīng)速度，因此對(duì)圖形軟件的圖形繪制代碼運(yùn)行速度有很高的要求。
重寫控件的OnMouseMove 方法，處理鼠標(biāo)移動(dòng)事件，該事件處理中，只是簡單的調(diào)用CheckMouseHover 成員，參數(shù)就使用鼠標(biāo)光標(biāo)位置。
控件提供了一系列的以OnMouse開頭的方法都是處理鼠標(biāo)事件的，該方法有一個(gè)類型為 MouseEventArgs 的參數(shù)，該參數(shù)具有一些屬性，列出了發(fā)生鼠標(biāo)事件時(shí)的鼠標(biāo)按鍵狀態(tài)，鼠標(biāo)滾輪計(jì)數(shù)和鼠標(biāo)光標(biāo)在控件客戶區(qū)中的位置。
控件還重寫 OnMouseLeave 方法，處理鼠標(biāo)離開控件客戶區(qū)的事件，取消控件的鼠標(biāo)懸停狀態(tài)。
觸發(fā)Click事件客戶要求鼠標(biāo)按下這個(gè)橢圓形按鈕需要觸發(fā)一個(gè)事件，我們選擇了控件本身具有的Click事件作為按鈕點(diǎn)擊事件，于是我們重寫了OnClick函數(shù)，該函數(shù)代碼為
|
/// <summary> |
由于按鈕是橢圓形的，當(dāng)用戶鼠標(biāo)點(diǎn)擊控件時(shí)，要判斷點(diǎn)擊點(diǎn)是否在橢圓形區(qū)域中，從而要判斷是否需要觸發(fā)Click事件。因此我們重寫 OnClick 方法來處理控件的 Click 事件。
OnClick方法的參數(shù)沒有指明鼠標(biāo)光標(biāo)位置，因此我們自己計(jì)算鼠標(biāo)光標(biāo)在客戶區(qū)中的位置，我們使用Control類型的MousePosition靜態(tài)屬性，獲得鼠標(biāo)光標(biāo)在計(jì)算機(jī)屏幕中的位置，然后使用控件的PointToClient函數(shù)將這個(gè)坐標(biāo)從計(jì)算機(jī)屏幕坐標(biāo)轉(zhuǎn)換為控件客戶區(qū)坐標(biāo)，然后調(diào)用CheckMouseHover函數(shù)判斷這個(gè)坐標(biāo)是否在橢圓形區(qū)域中，若鼠標(biāo)在橢圓形區(qū)域中，則調(diào)用base.OnClick方法，觸發(fā)Click事件。
測試控件重新編譯程序，新建一個(gè)窗體，打開窗體設(shè)計(jì)器，在工具箱的我的用戶控件頁面中可以看到有一個(gè)EllipiseButton的用戶控件，若沒有則鼠標(biāo)右擊工具箱，選擇菜單項(xiàng)目“添加/移除項(xiàng)目”。在對(duì)話框中點(diǎn)擊瀏覽選擇剛剛編譯生成的EXE或DLL文件，然后選中EllipiseButton即可在工具箱上新增EllipseButton項(xiàng)目。選中橢圓形按鈕，設(shè)置屬性列表為顯示控件事件，雙擊添加控件的Click事件，在該事件中顯示一個(gè)消息框，然后編譯運(yùn)行即可看到一個(gè)具有動(dòng)態(tài)效果的橢圓形按鈕。如此這個(gè)按鈕控件編寫完畢。
我們?cè)O(shè)置工程類型為DLL樣式，重新編譯，得到一個(gè)DLL文件，這個(gè)DLL文件就可以提交給客戶使用了。
小結(jié)在本次課程中，我們使用了C#開發(fā)了一個(gè)很簡單的具有動(dòng)態(tài)效果的橢圓形按鈕的小組件，演示了C#圖形開發(fā)的基本過程，使得大家能對(duì)C#圖形開發(fā)有一個(gè)初步的印象。從這個(gè)小程序可以看出，代碼是不多的，但所需的基本知識(shí)是比較多的，軟件的設(shè)計(jì)，開發(fā)和WEB數(shù)據(jù)庫開發(fā)有著很大的不同。最后我希望大家能在今天的程序的基礎(chǔ)上，實(shí)現(xiàn)一個(gè)三角型的按鈕控件。
在下一次課程中，我們繼續(xù)使用C#開發(fā)一個(gè)稍微復(fù)雜的圖形軟件，從而更深入的進(jìn)行C#圖形開發(fā)的探索。
posted on 2008-05-26 09:03 袁永福 電子病歷，醫(yī)療信息化 閱讀(10798) 評(píng)論(20) 收藏 舉報(bào)
浙公網(wǎng)安備 33010602011771號(hào)