《C#_Win實踐開發(fā)教程》chp4.圖型圖像GDI編程.ppt

1、-基于C#語言,主講教師：錢 哨 本課學時：72課時 聯(lián)系方式：,Windows程序設計,第四章、圖型圖像GDI編程,本章主要內容介紹4.1 繪圖的基本觀念4.2 繪圖屬性與方法4.3 繪圖相關類別,CONTENT,本章學習目標：,了解System. Drawing 命名空間 掌握矢量圖形和繪制對象 可以繪制簡單的幾何圖形 掌握圖像的基本處理技術,4.1 什么是GDI+,首先先了解什么是 GDI 呢？GDI 是從 Windows 95 到 Windows 2000 隨附的舊版繪圖裝置接口 (Graphics Device Interface), 是屬于繪圖方面的 API (Applicatio

2、n Programming Interface)。因為應用程序不能直接控制硬件, 所以當我們要進行繪圖的動作時, 必須透過 GDI 才能完成。 那 GDI+ 又是什么呢？GDI+ 是 GDI 的后續(xù)產品, 是一種繪圖裝置接口, 可將應用程序和繪圖硬件分隔, 讓我們能夠撰寫與裝置無關的應用程序。它可以讓我們不需注意特定顯示裝置的詳細數(shù)據(jù), 便可在屏幕或打印機顯示信息。我們可以呼叫 GDI+ 類別所提供的方法, 然后這些方法會適當?shù)睾艚刑囟ǖ难b置驅動程序, 而完成繪圖。,4.2 System. Drawing 命名空間,System.Drawing 命名空間包含許多基本與進階的繪圖類別, 供程序開

3、發(fā)者來完成各種繪圖功能。本章在此僅介紹 System.Drawing 命名空間中一些常用的繪圖類別。,4.2 System. Drawing 命名空間,在GDI+中所采用的坐標系統(tǒng)，與平時人們較常用的坐標系統(tǒng)不同，主要差別在于，一般的二維坐標系，x軸與y軸分別是往右往上遞增(左圖)，而GDI+所采用的坐標系，x軸與y軸則分別是往右往下遞增(右圖),1、坐標系統(tǒng),4.2 System. Drawing 命名空間,在數(shù)學定義中，坐標上的最基本元素：點，其實是個長度與寬度都無窮小的概念單位，但是在計算器圖學中，作畫的最基本元素是像素(pixel) 當我們的屏幕分辨率設定為1024*768時，表示在x

4、軸橫坐標總共可以畫1024個像素，在y軸縱坐標總共可以畫768個像素,2、繪圖基本單位,4.3 Graphics類別簡介,Graphics 類別是 GDI+ 的核心, 若要繪制任何圖形, 都需要先取得 Graphics對象, 設定它的屬性, 呼叫它的方法來完成繪圖的工作。由于 Graphics 類別并未公開其建構子, 故無法以建構子來建立一個 Graphics 對象, 而是要從您所要繪圖的組件取得一個 Graphics 對象, 其語法如下： Graphics g = 物件.CreateGraphics； 以上敘述中的對象可為窗體 (Form) 及 Control 類別的衍生類別 (例如, La

5、bel, PictureBox 及TextBox 等.), 當上述對象呼叫 CreateGraphics 方法后, 會傳回一個Graphics 對象, 您可利用此一 Graphics 對象在建立它的對象上繪圖。例如以下敘述可取得窗體的 Graphics 對象。 Graphics g = this.CreateGraphics；,4.3 Graphics類別簡介,private void Form10_Paint(object sender, PaintEventArgs e) Graphics g = e.Graphics; ,1、在FORM的Paint方法中創(chuàng)建,2、直接創(chuàng)建,public

6、Form10() InitializeComponent(); Graphics g; g=this.CreateGraphics(); ,3、由圖像創(chuàng)建,Bitmap mybitmap = new Bitmap(c:1.jpg); Graphics g = Graphics.FromImage(mybitmap);,4.3 Graphics類別簡介,private void Form10_Paint(object sender, PaintEventArgs e) e.Graphics.Clear(Color.Red); ,4、填充背景顏色案例,指定顏色也可以利用RGB來指定,如: 純紅色畫

7、布： e.Graphics.Clear(Color.FromARGB(255,0,0); 純綠色畫布： e.Graphics.Clear(Color.FromARGB(0,255,0); 純藍色畫布： e.Graphics.Clear(Color.FromARGB(0,0,255);,5、表單paint事件繪制圖形,private void Form10_Paint(object sender, PaintEventArgs e) Pen drawPen = new Pen(Color.Black, 3); e.Graphics.DrawLine(drawPen, 10, 10, 300, 1

8、00); ,4.4 Pen類別簡介,C# 的繪圖至少必須藉助 Graphics 與 Pen 類別對象的協(xié)助, 其中 Graphics 對象就好比一塊畫布, 而 Pen 類別對象就是畫筆了。以下敘述可產生畫筆對象, 畫筆的線條顏色為黑色, 線條粗細為3。 drawPen = New Pen(Color.Black, 3)； 繪圖方法 Graphics 類別的常用繪圖方法有 DrawLine(直線)、 DrawRectangle (矩形)、 DrawEllipse (橢圓)、 DrawCurve (曲線)、 DarwArc (弧線)、 DrawPie (扇形)、 DrawLines (多邊形)、

9、DrawPolygon (封閉多邊形) DrawBezier (貝茲曲線)等。,4.4 Pen類別簡介,private void Form10_Click(object sender, EventArgs e) Graphics g = this.CreateGraphics(); Pen mypen = new Pen(Color.Red, 5); g.DrawLine(mypen, 10, 10, 300, 100); ,案例1（繪制直線） 請寫一程序, 當使用者按一下按鍵時, 可于窗體繪制一條起點為 (10,10), 終點為(300, 100) 的直線。,案例2： （繪制弧線） 將於一個

10、左上角位於 (50, 50), 寬度為 100, 高度為 350 的矩形內, 繪出一起始角為 0 度, 弧角為120 度的弧線。,private void Form10_Paint(object sender, PaintEventArgs e) Pen drawPen = new Pen(Color.Red, 3); e.Graphics.DrawArc(drawPen, 50, 50, 100, 350, 0, 120); ,4.4 Pen類別簡介,private void Form10_Click(object sender, EventArgs e) Graphics g = this

11、.CreateGraphics(); e.Graphics.DrawPie(drawPen, 50, 50, 100, 50, 0, 90); ,案例3： （繪制扇形） 左上角位於 (50, 50), 寬度為 100, 高度為 50 的矩形內, 繪出一起始角為 0 度, 弧角為 90 度的扇形。,案例4： （繪制折線） 繪出一條起點為 (100, 10), 終點為 (200, 110), 並通過 (120, 70) 及 (160, 30) 兩點的連續(xù)線段。,private void Form10_Paint(object sender, PaintEventArgs e) Graphics g

12、 = 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); ,4.4 Pen類別簡介,private void Form10_Paint(object send

13、er, PaintEventArgs e) Graphics 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(200, 110); p4 = new Point(300, 10); Point points = p1, p2, p3, p4 ; g.DrawPolygon(drawPen, points); ,案例5： （繪制多邊形） 繪出

14、一個封閉多邊形, 其起點為 (100, 10), 終點為(300, 10), 並通過 (120, 70) 及 (200,110) 兩點, 最後此方法會在起點與終點之間補上一條直線。,案例6： （繪制文字） 於座標 (100, 50) 的位置繪製文字,private void Form10_Paint(object sender, PaintEventArgs e) Graphics g = this.CreateGraphics(); Font drawFont = new Font(隸書, 15); SolidBrush drawBrush = new SolidBrush(Color.Bl

15、ue); g.DrawString(歡迎光臨, drawFont, drawBrush, 100, 50); ,4.4 Pen類別簡介,DashStyle屬性 取得或設定線條的樣式, 此樣式必須是 DashStyle 列舉型別的成員,例如, 以下敘述可將 drawPen 畫筆物件的線條樣式設定為虛線。 drawPen.DashStyle = System.Drawing.Drawing2D.DashStyle.Dot;,小技巧： 可於程式開頭使用 using System, Drawing, Drawing2D;“ 先行宣告,以避免鍵入全名。,4.4 Pen類別簡介,StartCap 與End

16、Cap屬性 取得或設定線條的端點樣式, 此樣式必須 LineCap 列舉型別的成員, 如下表所示。 例如, 以下敘述可將 drawPen 畫筆對象的線條端點設為箭頭及菱形。 drawPen.StartCap = System.Drawing.Drawing2D.LineCap.ArrowAnchor; drawPen.EndCap = System.Drawing.Drawing2D.LineCap.DiamondAnchor;,4.4 Pen類別簡介,綜合實驗：,4.5 Brush類別簡介,Graphics 類別像是一塊畫布, Pen 類別像是一支畫筆, 但是這支畫筆只具有畫直線及外框 (例

17、如, 橢圓形及扇形)的能力, 若要對某一塊區(qū)域進行填色的動作, Pen 類別就沒有辦法做到了, 而 Brush 類別就是用來對各種封閉圖形填色的工具。針對各種需要, GDI+ 提供了五種 Brush 的衍生類別, 分別是 SolidBrush (單色) TextureBrush (材質) HatchBrush (預設圖案) PathGradientBrush (自定義) LinearGradientBrush (漸層)等, 以下僅針對 SolidBrush (單色)與 TextureBrush (材質)類別作進一步的介紹。,4.5 Brush類別簡介,private void Form10_P

18、aint(object sender, PaintEventArgs e) Pen drawPen = new Pen(Color.Red, 3); SolidBrush mybrush = new SolidBrush(Color.Blue); e.Graphics.DrawRectangle(drawPen, 10, 10, 300, 100); e.Graphics.FillRectangle(mybrush, 10, 10, 300, 100); ,案例1FillRectangle（繪制填充矩形）： 在一個左上角位於 (10, 10), 寬度 300, 高度 100 的矩形內填入藍色。

19、,private void Form10_Paint(object sender, PaintEventArgs e) Pen drawPen = new Pen(Color.Red, 3); TextureBrush mybrush = new TextureBrush(Image.FromFile(c:1.jpg); e.Graphics.DrawRectangle(drawPen, 10, 10, 300, 100); e.Graphics.FillRectangle(mybrush, 10, 10, 300, 100); ,案例2FillRectangle（繪制填充圖形）： 在一個左上

20、角位於 (10,10), 寬度為 300, 高度為 100 的矩形內填入檔名為c:1.jpg 的圖檔。,4.5 Brush類別簡介,private void Form10_Paint(object sender, PaintEventArgs e) Graphics g = this.CreateGraphics(); SolidBrush sb = new SolidBrush(Color.Blue); g.FillEllipse(sb, 50, 30, 200, 100); ,案例3FillEllipse（填充橢圓）： 在指定左上角座標 (50, 30), 寬度 (200) 及高度(100

21、) 的矩形內繪製一個填滿顏色的橢圓。,private void Form10_Paint(object sender, PaintEventArgs e) Graphics g = this.CreateGraphics(); SolidBrush sb = new SolidBrush(Color.Yellow); g.FillPie(sb, 50, 10, 150, 100, 0, 90); ,案例4FillPie（填充扇形）： 在指定左上角座標 (50, 10), 寬度 (150) 及高度(100) ，初始角度為0，終止角度為90的扇形內繪製一個填滿顏色的扇形。,4.5 Brush類別簡

22、介,private void Form10_Paint(object sender, PaintEventArgs e) Graphics 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.F

23、illPolygon(sb, points); ,案例5FillPolygon（填充多邊形）： 填充一個封閉多邊形, 其起點為 (100, 10), 終點為(160, 30), 並通過 (120, 70) 及 (200,110) 兩點, 最後此方法會在起點與終點之間補上一條直線。,案例6HatchBrush（系統(tǒng)圖案填充筆觸）： 填充矩形，前景色為紅，背景色為藍，波形圖案； （using System.Drawing.Drawing2D;）,private void Form10_Paint(object sender, PaintEventArgs e) Pen drawPen = new

24、Pen(Color.Red, 3); HatchBrush mybrush = new HatchBrush(HatchStyle.Wave, Color.Red, Color.Blue); e.Graphics.FillRectangle(mybrush, 10, 10, 300, 100); ,4.5 Brush類別簡介,private void Form10_Paint(object sender, PaintEventArgs e) Pen drawPen = new Pen(Color.Red, 3); LinearGradientBrush mybrush = new Linear

25、GradientBrush(ClientRectangle, Color.Red, Color.Yellow, LinearGradientMode.Vertical); e.Graphics.FillRectangle(mybrush, 10, 10, 500, 500); ,案例7LinearGradientBrush（系統(tǒng)復雜漸變填充筆觸）： 填充矩形，由紅色逐漸向黃色混合漸變；,4.5 Brush類別簡介,綜合練習,4.6 Font類,繪制文本時，可設置字體的樣式，字體的大小，以及字體的種類。還是通過圖形對象，在窗體或控件上直接畫出，調用Graphics類DrawString方法。在調

26、用方法前需先設置字體的選項。需要注意的是，不同的字體繪制出的文本寬度不同。,在窗體上直接寫出“Windows應用程序設計”，使用隸書、斜體，調整漢字顯示的位置，修改源代碼：,小實驗,小實驗：寫字,Font f = new Font(隸書,24,FontStyle.Italic); Pen p = new Pen(Color.Blue); g.DrawString(Windows應用程序設計,f, p.Brush,50,50);,4.7 坐標平移與縮放,我們看到，前面的例子都是默認以繪圖界面的左上角作為原點，坐標值以像素為單位，畫圖以左上角為參照點，繪制每一點都要重新計算，并不方便。因此可以使用

27、Graphics類中對于坐標系統(tǒng)操作的幾個方法進行坐標變換。,小實驗,小實驗：平移,private void Form4_Paint(object sender, PaintEventArgs e) Graphics g = this.CreateGraphics(); g.Clear(Color.White); Pen myPen = new Pen(Color.Red, 3); g.DrawRectangle(myPen, 0, 0, 200, 100); g.DrawEllipse(myPen, 0, 0, 200, 100); g.Dispose(); myPen.Dispose();

28、 ,/ / 坐標移動 / / / private void button1_Click(object sender, EventArgs e) Graphics g = this.CreateGraphics(); g.Clear(Color.White); Pen myPen = new Pen(Color.Red, 3); g.TranslateTransform(30, 120); g.DrawRectangle(myPen, 0, 0, 200, 100); g.DrawEllipse(myPen, 0, 0, 200, 100); g.Dispose(); myPen.Dispose

29、(); ,4.7 坐標平移與縮放,小實驗,小實驗：縮放,private void Form4_Paint(object sender, PaintEventArgs e) Graphics g = this.CreateGraphics(); g.Clear(Color.White); Pen myPen = new Pen(Color.Red, 3); g.DrawRectangle(myPen, 0, 0, 200, 100); g.DrawEllipse(myPen, 0, 0, 200, 100); g.Dispose(); myPen.Dispose(); ,/ / 坐標縮放 / /

30、 / private void button1_Click(object sender, EventArgs e) Graphics g = this.CreateGraphics(); g.Clear(Color.White); Pen myPen = new Pen(Color.Red, 3); g.ScaleTransform(3, 3);/關鍵變換語句：放大3倍 g.DrawRectangle(myPen, 0, 0, 200, 100); g.DrawEllipse(myPen, 0, 0, 200, 100); g.Dispose(); myPen.Dispose(); ,4.8

31、繪制圖形,小實驗,本次實驗目標是掌握繪制曲線的基本要領，可以在任意窗體或控件上找到各相關點，計算繪制曲線，以正弦曲線為例，首先應找到坐標原點，然后找到每一個曲線上的對應點的坐標，在兩點之間畫一條直線，如此反復直到曲線末尾。,實驗步驟（1）： 先定制坐標軸，確定坐標原點，依次畫兩條直線分別作為X,Y軸。因為窗體的左上角坐標為（0，0），在代碼中使用的坐標定位都是相對的，相對于窗體的左上角位置。為了看得清楚，在窗體的四周留出了一部分邊緣，使用絕對像素值，將坐標原點定位在（30，窗體高度-100），按鈕的上方。隨著窗體大小的變化，橫坐標軸根據(jù)窗體高度繪制在不同位置。,4.8 繪制圖形,小實驗,小實驗

32、：繪制坐標軸,private void button1_Click(object sender, EventArgs e) /繪制坐標軸開始 Graphics g = this.CreateGraphics(); Pen myPen = new Pen(Color.Blue, 3); Point oo1 = new Point(30, this.ClientSize.Height - 100); Point oo2 = new Point(this.ClientSize.Width - 50, this.ClientSize.Height - 100); g.DrawLine(myPen, o

33、o1, oo2); Point oo3 = new Point(30, 30); g.DrawLine(myPen, oo1, oo3); Font f = new Font(宋體, 12, FontStyle.Bold); g.DrawString(x, f, myPen.Brush, oo2); g.DrawString(y, f, myPen.Brush, 10, 10); /繪制正弦曲線 float x1, x2,y1,y2,a; x1 = x2 = 0; y1 = 0; y2 = this.ClientSize.Height - 100; for (x2 = 0; x2 this.C

34、lientSize.Width; x2+) a = (float)(2 * Math.PI * x2 / (this.ClientSize.Width); y2 = (float)Math.Sin(a); y2 = (1 - y2) * (this.ClientSize.Height - 100) / 2; g.DrawLine(myPen, x1 + 30, (float)y1, x2 + 30, (float)y2); x1 = x2; y1 = y2; ,4.8 繪制圖形,小實驗,小實驗：繪制餅形圖,/ / 繪制餅形圖 / / / private void button2_Click(object sender, EventArgs e) Graphics g = this.CreateGraphics(); g.Clear(Color.White); Pen p = new Pen(Color.Blue); Recta