14 繪圖與動畫 [我的小畫家][打磚塊遊戲] 14-1 繪圖的基礎 14-2 滑鼠事件與基本繪圖 14-3 在Bitmap物件繪圖 14-4 更多的繪圖方法 14-5 圖檔的載入與顯示 14-6 動畫

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

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

14-1-1 繪圖的座標-畫布尺寸 我們可以使用Size.Width和Size.Height屬性取得寬度與高度的尺寸。 因為表單擁有標題列、功能表列、狀態列和框線寬度，在中間的灰白區域才是實際顯示區域，我們可以使用ClientSize.Width與ClientSize.Height屬性取得其寬度和高度的尺寸。

14-1-2 建立畫布-說明 Windows作業系統處理繪圖的介面稱為「GDI」（Graphical Device Interface），Visual Basic繪圖功能是透過Graphics物件來使用GDI，換句話說，當在表單或控制項建立Graphics物件後，就可以將表單或控制項轉換成畫布，讓我們在畫布上繪圖。 在表單或控制項建立Graphics物件的方法有兩種：一是使用Paint事件；一是使用CreateGraphics()方法建立Graphics物件。

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

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

14-1-2 建立畫布-範例專案 範例專案：Ch14-1-2\我的小畫家 在Windows應用程式的表單建立多種不同背景色彩的畫布，以便在本章後使用繪圖方法在其上繪出圖形，其執行結果如下圖所示：

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

14-1-3 畫筆和筆刷-Color結構 在程式碼指定控制項色彩是使用Color結構的屬性，如下所示： lblOutput.BackColor = Color.White 程式碼指定lblOutput控制項的背景色彩BackColor屬性為白色。不是常用色彩可以使用Color結構的FromArgb()方法，以RGB三原色的比例值來指定色彩，如下所示： lblOutput.ForeColor = Color.FromArgb(255, 0, 0) 3個參數依序是紅、綠和藍三原色的比例值，值的範圍是0~255。

14-1-3 畫筆和筆刷-Font物件 字型就是Font類別的物件，在程式碼需要使用New運算子建立Font物件，如下所示： lblOutput.Font = New Font("細明體", 16, _ FontStyle.Bold) 程式碼建立Font物件指定為控制項的Font屬性，使用的是Font類別的建構子，其參數依序是字型名稱、字型尺寸和樣式，樣式是使用FontStyle列舉常數。

14-1-3 畫筆和筆刷-畫筆Pen物件 畫筆Pen物件也是使用New關鍵字來建立，如下所示： Dim pen As Pen = New Pen(Color.Red, 1) 程式碼建立寬度為1，色彩為紅色的畫筆，建構子的第1個參數是畫筆色彩，第2個參數是寬度。 在建立Pen物件後，可以在程式碼使用Color和Width屬性更改畫筆的色彩與寬度，如下所示： pen.Width = 3 pen.Color = Color.Green

14-1-3 畫筆和筆刷-筆刷Brush物件 筆刷可以填滿圖形或顯示文字，同樣的，Brush物件也需要使用New關鍵字來建立，如下所示： Dim brush1 As SolidBrush = _ New SolidBrush(Color.Blue) 程式碼建立藍色的SolidBrush筆刷，建構子參數是色彩Color結構。如果使用TextureBrush類別，可以使用圖檔來建立筆刷，如下所示： Dim brush2 As TextureBrush = _ New TextureBrush( New _ Bitmap(“C:\VB2010\Ch14\back.bmp"))

14-1-3 畫筆和筆刷-範例專案 範例專案：Ch14-1-3\我的小畫家 這個Windows應用程式是修改第14-1-2節的【我的小畫家】，新增功能表來選擇使用的畫筆和筆刷，可以使用選擇的畫筆和筆刷來繪出測試的直線和填滿的橢圓形，其執行結果如下圖所示：

14-2 滑鼠事件與基本繪圖-說明 Graphics物件提供繪圖方法來繪出文字與線條，我們可以配合滑鼠事件取得繪圖位置來繪出線條和文字內容。 常用的滑鼠事件有：MouseUp、MouseDown和MouseMove事件。

14-2 滑鼠事件與基本繪圖- MouseUp和MouseDown事件 MouseUp和MouseDown事件是當使用者按下滑鼠按鍵和放開時產生的事件。Visual Basic程式碼可以從事件處理程序參數e的MouseEventArgs物件取得使用者按下哪一個按鍵，和其座標位置。 MouseEventArgs物件常用屬性說明，如下表：

14-2 滑鼠事件與基本繪圖-MouseMove事件 在表單的MouseMove事件處理程序是使用MouseEventArgs的X和Y屬性來取得座標，然後使用本節後的DrawLine()方法繪出直線。

14-2 滑鼠事件與基本繪圖- 繪出文字和線條的方法 Graphics物件提供相關方法來繪出文字與線條，其說明如下表所示：

14-2 滑鼠事件與基本繪圖-範例專案 範例專案：Ch14-2\我的小畫家 這個Windows應用程式是修改第14-1-3節的【我的小畫家】，新增功能表來繪出線條和文字內容，程式只需使用滑鼠拖拉就可以繪出線條，按一下，可以在指定位置顯示文字內容，其執行結果如下圖所示：

14-3 在Bitmap物件繪圖-說明 在第14-2節的範例專案雖然可以繪出線條和文字內容，但是因為並不是在表單的Paint事件處理程序，所以並不會自動重繪，當切換視窗後，繪出的圖形就會自動清除。 為了解決此問題，我們可以使用Bitmap物件來建立畫布，然後在Bitmap物件上繪圖，換句話說，只需重新將Bitmap物件載入畫布，就可以保留我們繪出的圖形。

14-3 在Bitmap物件繪圖- 建立Bitmap物件 Bitmap物件的內容是儲存像素資料的圖檔影像，在程式碼需要使用New關鍵字來建立此物件，如下所示： Dim buffer As Bitmap = New Bitmap(320, 220) 程式碼中建構子的第1個參數是Bitmap物件的寬度（以像素為單位），第2個參數是Bitmap物件的高度，簡單的說，Bitmap物件是一個儲存在記憶體中，尺寸為320 X 220的圖檔。

14-3 在Bitmap物件繪圖- 使用Bitmap物件建立Graphics物件 我們可以使用Graphics物件方法來編輯Bitmap物件儲存的圖形，即在Graphics物件上繪製的圖形，實際是繪在Bitmap物件的的點陣圖上，如下所示： Dim g1 As Graphics = Graphics.FromImage(buffer) g1.Clear(Color.White) 程式碼使用Graphics類別的FromImage()方法將Bitmap物件buffer建立成Graphics物件，然後執行Clear()方法將Bitmap物件的點陣圖清除成白色。

14-3 在Bitmap物件繪圖- 在畫布顯示Bitmap物件 在表單或控制項畫布上顯示Bitmap物件是使用DrawImage()方法，如下所示： g.DrawImage(buffer, 0, 0) 上述程式碼可以將Bitmap物件buffer顯示在畫布座標(0, 0)。DrawImage()方法的說明，如下表所示：

14-3 在Bitmap物件繪圖-範例專案 範例專案：Ch14-3\我的小畫家 這個Windows應用程式是修改第14-2節的【我的小畫家】，改為使用Bitmap物件建立繪圖緩衝區，以便保留使用者在表單上繪出的圖形，其執行結果如下圖所示：

14-4 更多的繪圖方法 14-4-1 繪出長方形與橢圓形 14-4-2 繪出填滿圖形

14-4-1 繪出長方形與橢圓形-說明 Graphics物件提供繪出長方形與橢圓形的相關方法，其說明如下表所示：

14-4-1 繪出長方形與橢圓形- 範例專案 範例專案：Ch14-4-1\我的小畫家 這個Windows應用程式是修改第14-3節的【我的小畫家】，新增功能表的選項來繪出長方形與橢圓形，其執行結果如下圖所示：

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

14-4-2 繪出填滿圖形-範例專案 範例專案：Ch14-4-2\我的小畫家 這個Windows應用程式是修改第14-4-1節的【我的小畫家】，新增功能表的選項來切換是否繪出填滿的長方形與橢圓形，其執行結果如下圖所示：

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

14-5 圖檔的載入與顯示- 使用Bitmap物件來載入圖片檔案 Dim bmp = New Bitmap(path & "sample.bmp") 建構子參數是圖片檔案的路徑字串，圖檔格式可以是BMP、GIF或JPG等。Bitmap物件的相關方法說明，如下表所示：

14-5 圖檔的載入與顯示- 在畫布顯示縮小圖片 在表單或控制項畫布使用DrawImage()方法顯示Bitmap物件時，可以指定尺寸，如果尺寸比原始尺寸小，就是顯示縮小圖片，如下所示： g.DrawImage(bmp, 1, 25, bmp.Width, bmp.Height + 25) DrawImage()方法的說明，如下表所示：

14-5 圖檔的載入與顯示- 範例專案 範例專案：Ch14-5\我的小畫家 這個Windows應用程式是修改第14-4-2節的【我的小畫家】，新增【檔案】功能表來載入與儲存圖片，換句話說，我們可以將繪圖結果儲存成圖檔，其執行結果如下圖所示：

14-6 動畫-說明 電腦動畫是使用卡通的製作原理，快速顯示一張張靜態圖形，因為每張圖形有少許的改變，例如：位移或尺寸，或定時在不同位置繪出圖形，在人類視覺殘留情況下，就可以看到多媒體的動畫效果。 打磚塊遊戲最早是一種電子遊戲機，玩家操作一根位在螢幕下方水平的棒子，以便讓一顆不斷彈來彈去的球（即動畫）撞擊目標來消除途中的磚塊，直到把磚塊全部消除為止。

14-6 動畫-計時器控制項(說明) 在Visual Basic建立動畫需要使用Timer計時器控制項來控制繪圖或圖形的顯示，Timer控制項可以在指定間隔時間自動產生事件，以便事件處理程序能夠重繪圖形來建立動畫。Timer控制項的常用屬性說明，如下表所示： 屬性 說明 Name 控制項名稱 Enabled 是否啟動計時器控制項，預設值False為不啟動；True為啟動 Interval 設定觸發Tick事件的間隔時間，預設值是100毫秒（10-3秒）

14-6 動畫-計時器控制項(Tick事件) Timer控制項的Tick事件是當Enabled屬性為True時，在Interval屬性的間隔時間到時，就會自動觸發此事件，如下所示： Private Sub Timer1_Tick(sender As Object, _ e As EventArgs) Handles Timer1.Tick … End Sub 上述Timer1_Tick()程序是Timer1的Tick事件處理程序，我們可以在此程序更改球的位置來建立移動球的動畫效果。

14-6 動畫-繪出球的Image物件 在本節範例專案打磚塊遊戲的球是一個Image物件，如下所示： Dim myBall As Image = Image.FromFile("..\..\ball.jpg") 上述程式碼呼叫FromFile()方法來載入ball.jpg圖檔成為Image物件，然後就可以呼叫DrawImage()方法繪出這顆球的圖形。

14-6 動畫- 使用程式碼建立磚塊的Label物件 打磚塊遊戲的磚塊是使用Label控制項建立，因為需要取得控制項物件來判斷是否位在球的路徑中，所以是使用程式碼建立40個Label物件，並且使用2個一維陣列來儲存物件參考和狀態，如下所示： Dim lblBricks(40) As Label Dim lblStatus(40) As Boolean … For i = 1 To 40 lblBricks(i) = New Label() lblBricks(i).BackColor = Color.Green lblBricks(i).Top = 50 + 22 * ((i - 1) \ 8) lblBricks(i).Left = (i Mod 8) * 62 + 6 lblBricks(i).Width = 59 lblBricks(i).Height = 19 lblBricks(i).Visible = True Me.Controls.Add(lblBricks(i)) lblStatus(i) = True Next

14-6 動畫-範例專案 範例專案：Ch14-6\打磚塊遊戲 在Windows應用程式建立打磚塊遊戲，遊戲介面擁有3個Label標籤和Button按鈕控制項，其中球和磚塊是動態使用程式碼來顯示的Image圖形和Label物件，其執行結果如右圖所示：