第12章 繪圖與多媒體 12-1 繪圖的基礎 12-2 繪出文字和圖形 12-3 載入與顯示圖形檔案 12-4 建立多媒體的動畫效果

Presentation on theme: "第12章 繪圖與多媒體 12-1 繪圖的基礎 12-2 繪出文字和圖形 12-3 載入與顯示圖形檔案 12-4 建立多媒體的動畫效果"— Presentation transcript:

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

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

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

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

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

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

7 12-1-2 建立畫布- Visual Basic專案
Visual Basic專案：Ch12-1-2 在Windows應用程式分別使用Paint事件和CreateGraphics()方法建立表單和標籤控制項的畫布，然後在畫布範圍繪出彩色框線，如下圖所示：

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

9 建立畫筆和筆刷-色彩Color結構 Visual Basic指定色彩是使用Color結構屬性（關於Visual Basic結構的說明請參閱附錄A-8節），如下所示： g.Clear(Color.LightGray) 上述程式碼指定色彩為淡灰色。常用色彩結構屬性說明，如下表所示： 屬性 說明 Color.White 白色 Color.Black 黑色 Color.Red 紅色 Color.Green 綠色 Color.Blue 藍色 Color.Yellow 黃色 Color.Purple 紫色 Color.Gray 灰色 Color.Orange 橘色 Color.Navy 海軍藍

10 12-1-3 建立畫筆和筆刷-字型Font物件 字型是Font類別的物件，需要使用New運算子建立，如下所示：
Dim font As Font = New Font("標楷體", 14, FontStyle.Bold) 上述程式碼建立Font物件font，使用的是類別建構子（即建立物件的方法，詳細說明請參閱附錄A-2-3節），其參數依序是字型名稱、字型尺寸和樣式，樣式是FontStyle列舉常數。

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

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

13 建立畫筆和筆刷- 筆刷Brush物件2 同樣的，Brush物件也需要使用New運算子來建立藍色的SolidBrush筆刷，如下所示： Dim brush1 As SolidBrush = _ New SolidBrush(Color.Blue) 如果使用TextureBrush類別，就可以使用圖檔來建立筆刷，如下所示： Dim brush2 As TextureBrush = _ New TextureBrush( _ New Bitmap("\範例程式\Ch12\back.bmp"))

14 12-1-3 建立畫筆和筆刷- Visual Basic專案
Visual Basic專案：Ch12-1-3 在Windows應用程式建立各種寬度的畫筆、色彩和圖形的筆刷後，可以分別繪出直線、填滿的橢圓形和長方形，如下圖所示：

15 12-2 繪出文字和圖形 12-2-1 繪出文字與線條 12-2-2 繪出圖形 12-2-3 繪出填滿圖形
位移、縮放和旋轉畫布

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

17 12-2-1 繪出文字與線條- Visual Basic專案
Visual Basic專案：Ch12-2-1 在Windows應用程式的表單畫布顯示文字內容和使用For/Next迴圈繪出多條直線組合的幾何圖形，如下圖所示：

18 12-2-2 繪出圖形-方法 方法 說明 DrawRectangle(Pen, x, y, width, height)
DrawPolygon(Pen, Points) 使用Pen畫筆以第2個參數Point物件陣列的座標繪出多邊形 DrawEllipse(Pen, x, y, width, height) 使用Pen畫筆在(x, y)座標的長方形左上角，寬width和高height的長方形中繪出橢圓形 DrawArc(Pen, x, y, width, height, startAngle, sweepAngle) 使用Pen畫筆在(x, y)座標的長方形左上角，寬width和高height的長方形中，繪出從startAngle開始共sweepAngle角度的弧形 DrawPie(Pen, x, y, width, height, startAngle, sweepAngle) 使用Pen畫筆在(x, y)座標的長方形左上角，寬width和高height的長方形中，繪出從startAngle開始共sweepAngle角度的扇形 DrawBezier(Pen, x1, y1, x2, y2, x3, y3, x4, y4 使用Pen畫筆以之後4個點的座標繪具茲曲線，貝茲曲線會從第1點繪製到第4點，使用第2和第3點來決定曲線的形狀

19 12-2-2 繪出圖形- DrawPolygon()方法
DrawPolygon()方法需要使用Point物件陣列的座標，每一個Point物件是一個端點座標，如下所示： Dim arrPoint() As Point = { _ New Point(170, 30), _ New Point(180, 120), _ New Point(250, 100)} 在建立Point物件陣列後，DrawPolygon()方法只是將座標使用Pen物件的畫筆，以直線連接起來。

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

21 12-2-2 繪出圖形- Visual Basic專案
Visual Basic專案：Ch12-2-2 在Windows應用程式的表單畫布繪出逐漸放大的長方形、三角形、橢圓形、弧形、扇形和貝茲曲線，如下圖所示：

22 12-2-3 繪出填滿圖形-說明 Graphics物件關於繪出填滿圖形的相關方法，如下表所示： 方法 說明
FillRectangle(Brush, x, y, width, height) 使用Brush筆刷在(x, y)座標的長方形左上角繪出寬width和高height填滿的長方形 FillPolygon(Brush, Points) 使用Brush筆刷以第2個參數Point物件陣列的座標繪出填滿的多邊形 FillPie(Brush, x, y, width, height, startAngle, sweepAngle) 使用Brush筆刷在(x, y)座標的長方形左上角，寬width和高height的長方形中，繪出從startAngle開始共sweepAngle角度的填滿扇形 FillEllipse(Brush, x, y, width, height) 使用Brush筆刷在(x, y)座標的長方形左上角，寬width和高height的長方形中，繪出填滿的橢圓形

23 12-2-3 繪出填滿圖形- Visual Basic專案
Visual Basic專案：Ch12-2-3 在Windows應用程式建立表單畫布後，使用上表方法以筆刷繪出填滿的長方形、橢圓形、扇形和多邊形，如下圖所示：

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

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

26 12-2-4 位移、縮放和旋轉畫布- Visual Basic專案
Visual Basic專案：Ch12-2-4 在Windows應用程式新增標籤控制項作為畫布後，輸入位移座標、比例和角度，即可顯示畫布縮放、旋轉或位移填滿的長方形，如下圖所示：

27 12-3 載入與顯示圖形檔案 載入和顯示圖檔 PictureBox圖形盒控制項顯示圖形 捲軸控制項

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

29 12-3-1 載入和顯示圖檔-Bitmap物件 Bitmap物件的內容是儲存像素資料的圖檔影像，需要使用New運算子來建立此物件，如下所示：
Dim buffer As Bitmap = _ New Bitmap(320, 220) 這是一個儲存在記憶體中，尺寸為320 X 220的圖檔。如果擁有現成圖片檔案，也可以使用Bitmap物件來載入圖片檔案，如下所示： Dim bmp = New Bitmap( _ path & "sample.bmp")

30 12-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)

31 12-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列指定圖形尺寸。

32 12-3-1 載入和顯示圖檔- Visual Basic專案
Visual Basic專案：Ch12-3-1 在Windows應用程式建立一個簡單的繪圖程式，可以載入現成圖形檔案、選擇不同色彩的畫筆和繪出線條，程式是將圖檔和線條都繪在Bitmap物件buffer上，所以可以將繪圖結果儲存成圖檔，如下圖所示：

33 12-3-2 PictureBox圖形盒控制項顯示圖形-說明
PictureBox圖形盒控制項是一種圖形控制項，可以用來顯示點陣圖格式BMP、GIF或JPG等圖檔的內容。 PictureBox

34 12-3-2 PictureBox圖形盒控制項顯示圖形-建立

35 12-3-2 PictureBox圖形盒控制項顯示圖形-屬性

36 12-3-2 PictureBox圖形盒控制項顯示圖形-Visual Basic專案
Visual Basic專案：Ch12-3-2 在Windows應用程式建立簡易的秀圖程式，只需在上方選擇檔案的選項按鈕，就可以在下方顯示圖檔內容，如下圖所示：

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

38 捲軸控制項-建立 在「工具箱」視窗的【所有Windows Form】區段，分別選【VScrollBar】和【HScrollBar】控制項後，就可以在表單上拖拉出捲軸控制項。

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

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

41 12-3-3 捲軸控制項- Visual Basic專案
Visual Basic專案：Ch12-3-3 在Windows應用程式建立秀圖程式，如果圖形很大，超過PictureBox控制項的尺寸，就可以使用捲軸控制項來檢視其他區域的圖形，如下圖所示：

42 12-4 建立多媒體的動畫效果 計時器控制項 建立圖形的動畫效果

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

44 計時器控制項-建立 在「工具箱」視窗的【所有Windows Form】區段，按二下【Timer】控制項，可以在表單建立計時器控制項，然後將Timer控制項的【Name】屬性改為【tmrTimer】。

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

46 12-4-1 計時器控制項- Visual Basic專案
Visual Basic專案：Ch12-4-1 在Windows應用程式建立簡單的小時鐘，可以顯示電腦的系統時間，如下圖所示：

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

48 12-4-2 建立圖形的動畫效果- Visual Basic專案
Visual Basic專案：Ch12-4-2 在Windows應用程式建立動畫效果，可以看到一張圖形從左至右重複移動圖形的動畫，如下圖所示：

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

50 12-5 應用實例：螢幕保護程式-Visual Basic專案
Visual Basic專案：Ch12-5 在Windows應用程式建立簡單的螢幕保護程式，使用全螢幕和計時器控制項，以亂數決定色彩和尺寸來繪出幾何圖形的動畫效果，如下圖所示：

51 End