第 11 章 繪圖與多媒體

1. 第11章 繪圖與多媒體 • 11-1 繪圖的基礎 • 11-2 繪出文字和圖形 • 11-3 圖片檔案的載入與顯示 • 11-4 動畫效果 • 11-5 應用實例：螢幕保護程式

2. 11-1 繪圖的基礎 • 11-1-1 繪圖的座標 • 11-1-2 建立畫布 • 11-1-3 建立畫筆和筆刷

3. 11-1-1 繪圖的座標 • 在電腦螢幕的座標系統是以「像素」（Pixels）為單位，在表單顯示區域或控制項建立的畫布，它是一張長方形區域，其左上角為原點，座標是(0, 0)，X軸從左到右，Y軸由上到下，如下圖所示：

4. 11-1-2 建立畫布-說明 • Visual Basic繪圖功能是Graphics物件，當在表單或控制項建立Graphics物件後，就可以將表單或控制項轉換成畫布，在畫布上繪出所需的圖形。

5. 11-1-2 建立畫布-建立Paint事件的畫布 • 在表單或控制項上繪圖時，就會觸發Paint事件，在Paint事件處理程序的PaintEventArgs參數可以取得Graphics物件。例如：表單Form1的Paint事件處理程序，如下所示： Private Sub Form1_Paint(ByVal sender As Object, _ ByVal e As _ System.Windows.Forms.PaintEventArgs) _ Handles Me.Paint Dim g As Graphics = e.Graphics g.Clear(Color.Blue) ‘繪圖方法的程式碼 ……… End Sub

6. 11-1-2 建立畫布-CreateGraphics()方法建立畫布 • 如果沒有使用Paint事件處理程序，我們可以在其他事件處理程序使用CreateGraphics()方法來建立Graphics物件。例如：表單Form1的Click事件處理程序，如下所示： Private Sub Form1_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles Me.Click Dim g As Graphics = Me.CreateGraphics() ‘繪圖方法的程式碼 ……… End Sub

7. 11-1-3 建立畫筆和筆刷-說明 • 在Visual Basic表單或控制項建立好畫布後，我們在開始繪圖前，需要一些繪圖工具，其相關物件與結構如下表所示：

8. 11-1-3 建立畫筆和筆刷-畫筆Pen物件 • 在使用Graphics物件的方法繪圖前，我們需要建立畫筆Pen物件，請使用New關鍵字建立Pen物件，如下所示： Dim pen As Pen = New Pen(Color.Red, 1) • 在建立好Pen物件後，就可以在程式碼使用Color和Width屬性更改畫筆物件的色彩與寬度，如下所示： pen.Width = 3 pen.Color = Color.Green

9. 11-1-3 建立畫筆和筆刷-筆刷Brush物件1 • 筆刷可以填滿圖形或顯示文字，其常用的類別如下表所示：

10. 11-1-3 建立畫筆和筆刷-筆刷Brush物件2 • 同樣的，Brush物件也需要使用New關鍵字來建立，如下所示： Dim brush1 As SolidBrush = _ New SolidBrush(Color.Blue) • 上述程式碼建立藍色的SolidBrush筆刷，建構子參數是色彩Color結構。 • 如果使用TextureBrush類別，就可以使用圖檔來建立筆刷，如下所示： Dim brush2 As TextureBrush = _ New TextureBrush( _ New Bitmap("C:\範例程式\Ch11\back.bmp"))

11. 11-2 繪出文字和圖形 • 11-2-1 繪出文字與線條 • 11-2-2 繪出長方形與多邊形 • 11-2-3 繪出弧線與橢圓形 • 11-2-4 繪出填滿圖形 • 11-2-5 位移、縮放和旋轉畫布

12. 11-2-1 繪出文字與線條 • Graphics物件繪出文字與線條的方法，如下表：

13. 11-2-2 繪出長方形與多邊形-方法 • Graphics物件繪出長方形與多邊形的方法，如下表所示：

14. 11-2-2 繪出長方形與多邊形- DrawPolygon()方法 • DrawPolygon()方法需要使用Point物件陣列的座標，每一個Point物件是一個端點座標，如下所示： Dim arrPoint() As Point = { _ New Point(170, 30), _ New Point(180, 120), _ New Point(250, 100)} • 上述程式碼Point類別的建構子參數是(x, y)座標，在建立好Point物件陣列後，DrawPolygon()方法只是將座標使用Pen物件的畫筆，以直線連接起來。

15. 11-2-3 繪出弧線與橢圓形-方法 • Graphics物件繪出弧線與橢圓形的方法，如下：

16. 11-2-3 繪出弧線與橢圓形-參數說明 • startAngle參數是以度為單位，依順時針方向從X軸到弧形起點的角度，參數sweepAngle也是以度為單位，依順時針方向從startAngle參數到弧形結束點的角度，負值是反時針方向。如下圖所示：

17. 11-2-3 繪出弧線與橢圓形-圖例

18. 11-2-4 繪出填滿圖形-說明 • Graphics物件關於繪出填滿圖形的相關方法，如下表所示：

19. 11-2-4 繪出填滿圖形-圖例

20. 11-2-5 位移、縮放和旋轉畫布-方法 • Graphics物件提供位移、縮放和旋轉畫布的方法，如下表所示：

21. 11-2-5 位移、縮放和旋轉畫布-重繪 • 如果需要顯示轉換效果，我們需要重繪畫布的圖形，此時是使用表單或控制項的Refresh()方法，如下所示： Me.Refresh() lblOutput.Refresh() • 上述程式碼可以重繪表單或控制項，以此例是表單和標籤控制項。

22. 11-2-5 位移、縮放和旋轉畫布-圖例

23. 11-3 圖片檔案的載入與顯示 • 11-3-1 載入和顯示圖檔 • 11-3-2 PictureBox圖片盒控制項 顯示圖片 • 11-3-3 捲軸控制項

24. 11-3-1 載入和顯示圖檔-說明 • 除了在畫布使用Graphics物件的方法來繪出圖形外，如果擁有BMP、GIF或JPG等格式現成圖檔，我們也可以建立Windows應用程式，將圖檔載入和在畫布上顯示。 • 在Visual Basic應用程式載入和顯示圖片檔案的方法有很多種，這一節是使用Bitmap物件來載入圖片後，以DrawImage()方法顯示圖片，下一節使用PictureBox圖片盒控制項來載入和顯示圖片檔案。

25. 11-3-1 載入和顯示圖檔-Bitmap物件 • Bitmap物件的內容是儲存像素資料的圖檔影像，需要使用New關鍵字來建立此物件，如下所示： Dim buffer As Bitmap = _ New Bitmap(320, 220) • 在建構子的第1個參數是Bitmap物件的寬度（以像素為單位），第2個參數是高度，它是一個儲存在記憶體中，尺寸為320 X 220的圖檔。 • 如果擁有現成圖片檔案，也可以使用Bitmap物件來載入圖片檔案，如下所示： Dim bmp = New Bitmap( _ path & "sample.bmp")

26. 11-3-1 載入和顯示圖檔-使用Bitmap物件建立Graphics物件 • 如果使用Bitmap物件來建立Graphics物件，我們就可以使用Graphics物件方法來編輯Bitmap物件儲存的圖形，因為在Graphics物件上繪製的圖形，就是繪在Bitmap物件的的點陣圖上，如下所示： Dim g As Graphics = _ Graphics.FromImage(buffer) g.Clear(Color.White) g.DrawLine(pen, x, y, e.X, e.Y)

27. 11-3-1 載入和顯示圖檔-在畫布顯示Bitmap物件 • 在表單或控制項畫布上顯示Bitmap物件，就是使用DrawImage()方法，如下所示： g.DrawImage(buffer, 1, 25) g.DrawImage(bmp, 1, 25, bmp.Width, _ bmp.Height + 25) • 上述程式碼可以將Bitmap物件buffer顯示在畫布座標(1, 25)，第2列指定圖形尺寸。

28. 11-3-1 載入和顯示圖檔-圖例

29. 11-3-2 PictureBox圖片盒控制項顯示圖片-建立 • PictureBox圖片盒控制項是一種圖片控制項，可以顯示點陣圖格式BMP、GIF或JPG等圖檔的內容。當在VBE建立好專案後，就可以在表單新增PictureBox控制項，如下所示：

30. 11-3-2 PictureBox圖片盒控制項顯示圖片-屬性 • PictureBox控制項的常用屬性，如下表所示：

31. 11-3-2 PictureBox圖片盒控制項顯示圖片-圖例

32. 11-3-3 捲軸控制項-建立 • ScrollBar捲軸控制項是一種調整顯示位置的好工具，當文字內容太長或圖片太大時，就可以使用捲動軸來調整顯示位置。 • Visual Basic捲軸控制項有兩種：一是垂直的VScrollBar控制項；一是水平的HScrollBar控制項。

33. 11-3-3 捲軸控制項-屬性與事件 • VScrollBar和HScrollBar控制項的常用屬性與事件，如下表所示：

34. 11-3-3 捲軸控制項-繪出圖片的部分範圍 • 在PictureBox控制項如果只顯示部分的圖檔內容，首先定義長方形區域，請使用New關鍵字建立，如下所示： Dim oRect As Rectangle = New Rectangle(0, 0, _ ptbOutput.Width, ptbOutput.Height) Dim cRect As Rectangle = _ New Rectangle(hsbWidth.Value,vsbHeight.Value, _ ptbOutput.Width, ptbOutput.Height) • 在建立好長方形的Rectangle物件後，就可以使用DrawImage()方法來顯示部分圖形，如下所示： g.DrawImage(ptbOutput.Image, oRect, cRect, _ GraphicsUnit.Pixel)

35. 11-3-3 捲軸控制項-圖例

36. 11-4 動畫效果 • 11-4-1 計時器控制項 • 11-4-2 圖片的動畫效果

37. 11-4-1 計時器控制項-建立 • 在Visual Basic應用程式建立動畫需要使用Timer計時器控制項，它可以控制繪圖或圖片顯示。Timer控制項是在指定間隔時間自動產生事件，以便事件處理程序能夠建立動畫效果。

38. 11-4-1 計時器控制項-屬性與事件 • Timer控制項常用屬性與事件，如下表所示：

39. 11-4-2 圖片的動畫效果 • 在Visual Basic應用程式只需使用計時器控制項，配合圖片載入與顯示，每次調整圖片位置後，就可以建立圖片移動的動畫效果。

40. 11-5 應用實例：螢幕保護程式 • Windows作業系統的螢幕保護程式是當使用者沒有使用電腦一段時間後，自動顯示的動畫畫面。通常螢幕保護程式會顯示動態繪圖或圖片效果。在Visual Basic只需活用計時器控制項，就可以輕鬆建立自已的螢幕保護程式。