1 / 26

CH09

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

mills
Download Presentation

CH09

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. CH09

  2. 繪圖與聲音

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

  4. 繪圖與聲音 電腦繪圖的基本觀念 要透過Visual Basic 2005來繪圖，必須了解GDI+，.NET 類別庫當中，您可以看到在System.Drawing命名空間底下提供了對GDI+基本繪圖功能的存取類別，底下我們分別列舉一些常用到的繪圖功能說明。

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

  6. 繪圖與聲音 Bitmap類別的重要屬性與方法

  7. 繪圖與聲音 Clone與Save用法 請注意，當我們要設定擷取範圍大小時，必須透過『Rectangle』物件。該物件用來設定一個矩形範圍。 使用Clone指令時，則將剛才建立的範圍傳入。

  8. 繪圖與聲音 MakeTransparent用法 用MakeTransparent方法去除掉背景後的圖片放在PictureBox2。

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

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

  11. 繪圖與聲音 Graphics 類別 有了前面的基礎知識之後，我們來看繪圖功能的重點項目，也就是『Graphics』類別： 在使用Graphics之前，必須先取得表單或控制項的繪圖介面參考。 '要在表單上繪圖時，使用底下指令，再透過GraphicsA來針對表單繪圖Dim GraphicsA As Graphics = Me.CreateGraphics '要在PictureBox1上繪圖時，使用底下指令，再透過GraphicsA來針對PictureBox1繪圖 Dim GraphicsB As Graphics = Me.PictureBox1.CreateGraphics '當我們要在Bitmap上繪圖時，用底下的指令 Dim bmp AsNew 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) 也可以在一張空白畫布上繪圖 載入既有的圖形，並且在其上繪圖

  12. 繪圖與聲音 Graphics 類別 正確的建立了『Graphics』物件之後，我們就可以針對Graphics指向的畫布或物件來繪製圖形，底下是Graphics物件可用的繪圖指令：

  13. 繪圖與聲音 DrawEllipse、DrawLine、DrawRectangle DrawEllipse、DrawLine與DrawRectangle（畫圓丶畫直線丶畫方）是幾種最常見的繒圖方式，用法如下： 從左上角的（50,50）向右邊（x軸）增加200，向下增加100，所構成的四方形內所構成的圓。

  14. 繪圖與聲音 DrawEllipse、DrawLine、DrawRectangle 相對於DrawEllips，DrawLine與DrawRectangle在用法上比較直覺： 線段（0,0）到（100,100）。 方形，起始點（100,100），寬度與高度皆是50。

  15. 繪圖與聲音 DrawBeziers、DrawCurve與DrawLines 我們再來看幾組繪製曲線的指令，DrawBeziers、DrawCurve與DrawLines這三者在使用上傳入的參數相同，但繪出的效果完全不同。雖然都是用直線或曲線連接點與點之間的距離，傳入一樣的參數，但是出現的效果卻很不一樣，底下我們用一個例子來表達這三個方法的差異。 藍色線段是用「g.DrawCurve」產生出來的。 橘色線段是用「g.DrawBeziers」產生出來的。 黃色線段是用「g.DrawLines」產生出來的。

  16. 繪圖與聲音 FillColsedCurve、FillEllipse、FillRectangle 接著，我們則來看幾個填滿封閉圖形的方法。FillClosedCurve用來填滿封閉的區域，而該區域的決定，則與剛才我們介紹過的DrawCurve相同，是以數個點來決定的曲線區域： Brushes筆刷，用在填滿圖形內部空間時。其實FillColsedCurve、FillEllipse、FillRectangle與DrawColsedCurve、DrawEllipse、DrawRectangle的差別只在於是否有填滿圖形內部空間的顏色而已；如果要填滿圖形內部空間，就必須使用Brush物件。

  17. 繪圖與聲音 DrawImage、DrawString 如同在表單上使用PictureBox透過Image屬性設定像素資料，或是利用Label透過Text屬性設定文字資料，再把結果呈現在表單上一樣；Graphic能透過DrawImage、DrawString這兩個方法，將像素資料、文字字串繪製在指定的表單或控制項中；用控制項的屬性設定或是用Graphic繪圖的效果，兩者出現的效果相同，差別只在產生畫面的過程與方式不同而已，呈現出來的效果近乎一致。

  18. 繪圖與聲音 Pen 類別 Pen類別主要用來指定繪製圖形時的線條樣式，我們在前面繪製線條的範例中，已經多次使用過Pen類別：

  19. 繪圖與聲音 Pen 類別

  20. 線段起點是菱形，終點則是三角形。 繪圖與聲音 CustomStartCap、CustomEndCap CustomStartCap、CustomEndCap屬性，是用以設定線段或曲線的起點樣式和終點樣式；CustomStartCap、CustomEndCap的屬性設定，必須透過GraphicsPath類別以及CustomLineCap類別。 GraphicsPath主要是用來表示一系列直線或曲線的連接；CustomLineCap則主要用於將GraphicsPath物件中所加入的線條集合呈現出來。

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

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

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

  24. 繪圖與聲音 LineJoin 其程式碼如下：

  25. 繪圖與聲音 透過SoundPlayer來撥放聲音 在Visual Basic 2005中要撥放聲音檔有許多不同的方式，在.NET 2.0原生的類別庫當中，您可以使用SoundPlayer來撥放.wav格式的聲音檔案。

  26. 繪圖與聲音 以My.Computer.Audio來撥放聲音 在Visual Basic 2005當中，您也可以透過My類別直接的撥放聲音： 想要讓音效停止播放時，您可以呼叫『My.Computer.Audio.Stop()』。

More Related