CH09

繪圖與聲音

繪圖與聲音 電腦繪圖的基本觀念 在開始說明繪圖類別之前，我們先了解一下Visual Basic 2005的座標象限。在Visual Basic 2005中表單或控制項的左上角被定義為原點，x座標與y座標皆為0，x座標向右邊越來越大，y座標則是越向下越大。 電腦畫面、圖片影像等等電腦上的元素都是藉由「像素(Pixel)」這個螢幕上的小點所組合而成，我們在利用VB.NET繪製電腦圖形或是動畫時，程式會藉由繪出每一個螢幕座標上的像素，來控制顯示在螢幕上的影像。當您繪製動畫時，則透過不斷的變化該像素來完成。 0,0

繪圖與聲音 電腦繪圖的基本觀念 要透過Visual Basic 2005來繪圖，必須了解GDI+，.NET 類別庫當中，您可以看到在System.Drawing命名空間底下提供了對GDI+基本繪圖功能的存取類別，底下我們分別列舉一些常用到的繪圖功能說明。 何謂GDI+？ .NET Framework 提供了管理與繪製圖形的應用程式發展介面 (Application Programming Interface，API)，稱之為GDI+。 GDI+ 是 Windows 繪圖裝置介面 (GDI) 的進階功能。使用 GDI+，您可以輕易地建立圖形、和繪製文字，並將圖形影像當做物件來管理。 GDI+ 的設計目的是要提升效能同時又方便使用。您可以使用 GDI+，在 Windows Form 和控制項上呈現圖形影像。

繪圖與聲音 Bitmap類別 Bitmap是一張畫布，我們可以在Bitmap上面來作圖，底下是幾個初始化Bitmap 的方式： 定義一張畫布，且以 PictureBox1.Image控制項中的資料當作畫布預設內容 ‘利用PictureBox1的Image屬性值初始化bmpA Dim bmpA As New Bitmap(Me.PictureBox1.Image) 'bmpB讀取C槽下面的圖片初始化 Dim bmpB As New Bitmap("C:\test.jpg")   '藉由輸入bmpC的寬度與高度初始化bmpC Dim bmpC As New Bitmap(800, 600) 定義了一張空白的畫布，以指定的圖檔作為畫布的預設內容 定義了一張800x600的空白畫布

繪圖與聲音 Bitmap類別的重要屬性與方法 公用屬性 PixelFormat 指定或取得Bitmap的像素格式。 公用方法 Clone Dispose 釋放Bitmap取得的所有資源。 GetPixel 取得在Bitmap上指定像素的顏色。 MakeTransparent 把Bitmap的背景顏色去除。(底色變成透明) Save 將在Bitmap上的像素資料存成檔案。 SerPixel 傳入像素位置以及顏色，設定在Bitmap上指定像素的顏色。

繪圖與聲音 Clone與Save用法 EX： CH09-01\Form1.vb '用圖片路徑初始化bmp Dim bmp As New Bitmap("C:\test.jpg") Dim bmp1 As Bitmap '設定要擷取的範圍，範圍從左上角的(0,0)開始寬度與長度分別是(400,600) Dim rect As New Rectangle(0, 0, 400, 600) '用擷取bmp上的某一個範圍重新設定bmp bmp1 = bmp.Clone(rect, bmp.PixelFormat) '將bmp上的圖像資料存成檔案 bmp1.Save("C:\clone-test.jpg") '釋放bmp持有的資源 bmp.Dispose() 請注意，當我們要設定擷取範圍大小時，必須透過『Rectangle』物件。該物件用來設定一個矩形範圍。 使用Clone指令時，則將剛才建立的範圍傳入。

繪圖與聲音 MakeTransparent用法 0001： '取得在PictureBox1上的像素資料 0002： Dim bmp As New Bitmap(Me.PictureBox1.Image) 0003： '將顏色為白色的像素改成透明無色 0004： bmp.MakeTransparent(Color.White) 0005： '將修改後的像素資料放到PictureBox2 0006： Me.PictureBox2.Image = bmp 用MakeTransparent方法去除掉背景後的圖片放在PictureBox2。

繪圖與聲音 Brush類別 Brush常被稱謂『筆刷』，主要用來作為填滿繪圖區域的顏色樣式，在建立「Brush」物件時，您可以從下拉選項中，直接選取您需要的顏色： 藉顏色的設定新增Brush類別。

繪圖與聲音 Font類別 Font類別的主要功能為，在畫布上繪製文字時，提供指定的文字樣式： '建立fontA物件，採用表單的Font屬性初始化，且文字樣式是粗體文字 Dim fontA As New Font(Me.Font, FontStyle.Bold)   '建立fontB物件，自己填入參數，依序為（字型樣式、字型大小、字型樣式） Dim fontB As New Font("新細明體", 12, FontStyle.Regular) FontStyle 列舉型別大多與Font類別搭配使用，用來設定文字的樣式，樣式有底下幾種選擇： FontStyle.Bold 粗體文字。 FontStyle.Italic 斜體文字。 FontStyle.Regular 一般文字。 FontStyle.Strikeout 加上刪除線的文字。 FontStyle.Underline 加上底線的文字。

繪圖與聲音 Graphics 類別 有了前面的基礎知識之後，我們來看繪圖功能的重點項目，也就是『Graphics』類別： '要在表單上繪圖時，使用底下指令，再透過GraphicsA來針對表單繪圖 Dim GraphicsA As Graphics = Me.CreateGraphics   '要在PictureBox1上繪圖時，使用底下指令，再透過GraphicsA來針對PictureBox1繪圖 Dim GraphicsB As Graphics = Me.PictureBox1.CreateGraphics '當我們要在Bitmap上繪圖時，用底下的指令 Dim bmp As New Bitmap(200, 200) Dim GraphicsC As Graphics = Graphics.FromImage(bmp) '當我們要在image物件上繪圖時，用底下的指令 Dim image As Image = System.Drawing.Image.FromFile("C:\test.jpg") Dim GraphicsD As Graphics = Graphics.FromImage(image) 也可以在一張空白畫布上繪圖 載入既有的圖形，並且在其上繪圖

繪圖與聲音 Graphics 類別 正確的建立了『Graphics』物件之後，我們就可以針對Graphics指向的畫布或物件來繪製圖形，底下是Graphics物件可用的繪圖指令： 公用方法 Clear 傳入參數，使用某個指定的顏色，把畫布上所有像素顏色用這個指定的顏色取代。 Dispose 釋放Graphic取得的所有資源。 DrawBeziers 繪製貝茲曲線，讓點與點之間的聯繫有弧度。 DrawClosedCurve 繪製封閉的曲線。DrawClosedCurve會自動將開始的點與結束的點連接起來。 DrawCurve 繪製曲線。 DrawEllipse 繪製橢圓形。 DrawImage 將一組像素資料繪製到表單或控制項；當沒有指定圖像大小時，像素資料會以原始大小繪製。 DrawLine 繪製直線。 DrawLines 繪製多條直線。(傳入數個點，連接每個點，在點與點之間用直線連接。) DrawPolygon 繪製多邊型。(連接多個點，在點與點之間用直線連接。) DrawPolygon會自動將開始的點與結束的點連接起來。 DrawRectangle 繪製四邊形。 DrawString 繪製文字。 FillColsedCurve 用顏色填滿封閉曲線中的空間。與DrawClosedCurve相同，FillColsedCurve會自動將開始的點與結束的點連接起來。 FillEllipse 繪製圓形，並用指定的顏色填滿圓中的空間。 FillRectangle 繪製多邊型，並用指定的顏色填滿四邊形中的空間。

繪圖與聲音 DrawEllipse、DrawLine、DrawRectangle EX： CH09-02\Form1.vb '將表單的繪圖介面指定給g Dim g As Graphics = Me.CreateGraphics '圓的範圍 Dim rect As New Rectangle(50,50, 200, 100) '畫圓 g.DrawEllipse(Pens.Black, rect) 從左上角的（50,50）向右邊（x軸）增加200，向下增加100，所構成的四方形內所構成的圓。

繪圖與聲音 DrawEllipse、DrawLine、DrawRectangle 相對於DrawEllips，DrawLine與DrawRectangle在用法上比較直覺： EX： CH09-03\Form1.vb '將表單的繪圖介面指定給g Dim g As Graphics = Me.CreateGraphics '畫直線。用指定的顏色(Black)，建立一條連接（0,0）與（100,100）這兩個點的直線 g.DrawLine(Pens.Black, 0, 0, 100, 100) '畫矩形。範圍從(100,100)開始，寬度與長度分別是(50,50) g.DrawRectangle(Pens.Black, 100, 100, 50, 50) 線段（0,0）到（100,100）。 方形，起始點（100,100），寬度與高度皆是50。

繪圖與聲音 DrawBeziers、DrawCurve與DrawLines EX： CH09-04\Form1.vb 0001： '宣告要連結的點 0002： Dim point1 As New Point(100, 50) 0003： Dim point2 As New Point(200, 80) 0004： Dim point3 As New Point(300, 200) 0005： Dim point4 As New Point(50, 250) 0006： 0007： '將點存成點陣列 0008： Dim Points() As Point = {point1, point2, point4, point3} 0009： 0010： '將表單的繪圖介面指定給g 0011： Dim g As Graphics = Me.CreateGraphics 0012： 0013： '新增pen物件 0014： Dim OrangePen As New Pen(Color.Orange, 2) 0015： Dim BluePen As New Pen(Color.Blue, 2) 0016： Dim YellowPen As New Pen(Color.Yellow, 2) 0017： 0018： '畫貝茲曲線，線條顏色為橘色 0019： g.DrawBeziers(OrangePen, Points) 0020： '畫曲線，線條顏色為藍色 0021： g.DrawCurve(BluePen, Points) 0022： '畫線段，線條顏色為黃色 0023： g.DrawLines(YellowPen, Points) 藍色線段是用「g.DrawCurve」產生出來的。 橘色線段是用「g.DrawBeziers」產生出來的。 黃色線段是用「g.DrawLines」產生出來的。

繪圖與聲音 FillColsedCurve、FillEllipse、FillRectangle EX： CH09-05\Form1.vb 接著，我們則來看幾個填滿封閉圖形的方法。FillClosedCurve用來填滿封閉的區域，而該區域的決定，則與剛才我們介紹過的DrawCurve相同，是以數個點來決定的曲線區域： EX： CH09-05\Form1.vb 0001： '宣告要連結的點 0002： Dim point1 As New Point(100, 50) 0003： Dim point2 As New Point(200, 80) 0004： Dim point3 As New Point(300, 200) 0005： Dim point4 As New Point(50, 250) 0006： 0007： '將點存成點陣列 0008： Dim Points() As Point = {point1, point2, point3, point4} 0009： 0010： '將表單的繪圖介面指定給g 0011： Dim g As Graphics = Me.CreateGraphics 0012： g.FillClosedCurve(Brushes.Black, Points) Brushes筆刷，用在填滿圖形內部空間時。其實FillColsedCurve、FillEllipse、FillRectangle與DrawColsedCurve、 DrawEllipse、DrawRectangle的差別只在於是否有填滿圖形內部空間的顏色而已；如果要填滿圖形內部空間，就必須使用Brush物件。

繪圖與聲音 DrawImage、DrawString 如同在表單上使用PictureBox透過Image屬性設定像素資料，或是利用Label透過Text屬性設定文字資料，再把結果呈現在表單上一樣；Graphic能透過DrawImage、DrawString這兩個方法，將像素資料、文字字串繪製在指定的表單或控制項中；用控制項的屬性設定或是用Graphic繪圖的效果，兩者出現的效果相同，差別只在產生畫面的過程與方式不同而已，呈現出來的效果近乎一致。 0001： '將表單的繪圖介面指定給g 0002： Dim g As Graphics = Me.CreateGraphics 0003： 0004： '用Label1的Font屬性設定繪圖的文字樣式，文字的起始點位置在（220,20） 0005： g.DrawString("時鐘↓", Me.Label1.Font, Brushes.Black, 220, 20) 0006： 0007： '取得PictureBox1上的像素資料，並且將圖形個起始位置設在（200,50），圖形大小則是與PictureBox1的大小相同 0008： g.DrawImage(Me.PictureBox1.Image, New Rectangle(200, 50, Me.PictureBox1.Width, Me.PictureBox1.Height))

繪圖與聲音 Pen 類別 Pen類別主要用來指定繪製圖形時的線條樣式，我們在前面繪製線條的範例中，已經多次使用過Pen類別： Dim p As New Pen(Color.Black) '用顏色與線段大小新增Pen物件 Dim p As New Pen(Color.Black , 2) 公用屬性 Brush 設定筆刷顏色。 CustomEndCap 線段或曲線終點的樣式。 CustomStartCap 線段或曲線起點的樣式。 DashPattern 自訂線段的樣式。 DashStyle 選擇線段的樣式。 LineJoin 選擇連續直線間的交接點要用什麼方式呈現。 Transform 設定圖形的旋轉角度、放大或縮小。 Width 設定線條寬度。

繪圖與聲音 Pen 類別 EX： CH09-07\Form1.vb Dim g As Graphics = Me.CreateGraphics '用顏色與線段大小新增Pen物件 Dim p As New Pen(Color.Red, 2) '指定以點來繪製 p.DashStyle = Drawing2D.DashStyle.Dot '將Pen傳給DrawLine作為參數 g.DrawLine(p, 10, 10, 250, 150)

繪圖與聲音 CustomStartCap、CustomEndCap 線段起點是菱形，終點則是三角形。 CustomStartCap、CustomEndCap屬性，是用以設定線段或曲線的起點樣式和終點樣式；CustomStartCap、CustomEndCap的屬性設定，必須透過GraphicsPath類別以及CustomLineCap類別。 GraphicsPath主要是用來表示一系列直線或曲線的連接；CustomLineCap則主要用於將GraphicsPath物件中所加入的線條集合呈現出來。 EX： CH09-08\Form1.vb 0001： 'Form1_Paint 0002： Private Sub Form1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles Me.Paint 0003： 0004： ' 加入在線段或曲線的起始圖形 0005： Dim startGP As New GraphicsPath() 0006： '加入四條直線 0007： startGP.AddLine(0, 0, -2, 2) 0008： startGP.AddLine(-2, 2, 0, 4) 0009： startGP.AddLine(0, 4, 2, 2) 0010： startGP.AddLine(2, 2, 0, 0) 0011： 0012： ' 封裝線條端點 0013： Dim start_cap As New CustomLineCap(Nothing, startGP) 0015： ' 加入在線段或曲線的終點圖形 0016： Dim endGP As New GraphicsPath EX： CH09-08\Form1.vb 0017： '加入兩條直線 0018： endGP.AddLine(0, 0, -2, 2) 0019： endGP.AddLine(2, 2, 0, 0) 0020： 0021： ' 封裝線條端點 0022： Dim end_cap As New CustomLineCap(Nothing, endGP) 0023： 0024： ' 產生pen物件 0025： Dim myPen As New Pen(Color.Black, 3) 0026： '設定線段或曲線的開始樣式 0027： myPen.CustomStartCap = start_cap 0028： '設定線段或曲線的結束樣式 0029： myPen.CustomEndCap = end_cap 0030： 0031： ' 畫直線 0032： e.Graphics.DrawLine(myPen, 50, 50, 150, 50) 0033： End Sub

繪圖與聲音 DashPattern、DashStyle DashPattern用以自訂線段的樣式，DashStyle則為列舉型別，提供一組已經設定好的線條樣式，讓您選擇；DashStyle的預設屬性為Solid，是一條普通的直線。下圖中的兩段線條，在上面的那條是一般我們沒有給DashPattern屬性或DashStyle屬性時，所畫出的預設直線；下面的那條線，則是將DashPattern屬性設定為『DashStyle.DashDot』而來的 上面的直線是一般我們畫的直線，下面的直線則是透過設定DashPattern屬性而產生的。

繪圖與聲音 DashPattern、DashStyle DashPattern屬性是由一個Single陣列所組成的，位在陣列奇數位的元素，代表線段長度，偶數位的元素則代表空白長度；在構成線條時，陣列中的每一個元素還會與線條寬度作相乘的動作，所以同樣的Single陣列會因為線條寬度的不同而不一樣。 0008： myPen.DashPattern = New Single() {10, 2, 4, 8} 從上面程式碼中設計構成DashPattern的元素『New Single() {10, 2, 4, 8}』中我們可以知道，線條一開始會畫一段長度為10的線段，然後留2個單位的空白，接著再畫4個單位的線段，再留8個單位的空白…然後就一直重複這個循環，直到此線條結束(如下圖第一條線)。 底下圖中的兩條線，則是我們用一個相同的Single陣列來製成的，但是您會發現線條的寬度不同，上面比較細的線條寬度為5，下面比較粗的線條寬度為10。 除了DashPattern的元素外，線條寬度也會影響線段長度。

繪圖與聲音 LineJoin 設定連續線段或矩形（四角形）連接時，決定交接處呈現圓滑的角度，或是尖銳的角度： Pen的LineJoin屬性設為『Drawing2D.LineJoin. Miter』。 Pen的LineJoin屬性設為『Drawing2D.LineJoin.Round』。

繪圖與聲音 LineJoin EX： CH09-10\Form1.vb 0001： 'Form1_Paint 其程式碼如下： EX： CH09-10\Form1.vb 0001： 'Form1_Paint 0002： Private Sub Form1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles Me.Paint 0003： ' 產生pen物件 0004： Dim myPen As New Pen(Color.Black) 0005： 0006： '設定pen物件的線條寬度 0007： myPen.Width = 10 0008： 0009： ' 將LineJoin屬性設為Miter，尖角 0010： myPen.LineJoin = Drawing2D.LineJoin.Miter 0011： '畫四方形 0012： e.Graphics.DrawRectangle(myPen, New Rectangle(50, 50, 100, 100)) 0013： 0014： ' 將LineJoin屬性設為Round，圓滑角度 0015： myPen.LineJoin = Drawing2D.LineJoin.Round 0016： '畫四方形 0017： e.Graphics.DrawRectangle(myPen, New Rectangle(170, 50, 100, 100)) 0018： End Sub

繪圖與聲音 透過SoundPlayer來撥放聲音 EX： CH09-12\Form1.vb '新增SoundPlayer物件 在Visual Basic 2005中要撥放聲音檔有許多不同的方式，在.NET 2.0原生的類別庫當中，您可以使用SoundPlayer來撥放.wav格式的聲音檔案。 EX： CH09-12\Form1.vb '新增SoundPlayer物件 Dim sp As New System.Media.SoundPlayer '設定音效撥放路徑 sp.SoundLocation = "C:\music.wav" '取得音效 sp.LoadAsync() '判斷音效是否取得 If sp.IsLoadCompleted = True Then '循環撥放音效 sp.Play() sp.PlayLooping() End If

繪圖與聲音 以My.Computer.Audio來撥放聲音 在Visual Basic 2005當中，您也可以透過My類別直接的撥放聲音： 想要讓音效停止播放時，您可以呼叫『My.Computer.Audio.Stop()』。 EX： CH09-13\Form1.vb 'Button1_Click Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click '按下Button1後，撥放c槽下面的music.wav檔案，模式為重複撥放 My.Computer.Audio.Play("C:\music.wav", AudioPlayMode.BackgroundLoop) End Sub 'Button2_Click Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click '按下Button2後，停止撥放 My.Computer.Audio.Stop()