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

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

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

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

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

5、bel, PictureBox 及TextBox 等.), 當(dāng)上述對(duì)象呼叫 CreateGraphics 方法后, 會(huì)傳回一個(gè)Graphics 對(duì)象, 您可利用此一 Graphics 對(duì)象在建立它的對(duì)象上繪圖。例如以下敘述可取得窗體的 Graphics 對(duì)象。 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); 純藍(lán)色畫布： 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 類別對(duì)象的協(xié)助, 其中 Graphics 對(duì)象就好比一塊畫布, 而 Pen 類別對(duì)象就是畫筆了。以下敘述可產(chǎn)生畫筆對(duì)象, 畫筆的線條顏色為黑色, 線條粗細(xì)為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（繪制直線） 請(qǐng)寫一程序, 當(dāng)使用者按一下按鍵時(shí), 可于窗體繪制一條起點(diǎn)為 (10,10), 終點(diǎn)為(300, 100) 的直線。,案例2： （繪制弧線） 將於一個(gè)

10、左上角位於 (50, 50), 寬度為 100, 高度為 350 的矩形內(nèi), 繪出一起始角為 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 的矩形內(nèi), 繪出一起始角為 0 度, 弧角為 90 度的扇形。,案例4： （繪制折線） 繪出一條起點(diǎn)為 (100, 10), 終點(diǎn)為 (200, 110), 並通過 (120, 70) 及 (160, 30) 兩點(diǎn)的連續(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、一個(gè)封閉多邊形, 其起點(diǎn)為 (100, 10), 終點(diǎn)為(300, 10), 並通過 (120, 70) 及 (200,110) 兩點(diǎn), 最後此方法會(huì)在起點(diǎn)與終點(diǎn)之間補(bǔ)上一條直線。,案例6： （繪制文字） 於座標(biāo) (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屬性 取得或設(shè)定線條的樣式, 此樣式必須是 DashStyle 列舉型別的成員,例如, 以下敘述可將 drawPen 畫筆物件的線條樣式設(shè)定為虛線。 drawPen.DashStyle = System.Drawing.Drawing2D.DashStyle.Dot;,小技巧： 可於程式開頭使用 using System, Drawing, Drawing2D;“ 先行宣告,以避免鍵入全名。,4.4 Pen類別簡介,StartCap 與End

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

17、如, 橢圓形及扇形)的能力, 若要對(duì)某一塊區(qū)域進(jìn)行填色的動(dòng)作, Pen 類別就沒有辦法做到了, 而 Brush 類別就是用來對(duì)各種封閉圖形填色的工具。針對(duì)各種需要, GDI+ 提供了五種 Brush 的衍生類別, 分別是 SolidBrush (單色) TextureBrush (材質(zhì)) HatchBrush (預(yù)設(shè)圖案) PathGradientBrush (自定義) LinearGradientBrush (漸層)等, 以下僅針對(duì) SolidBrush (單色)與 TextureBrush (材質(zhì))類別作進(jìn)一步的介紹。,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（繪制填充矩形）： 在一個(gè)左上角位於 (10, 10), 寬度 300, 高度 100 的矩形內(nèi)填入藍(lán)色。

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（繪制填充圖形）： 在一個(gè)左上

20、角位於 (10,10), 寬度為 300, 高度為 100 的矩形內(nèi)填入檔名為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（填充橢圓）： 在指定左上角座標(biāo) (50, 30), 寬度 (200) 及高度(100

21、) 的矩形內(nèi)繪製一個(gè)填滿顏色的橢圓。,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（填充扇形）： 在指定左上角座標(biāo) (50, 10), 寬度 (150) 及高度(100) ，初始角度為0，終止角度為90的扇形內(nèi)繪製一個(gè)填滿顏色的扇形。,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（填充多邊形）： 填充一個(gè)封閉多邊形, 其起點(diǎn)為 (100, 10), 終點(diǎn)為(160, 30), 並通過 (120, 70) 及 (200,110) 兩點(diǎn), 最後此方法會(huì)在起點(diǎn)與終點(diǎn)之間補(bǔ)上一條直線。,案例6HatchBrush（系統(tǒng)圖案填充筆觸）： 填充矩形，前景色為紅，背景色為藍(lán)，波形圖案； （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)復(fù)雜漸變填充筆觸）： 填充矩形，由紅色逐漸向黃色混合漸變；,4.5 Brush類別簡介,綜合練習(xí),4.6 Font類,繪制文本時(shí)，可設(shè)置字體的樣式，字體的大小，以及字體的種類。還是通過圖形對(duì)象，在窗體或控件上直接畫出，調(diào)用Graphics類DrawString方法。在調(diào)

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

27、Graphics類中對(duì)于坐標(biāo)系統(tǒng)操作的幾個(gè)方法進(jìn)行坐標(biāo)變換。,小實(shí)驗(yàn),小實(shí)驗(yàn)：平移,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、 ,/ / 坐標(biāo)移動(dòng) / / / 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 坐標(biāo)平移與縮放,小實(shí)驗(yàn),小實(shí)驗(yàn)：縮放,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(); ,/ / 坐標(biāo)縮放 / /

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);/關(guān)鍵變換語句：放大3倍 g.DrawRectangle(myPen, 0, 0, 200, 100); g.DrawEllipse(myPen, 0, 0, 200, 100); g.Dispose(); myPen.Dispose(); ,4.8

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

32、：繪制坐標(biāo)軸,private void button1_Click(object sender, EventArgs e) /繪制坐標(biāo)軸開始 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 繪制圖形,小實(shí)驗(yàn),小實(shí)驗(yàn)：繪制餅形圖,/ / 繪制餅形圖 / / / private void button2_Click(object sender, EventArgs e) Graphics g = this.CreateGraphics(); g.Clear(Color.White); Pen p = new Pen(Color.Blue); Recta