1 / 60

第十六章 繪圖

第十六章 繪圖. 1 6 - 1 繪圖的基本觀念 1 6 - 2 繪圖屬性與方法 1 6 - 3 繪圖相關類別 習題. 1 6 - 1 繪圖的基本觀念. GDI+. 相信很多人都有使用 PhotoImpact 、 PhotoShop 或 Windows 小畫家的經驗 , 您要繪製直線、圓、扇形、多邊形、或輸入文字等 , 都是線上操作完成 , 這些操作的背後都由許多函式堆積而成。在 .NET Framework 中引入了 GDI 的新一代技術 , 稱為 GDI+, 用來繪製圖形。

badru
Download Presentation

第十六章 繪圖

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. 第十六章 繪圖 • 1 6 - 1 繪圖的基本觀念 • 1 6 - 2 繪圖屬性與方法 • 1 6 - 3 繪圖相關類別 • 習題

  2. 1 6 - 1 繪圖的基本觀念

  3. GDI+ • 相信很多人都有使用PhotoImpact 、PhotoShop 或Windows 小畫家的經驗, 您要繪製直線、圓、扇形、多邊形、或輸入文字等, 都是線上操作完成, 這些操作的背後都由許多函式堆積而成。在.NET Framework 中引入了GDI 的新一代技術, 稱為GDI+, 用來繪製圖形。 • 首先先了解什麼是GDI 呢?GDI 是從Windows 95 到Windows 2000 隨附的舊版繪圖裝置介面(Graphics Device Interface), 是屬於繪圖方面的API(Application Programming Interface)。因為應用程式不能直接控制硬體, 所以當我們要進行繪圖的動作時, 必須透過GDI 才能完成。 • 那GDI+ 又是什麼呢?GDI+ 是GDI 的後續產品, 是一種繪圖裝置介面, 可將應用程式和繪圖硬體分隔, 讓我們能夠撰寫與裝置無關的應用程式。它可以讓我們不需注意特定顯示裝置的詳細資料, 便可在螢幕或印表機顯示資訊。我們可以呼叫GDI+ 類別所提供的方法, 然後這些方法會適當地呼叫特定的裝置驅動程式, 而完成繪圖。下表列出了一些實作GDI+的命名空間, 這些命名空間包含許多基本與進階的繪圖類別, 供程式開發者來完成各種繪圖功能。本章在此僅介紹System.Drawing 命名空間中一些常用的繪圖類別, 希望藉由本章的介紹, 讓讀者可以輕鬆地學習C# 的繪圖功能。

  4. 座標系統 • 在我們開始之前, 一定要先知道GDI+ 的座標系統如何定義。座標原點(0, 0)在左上角, X 軸及Y 軸分別向右及向下增加, 預設的單位長度是像素(pixel), 請看下圖:

  5. Graphics 類別 • Graphics 類別是GDI+ 的核心, 若要繪製任何圖形, 都需要先取得Graphics物件, 設定它的屬性, 呼叫它的方法來完成繪圖的工作。由於Graphics 類別並未公開其建構子, 故無法以建構子來建立一個Graphics 物件, 而是要從您所要繪圖的元件取得一個Graphics 物件, 其語法如下: Graphics g = 物件.CreateGraphics; • 以上敘述中的物件可為表單(Form) 及Control 類別的衍生類別(例如,Label 、PictureBox 及TextBox 等...), 當上述物件呼叫CreateGraphics 方法後, 會傳回一個Graphics 物件, 您可利用此一Graphics 物件在建立它的物件上繪圖。例如以下敘述可取得表單的Graphics 物件。 Graphics g = this.CreateGraphics;

  6. Pen 類別 • C#的繪圖至少必須藉助Graphics 與Pen 類別物件的協助, 其中Graphics物件就好比一塊畫布, 而Pen 類別物件就是畫筆了。例如, 以下敘述可產生畫筆物件, 畫筆的線條顏色為黑色, 線條粗細為3。 drawPen = New Pen(Color.Black, 3); • 繪圖方法 Graphics 類別的常用繪圖方法有DrawLine(直線)、DrawRectangle(矩形)、DrawEllipse(橢圓)、DrawCurve(曲線)、DarwArc(弧線)、DrawPie(扇形)、DrawLines(多邊形)、DrawPolygon(封閉多邊形)以及DrawBezier(貝茲曲線)等。這些方法的詳細說明及範例請看16-2 節。 現在先簡單的介紹一個繪製直線的方法。例如, 以下敘述可繪製一條起點為(10, 10), 終點為(300, 100)的直線。 g.DrawLine(drawPen, 10, 10, 300, 100);

  7. 範例16-1a • 請寫一程式, 當使用者按一下按鍵時, 可於表單繪製一條起點為(10,10), 終點為(300, 100) 的直線。

  8. Paint 事件 • 除了可利用上述CreateGraphics 方法取得繪圖物件來繪製圖形外, 亦可利用物件的Paint 事件來繪製圖形, Paint 事件的語法如下: private void 物件名稱_Paint(object sender, System.Windows.Forms.PaintEventArgs e)

  9. Paint 事件來自Control 類別, 所以Control 類別的衍生類別皆可改寫此事件, 我們可利用上述語法中PaintEventArgs 類別的物件e 來取得繪圖物件繪製圖形。例如, 以下敘述可利用Paint 事件中的參數e 繪製一條直線。 Pen drawPen = new Pen(Color.Black, 3); e.Graphics.DrawLine(drawPen, 10, 10, 300, 100); • 其次, Paint 事件的執行時機如下: • 1. 新建的視窗。 • 2. 視窗從隱藏還原為可視。 • 3. 視窗被改變大小。 • 4. 視窗被別的視窗遮蓋再移開。

  10. 範例16-1b • 示範以上Paint 事件。

  11. 1 6 - 2 繪圖屬性與方法 • 本節將介紹一些Graphics 類別的常用繪圖屬性與方法, 例如設定座標單位(PageUnit)、繪製文字(DrawString)、直線(DrawLine)、矩形(DrawRectangle)、橢圓(DrawEllipse)、弧線(DrawArc) 等方法, 請看以下說明。

  12. 繪圖屬性 • PageUnit 取得或設定此Graphics 物件的座標單位, 其中座標單位必須是GraphicsUnit 列舉型別的成員, 如下表所示。 例如, 以下敘述可將座標單位設為英吋。 Graphics g = this.CreateGraphics(); g.PageUnit = GraphicsUnit.Inch;

  13. 繪圖方法 • DrawLine 繪製連接兩點的直線, 共有4 種多載, 以下僅介紹最常用的一種多載,其語法如下: public void DrawLine( Pen pen, int x1, int y1, int x2, int y2 ) ;

  14. 其中pen 為畫筆物件, (x1, y1) 為起點的座標, (x2, y2) 為終點的座標, 如下圖所示。 • 例如, 以下敘述可於表單上繪製一起點為(10, 10), 終點為(100, 100) 的直線。 Graphics g = this.CreateGraphics(); Pen drawPen = new Pen(Color.Black, 1); g.DrawLine(drawPen, 10, 10, 100, 100);

  15. DrawRectangle 繪製矩形, 其語法如下: public void DrawRectangle( Pen pen, int x, int y, int width, int height ) ; 其中座標(x, y) 為矩形左上角點, width 為矩形的寬度, height 為矩形的高度, 如下圖所示。

  16. 例如, 以下敘述可於表單上繪出一個左上角位於(50, 30), 寬度200, 高度100 的矩形。 Graphics g = this.CreateGraphics(); Pen drawPen = new Pen(Color.Black, 1); g.DrawRectangle(drawPen, 50, 30, 200, 100);

  17. DrawEllipse 繪製橢圓, 其語法如下: public void DrawEllipse( Pen pen, int x, int y, int width, int height ) ; 在指定左上角座標(x, y) 寬度(width) 及高度(height) 的矩形內繪製橢圓形, 如下圖所示。

  18. 例如, 以下敘述可於表單上, 在一個左上角位於(50, 30), 寬度為200, 高度為100 的矩形內繪出橢圓。 g = this.CreateGraphics(); Pen drawPen = new Pen(Color.Black, 1); g.DrawEllipse(drawPen, 50, 30, 200, 100);

  19. 此外, 若矩形的寬度和高度相等則可繪出一正圓形。例如, 以下敘述可於表單上, 在一個左上角位於(50, 30), 寬度和高度皆為100 的矩形內繪出一正圓形。 g = this.CreateGraphics(); Pen drawPen = new Pen(Color.Black, 1); g.DrawEllipse(drawPen, 50, 30, 100, 100); 其結果如右圖:

  20. DrawArc 繪製弧形, 其語法如下: public void DrawArc( Pen pen, int x, int y, int width, int height, int startAngle, int sweepAngle ) ; 在一個指定左上角座標、寬度和高度的矩形內繪製弧線, 此弧線為上述矩形所定義之橢圓的一部分。以上語法中各項參數的意義如下:

  21. 例如, 以下敘述將於一個左上角位於(50, 50), 寬度為100, 高度為50 的矩形內, 繪出一起始角為90 度, 弧角為90 度的弧線。 g = this.CreateGraphics(); Pen drawPen = new Pen(Color.Black, 1); g.DrawArc(drawPen, 50, 50, 200, 100, 0, 90); 其結果如右圖:

  22. DrawPie 繪製扇形, 其語法如下: public void DrawPie( Pen pen, int x, int y, int width, int height, int startAngle, int sweepAngle ) ;

  23. 在一個指定左上角座標、寬度和高度的矩形內繪製扇形, 此扇形面積為上述矩形所定義之橢圓形面積的一部分。以上語法中各項參數的意義如下:

  24. 例如, 以下敘述將於一個左上角位於(50, 50), 寬度為100, 高度為50 的矩形內, 繪出一起始角為0 度, 弧角為90 度的扇形。 g = this.CreateGraphics(); Pen drawPen = new Pen(Color.Black, 1); g.DrawPie(drawPen, 50, 50, 100, 50, 0, 90); 其結果如下圖:

  25. DrawLines 繪製連續線段, 其語法如下: public void DrawLines( Pen pen, Point[] points ) ; 繪製連結Point 結構陣列的連績線段。例如, 以下敘述可繪出一條起點為(100, 10), 終點為(200, 110), 並通過(120, 70) 及(160, 30) 兩點的連續線段。 g = this.CreateGraphics(); Pen drawPen = new Pen(Color.Black, 1); Point p1, p2, p3, p4; p1 = new Point(100, 10); p2 = new Point(120, 70); p3 = new Point(160, 30); p4 = new Point(200, 110); Point[] points = {p1, p2, p3, p4}; g.DrawLines(drawPen, points); 其結果如下圖:

  26. DrawPolygon 繪製封閉多邊形, 其語法如下: public void DrawPolygon( Pen pen, Point[] points ) ; 繪製連結指定Point 結構陣列的封閉多邊形。例如, 以下敘述可繪出一個封閉多邊形, 其起點為(100, 10), 終點為(160, 30), 並通過(120, 70) 及(200,110) 兩點, 最後此方法會在起點與終點之間補上一條直線。 g = this.CreateGraphics(); Pen drawPen = new Pen(Color.Black, 1); Point p1, p2, p3, p4; p1 = new Point(100, 10); p2 = new Point(120, 70);

  27. p3 = new Point(200, 110); p4 = new Point(160, 30); Point[] points = {p1, p2, p3, p4}; g.DrawPolygon(drawPen, points); 其結果如右圖:

  28. DrawString 繪製文字, 其語法如下: public void DrawString( string s, Font font, Brush brush, float x, float y ) ; 使用指定的Brush 和Font 物件, 將文字字串繪製於指定位置(x, y), 其中有關Brush 和Font 類別在16-3 節有進一步說明, 在此可先略過。例如, 以下敘述可於座標(100, 50) 的位置繪製文字。 g = this.CreateGraphics(); Font drawFont = new Font("Arial", 16); SolidBrush drawBrush = new SolidBrush(Color.Black); g.DrawString(" 歡迎光臨", drawFont, drawBrush, 100, 50);

  29. FillRectangle 繪製一個填滿顏色的矩形, 其語法如下: public void FillRectangle( Brush brush, int x, int y, int width, int height ) ; 其中brush 為筆刷物件, 有關Brush 類別在下一節中有進一步的說明,(x, y) 為矩形的左上角點, width 為矩形的寬度, height 為矩形的高度。例如,以下敘述可於表單上繪出一個左上角位於(50, 30), 寬度為200, 高度為100,且以紅色填滿的矩形。

  30. g = this.CreateGraphics(); SolidBrush sb = new SolidBrush(Color.Red); g.FillRectangle(sb, 50, 30, 200, 100); 其結果如右圖。

  31. FillEllipse 繪製一個填滿顏色的橢圓, 其語法如下: public void FillEllipse( Brush brush, int x, int y, int width, int height ) ; 在指定左上角座標(x, y), 寬度(width) 及高度(height) 的矩形內繪製一個填滿顏色的橢圓。例如, 以下敘述可繪出一個填滿藍色的橢圓。

  32. g = this.CreateGraphics(); SolidBrush sb = new SolidBrush(Color.Blue); g.FillEllipse(sb, 50, 30, 200, 100); 其結果如右圖。

  33. FillPie 繪製一個填滿顏色的扇形, 其語法如下: public void FillPie( Brush brush, int x, int y, int width, int height, int startAngle, int sweepAngle ) ; 以上語法中各項參數的意義, 除brush 物件外, 其它各項參數意義同DrawPie 方法。例如, 以下敘述可繪出一個填滿黃色的扇形。

  34. g = this.CreateGraphics(); SolidBrush sb = new SolidBrush(Color.Yellow); g.FillPie(sb, 50, 10, 150, 100, 0, 90); 其結果如右圖。

  35. FillPolygon 繪製一個填滿顏色的封閉多邊形, 其語法如下: public void FillPolygon( Brush brush, Point[] points ) ; 將指定Point 結構陣列所定義多邊形內部填滿顏色。例如, 以下敘述可繪出一個填滿綠色的多邊形。

  36. g = this.CreateGraphics(); SolidBrush sb = new SolidBrush(Color.Green); Point p1, p2, p3, p4; p1 = new Point(100, 10); p2 = new Point(120, 70); p3 = new Point(200, 110); p4 = new Point(160, 30); Point[] points = {p1, p2, p3, p4}; g.FillPolygon(sb, points); 其結果如右圖。

  37. Cle a r 清除整個繪圖介面, 並使用指定的背景顏色填滿它。其語法如下: public void Clear( Color color ) ; 其中Color 為繪圖介面的背景顏色, 有關Color 結構在16-3 節有進一步的說明。例如, 以下敘述可清除表單之繪圖介面, 並以表單的背景顏色將其填滿。 g . C l e a r ( t h i s . B a c kC o l o r ) ;

  38. 範例16-2a • 示範以上繪圖方法。

  39. 1 6 - 3 繪圖相關類別 • 本單元將介紹的是一些與繪圖相關的類別, 它們分別是Pen 、Brush 、color 及Font 類別, 雖然這些類別並不具有直接繪圖的能力, 但卻是繪圖方法必備的參數。以下將針對這四個繪圖相關類別作進一步的介紹。

  40. Pen 類別 Pen 類別可協助設定畫筆的寬度、顏色、填滿的樣式、線條樣式以及線條端點樣式, 請看以下說明。 • 建構子 Pen (Color color, float Width) 以指定畫筆顏色與寬度, 初始化Pen 類別的執行個體。例如, 以下敘述可建立Pen 類別的執行個體, 其畫筆顏色為紅色且筆寬為3。 Pen drawPen = new Pen(Color.Red, 3);

  41. 實例屬性 • Width 取得或設定畫筆寬度。例如, 以下敘述可將drawPen 畫筆物件的筆寬設定為5 。 drawPen.Width = 5; • Color 取得或設定畫筆顏色。例如, 以下敘述可將drawPen 畫筆物件的畫筆顏色設定藍色。 drawPen.Color = Color.Blue;

  42. DashStyle 取得或設定線條的樣式, 此樣式必須是DashStyle 列舉型別的成員, 如下表所示。 例如, 以下敘述可將drawPen 畫筆物件的線條樣式設定為虛線。 drawPen.DashStyle = System.Drawing.Drawing2D.DashStyle.Dot; 此外, DashStyle 列舉型別屬於System、Drawing 及Drawing2D 命名空間,讀者可於程式開頭使用"using System、Drawing、Drawing2D;"先行宣告,以避免鍵入全名。

  43. StartCap 與EndCap 取得或設定線條的端點樣式, 此樣式必須LineCap 列舉型別的成員, 如下表所示。 例如, 以下敘述可將drawPen 畫筆物件的線條端點設為箭頭及菱形。 drawPen.StartCap = System.Drawing.Drawing2D.LineCap.ArrowAnchor; drawPen.EndCap = System.Drawing.Drawing2D.LineCap.DiamondAnchor;

  44. 範例16-3a • 示範以上Pen 類別的用法。

  45. Brush 類別 • 我們曾經提過, Graphics 類別像是一塊畫布, Pen 類別像是一支畫筆, 但是這支畫筆只具有畫直線及外框(例如, 橢圓形及扇形)的能力, 若要對某一塊區域進行填色的動作, Pen 類別就沒有辦法做到了, 而Brush 類別就是用來對各種封閉圖形填色的工具。針對各種需要, GDI+ 提供了五種Brush 的衍生類別, 分別是SolidBrush(單色)、TextureBrush(材質)、HatchBrush 、PathGradientBrush 以及LinearGradientBrush(漸層)等, 以下僅針對SolidBrush(單色)與TextureBrush(材質)類別作進一步的介紹。

  46. SolidBrush 類別 此類別是Brush 類別中最基本的一種, 用來將某一區域填入單一顏色。其建構子如下: SolidBrush (Color color) 以指定色彩初始化SolidBrush 的執行個體。例如, 以下敘述可在一個左上角位於(50, 30), 寬度100, 高度50 的矩形內填入紅色。 Graphics g = this.CreateGraphics(); SolidBrush sb = new SolidBrush(Color.Red); g.FillRectangle(sb, 50, 30, 100, 50);

  47. TextureBrush 類別 TextureBrush 類別是將圖檔填入某一區域, 圖檔必須藉由Image 類別來載入。TextureBrush 類別的建構子如下: TextureBrush (Image bitmap) 以指定圖檔來初始化TextureBrush 的執行個體。例如, 以下敘述可在一個左上角位於(40, 0), 寬度為300, 高度為200 的矩形內填入檔名為"c:\CsBook\ch16\077.jpg" 的圖檔。 Graphics g = this.CreateGraphics(); TextureBrush tb = new TextureBrush(Image.FromFile( "c:\\CsBook\\ch16\\077. jpg")); g.FillRectangle(tb, 40, 0, 300, 200);

  48. 範例16-3b • 示範以上Brush 類別的用法。

More Related