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

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

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

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

建立畫布 - 建立 Paint 事件的畫 布 在表單或控制項上繪圖時，就會觸發 Paint 事件， 在 Paint 事件處理程序的 PaintEventArgs 參數可 以取得 Graphics 物件。例如：表單 Form1 的 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 System.Windows.Forms.PaintEventArgs) _ Handles Me.Paint Dim g As Graphics = e.Graphics Dim g As Graphics = e.Graphics g.Clear(Color.Blue) g.Clear(Color.Blue) ‘ 繪圖方法的程式碼 ‘ 繪圖方法的程式碼 ……… ……… End Sub

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

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

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

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

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

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

繪出文字與線條 Graphics 物件繪出文字與線條的方法，如下表： Graphics 物件繪出文字與線條的方法，如下表：

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

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

繪出弧線與橢圓形 - 方法 Graphics 物件繪出弧線與橢圓形的方法，如下： Graphics 物件繪出弧線與橢圓形的方法，如下：

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

繪出弧線與橢圓形 - 圖例

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

繪出填滿圖形 - 圖例

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

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

位移、縮放和旋轉畫布 - 圖例

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

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

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

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

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

載入和顯示圖檔 - 圖例

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

PictureBox 圖片盒控制項顯 示圖片 - 屬性 PictureBox 控制項的常用屬性，如下表所 示： PictureBox 控制項的常用屬性，如下表所 示：

PictureBox 圖片盒控制項顯 示圖片 - 圖例

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

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

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

捲軸控制項 - 圖例

11-4 動畫效果 計時器控制項 計時器控制項 圖片的動畫效果 圖片的動畫效果

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

計時器控制項 - 屬性與事件 Timer 控制項常用屬性與事件，如下表所示： Timer 控制項常用屬性與事件，如下表所示：

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

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