第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形...

40
11 11 第第第第第第第第第第 11-1 11-1 第第第第第 第第第第第 11-2 11-2 第第第第第第第 第第第第第第第 11-3 11-3 第第第第第第第第第第 第第第第第第第第第第 11-4 11-4 第第第第 第第第第 11-5 11-5 第第第第 第第第第第第 第第第第 第第第第第第

Post on 21-Dec-2015

256 views

Category:

Documents


2 download

TRANSCRIPT

Page 1: 第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形 11-2 繪出文字和圖形 11-3 圖片檔案的載入與顯示 11-3 圖片檔案的載入與顯示

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

Page 2: 第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形 11-2 繪出文字和圖形 11-3 圖片檔案的載入與顯示 11-3 圖片檔案的載入與顯示

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

Page 3: 第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形 11-2 繪出文字和圖形 11-3 圖片檔案的載入與顯示 11-3 圖片檔案的載入與顯示

11-1-1 11-1-1 繪圖的座標繪圖的座標 在電腦螢幕的座標系統是以「像素」(在電腦螢幕的座標系統是以「像素」( PixelsPixels ))

為單位,在表單顯示區域或控制項建立的畫布,為單位,在表單顯示區域或控制項建立的畫布,它是一張長方形區域,其左上角為原點,座標是它是一張長方形區域,其左上角為原點,座標是(0, 0)(0, 0),, XX 軸從左到右,軸從左到右, YY 軸由上到下,如下圖軸由上到下,如下圖所示:所示:

Page 4: 第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形 11-2 繪出文字和圖形 11-3 圖片檔案的載入與顯示 11-3 圖片檔案的載入與顯示

11-1-2 11-1-2 建立畫布建立畫布 -- 說明說明 Visual BasicVisual Basic 繪圖功能是繪圖功能是 GraphicsGraphics 物件,物件,

當在表單或控制項建立當在表單或控制項建立 GraphicsGraphics 物件後,物件後,就可以將表單或控制項轉換成畫布,在畫就可以將表單或控制項轉換成畫布,在畫布上繪出所需的圖形。布上繪出所需的圖形。

Page 5: 第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形 11-2 繪出文字和圖形 11-3 圖片檔案的載入與顯示 11-3 圖片檔案的載入與顯示

11-1-2 11-1-2 建立畫布建立畫布 -- 建立建立 PaintPaint 事件事件的畫布的畫布

在表單或控制項上繪圖時,就會觸發在表單或控制項上繪圖時,就會觸發 PaintPaint 事件,事件,在在 PaintPaint 事件處理程序的事件處理程序的 PaintEventArgsPaintEventArgs 參數參數可以取得可以取得 GraphicsGraphics 物件。例如:表單物件。例如:表單 Form1Form1的的PaintPaint 事件處理程序,如下所示:事件處理程序,如下所示:

Private Sub Form1_Paint(ByVal sender As Object, _Private Sub Form1_Paint(ByVal sender As Object, _ByVal e As _ByVal e As _ System.Windows.Forms.PaintEventArgs) _ System.Windows.Forms.PaintEventArgs) _

Handles Me.PaintHandles Me.Paint Dim g As Graphics = e.GraphicsDim g As Graphics = e.Graphics g.Clear(Color.Blue)g.Clear(Color.Blue) ‘ ‘ 繪圖方法的程式碼繪圖方法的程式碼 ………………End SubEnd Sub

Page 6: 第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形 11-2 繪出文字和圖形 11-3 圖片檔案的載入與顯示 11-3 圖片檔案的載入與顯示

11-1-2 11-1-2 建立畫布建立畫布 -CreateGraphics()-CreateGraphics()方法建立畫布方法建立畫布

如果沒有使用如果沒有使用 PaintPaint 事件處理程序,我們可以在事件處理程序,我們可以在其他事件處理程序使用其他事件處理程序使用 CreateGraphics()CreateGraphics() 方法方法來建立來建立 GraphicsGraphics 物件。例如:表單物件。例如:表單 Form1Form1的的ClickClick 事件處理程序,如下所示:事件處理程序,如下所示:

Private Sub Form1_Click(ByVal sender As Object, _Private Sub Form1_Click(ByVal sender As Object, _ ByVal e As System.EventArgs) Handles Me.ClickByVal e As System.EventArgs) Handles Me.Click Dim g As Graphics = Me.CreateGraphics()Dim g As Graphics = Me.CreateGraphics() ‘ ‘ 繪圖方法的程式碼繪圖方法的程式碼 ………………End SubEnd Sub

Page 7: 第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形 11-2 繪出文字和圖形 11-3 圖片檔案的載入與顯示 11-3 圖片檔案的載入與顯示

11-1-3 11-1-3 建立畫筆和筆刷建立畫筆和筆刷 -- 說明說明 在在 Visual BasicVisual Basic 表單或控制項建立好畫布表單或控制項建立好畫布

後,我們在開始繪圖前,需要一些繪圖工後,我們在開始繪圖前,需要一些繪圖工具,其相關物件與結構如下表所示:具,其相關物件與結構如下表所示:

物件與結構 說明Color結構 設定繪圖時使用的色彩Font物件 在繪出文字內容時,使用的字型與其樣式Pen物件 建立繪圖的畫筆,可以指定畫筆的色彩和寬度

Brush物件 填滿圖形的筆刷

Page 8: 第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形 11-2 繪出文字和圖形 11-3 圖片檔案的載入與顯示 11-3 圖片檔案的載入與顯示

11-1-3 11-1-3 建立畫筆和筆刷建立畫筆和筆刷 -- 畫筆畫筆 PenPen物件物件

在使用在使用 GraphicsGraphics 物件的方法繪圖前,我們需要物件的方法繪圖前,我們需要建立畫筆建立畫筆 PenPen 物件,請使用物件,請使用 NewNew 關鍵字建立關鍵字建立PenPen 物件,如下所示:物件,如下所示:

Dim pen As Pen = New Pen(Color.Red, 1)Dim pen As Pen = New Pen(Color.Red, 1) 在建立好在建立好 PenPen 物件後,就可以在程式碼使用物件後,就可以在程式碼使用

ColorColor和和WidthWidth 屬性更改畫筆物件的色彩與寬度,屬性更改畫筆物件的色彩與寬度,如下所示:如下所示:

pen.Width = 3pen.Width = 3

pen.Color = Color.Greenpen.Color = Color.Green

Page 9: 第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形 11-2 繪出文字和圖形 11-3 圖片檔案的載入與顯示 11-3 圖片檔案的載入與顯示

11-1-3 11-1-3 建立畫筆和筆刷建立畫筆和筆刷 -- 筆刷筆刷BrushBrush 物件物件 11

筆刷可以填滿圖形或顯示文字,其常用的筆刷可以填滿圖形或顯示文字,其常用的類別如下表所示:類別如下表所示:類別 說明

SolidBrush 建立單一色彩的筆刷TextureBrush 建立圖片紋理的筆刷,可以使用圖片檔案來填滿圖形

Page 10: 第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形 11-2 繪出文字和圖形 11-3 圖片檔案的載入與顯示 11-3 圖片檔案的載入與顯示

11-1-3 11-1-3 建立畫筆和筆刷建立畫筆和筆刷 -- 筆刷筆刷BrushBrush 物件物件 22

同樣的,同樣的, BrushBrush 物件也需要使用物件也需要使用 NewNew 關鍵字來關鍵字來建立,如下所示:建立,如下所示:

Dim brush1 As SolidBrush = _Dim brush1 As SolidBrush = _ New SolidBrush(Color.Blue)New SolidBrush(Color.Blue) 上述程式碼建立藍色的上述程式碼建立藍色的 SolidBrushSolidBrush 筆刷,建構筆刷,建構

子參數是色彩子參數是色彩 ColorColor 結構。結構。 如果使用如果使用 TextureBrushTextureBrush 類別,就可以使用圖檔類別,就可以使用圖檔

來建立筆刷,如下所示:來建立筆刷,如下所示:Dim brush2 As TextureBrush = _Dim brush2 As TextureBrush = _ New TextureBrush( _New TextureBrush( _ New Bitmap("C:\New Bitmap("C:\ 範例程式範例程式 \Ch11\back.bmp"))\Ch11\back.bmp"))

Page 11: 第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形 11-2 繪出文字和圖形 11-3 圖片檔案的載入與顯示 11-3 圖片檔案的載入與顯示

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

Page 12: 第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形 11-2 繪出文字和圖形 11-3 圖片檔案的載入與顯示 11-3 圖片檔案的載入與顯示

11-2-1 11-2-1 繪出文字與線條繪出文字與線條 GraphicsGraphics 物件繪出文字與線條的方法,如下表:物件繪出文字與線條的方法,如下表:

方法 說明DrawString(String, Font, Brush, x, y) 在參數(x, y)位置使用 Font物件的字型

和 Brush筆刷繪出參數 String的文字內容

DrawLine(Pen, x1, y1, x2, y2) 使用 Pen畫筆從(x1, y1)座標到(x2, y2)座標繪出一條直線

Page 13: 第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形 11-2 繪出文字和圖形 11-3 圖片檔案的載入與顯示 11-3 圖片檔案的載入與顯示

11-2-2 11-2-2 繪出長方形與多邊形繪出長方形與多邊形 -- 方法方法 GraphicsGraphics 物件繪出長方形與多邊形的方法,如下物件繪出長方形與多邊形的方法,如下

表所示:表所示:方法 說明

DrawRectangle(Pen, x, y, width,height)

使用 Pen畫筆在(x, y)座標的長方形左上角繪出寬 width和高 height的長方形

DrawPolygon(Pen, Points) 使用 Pen畫筆以第 2個參數 Point物件陣列的座標繪出多邊形

Page 14: 第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形 11-2 繪出文字和圖形 11-3 圖片檔案的載入與顯示 11-3 圖片檔案的載入與顯示

11-2-2 11-2-2 繪出長方形與多邊形繪出長方形與多邊形 - - DrawPolygon()DrawPolygon() 方法方法

DrawPolygon()DrawPolygon() 方法需要使用方法需要使用 PointPoint 物件陣列的物件陣列的座標,每一個座標,每一個 PointPoint 物件是一個端點座標,如下物件是一個端點座標,如下所示:所示:

Dim arrPoint() As 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)} 上述程式碼上述程式碼 PointPoint 類別的建構子參數是類別的建構子參數是 (x, y)(x, y) 座座

標,在建立好標,在建立好 PointPoint 物件陣列物件陣列後,後, DrawPolygon()DrawPolygon() 方法只是將座標使用方法只是將座標使用 PenPen物件的畫筆,以直線連接起來。物件的畫筆,以直線連接起來。

Page 15: 第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形 11-2 繪出文字和圖形 11-3 圖片檔案的載入與顯示 11-3 圖片檔案的載入與顯示

11-2-3 11-2-3 繪出弧線與橢圓形繪出弧線與橢圓形 -- 方法方法 GraphicsGraphics 物件繪出弧線與橢圓形的方法,如下:物件繪出弧線與橢圓形的方法,如下:

方法 說明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點來決定曲線的形狀

Page 16: 第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形 11-2 繪出文字和圖形 11-3 圖片檔案的載入與顯示 11-3 圖片檔案的載入與顯示

11-2-3 11-2-3 繪出弧線與橢圓形繪出弧線與橢圓形 -- 參數說參數說明明

startAnglestartAngle 參數是以度為單位,依順時針方向從參數是以度為單位,依順時針方向從XX 軸到弧形起點的角度,參數軸到弧形起點的角度,參數 sweepAnglesweepAngle 也是也是以度為單位,依順時針方向從以度為單位,依順時針方向從 startAnglestartAngle 參數到參數到弧形結束點的角度,負值是反時針方向。如下圖弧形結束點的角度,負值是反時針方向。如下圖所示:所示:

Page 17: 第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形 11-2 繪出文字和圖形 11-3 圖片檔案的載入與顯示 11-3 圖片檔案的載入與顯示

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

Page 18: 第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形 11-2 繪出文字和圖形 11-3 圖片檔案的載入與顯示 11-3 圖片檔案的載入與顯示

11-2-4 11-2-4 繪出填滿圖形繪出填滿圖形 -- 說明說明 GraphicsGraphics 物件關於繪出填滿圖形的相關方法,如物件關於繪出填滿圖形的相關方法,如

下表所示:下表所示:方法 說明

FillRectangle(Brush, x, y, width,height)

使用 Brush筆刷在(x, y)座標的長方形左上角繪出寬 width和高 height填滿的長方形

FillPolygon(Brush, Points) 使用 Brush筆刷以第 2個參數 Point物件陣列的座標繪出填滿的多邊形

DrawPie(Brush, x, y, width, height,startAngle, sweepAngle)

使用 Brush筆刷在(x, y)座標的長方形左上角,寬 width和高 height的長方形中,繪出從 startAngle開始共 sweepAngle角度的填

滿扇形DrawEllipse(Brush, x, y, width,

height)使用 Brush畫筆在(x, y)座標的長方形左上角,寬 width和高 height的長方形中,繪出

填滿的橢圓形

Page 19: 第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形 11-2 繪出文字和圖形 11-3 圖片檔案的載入與顯示 11-3 圖片檔案的載入與顯示

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

Page 20: 第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形 11-2 繪出文字和圖形 11-3 圖片檔案的載入與顯示 11-3 圖片檔案的載入與顯示

11-2-5 11-2-5 位移、縮放和旋轉畫布位移、縮放和旋轉畫布 -- 方方法法

GraphicsGraphics 物件提供位移、縮放和旋轉畫布的方法,物件提供位移、縮放和旋轉畫布的方法,如下表所示:如下表所示:方法 說明

TranslateTransform(x, y) 將畫布向右位移 x點,向下位移 y點ScaleTransform(sx, sy) 將畫布在 X軸放大 sx的比例,Y軸放大 sy的比例,

值大於 1是放大,0~1之間是縮小RotateTransform(Angle) 將畫布旋轉參數 Angle的角度,以度為單位

ResetTransform() 還原畫布表示沒有縮放、旋轉或位移

Page 21: 第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形 11-2 繪出文字和圖形 11-3 圖片檔案的載入與顯示 11-3 圖片檔案的載入與顯示

11-2-5 11-2-5 位移、縮放和旋轉畫布位移、縮放和旋轉畫布 -- 重重繪繪

如果需要顯示轉換效果,我們需要重繪畫如果需要顯示轉換效果,我們需要重繪畫布的圖形,此時是使用表單或控制項的布的圖形,此時是使用表單或控制項的Refresh()Refresh() 方法,如下所示:方法,如下所示:Me.Refresh()Me.Refresh()

lblOutput.Refresh()lblOutput.Refresh() 上述程式碼可以重繪表單或控制項,以此上述程式碼可以重繪表單或控制項,以此

例是表單和標籤控制項。例是表單和標籤控制項。

Page 22: 第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形 11-2 繪出文字和圖形 11-3 圖片檔案的載入與顯示 11-3 圖片檔案的載入與顯示

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

Page 23: 第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形 11-2 繪出文字和圖形 11-3 圖片檔案的載入與顯示 11-3 圖片檔案的載入與顯示

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

Page 24: 第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形 11-2 繪出文字和圖形 11-3 圖片檔案的載入與顯示 11-3 圖片檔案的載入與顯示

11-3-1 11-3-1 載入和顯示圖檔載入和顯示圖檔 -- 說明說明 除了在畫布使用除了在畫布使用 GraphicsGraphics 物件的方法來繪物件的方法來繪

出圖形外,如果擁有出圖形外,如果擁有 BMPBMP、、 GIFGIF或或 JPGJPG 等等格式現成圖檔,我們也可以建立格式現成圖檔,我們也可以建立 WindowsWindows應用程式,將圖檔載入和在畫布上顯示。應用程式,將圖檔載入和在畫布上顯示。

在在 Visual BasicVisual Basic 應用程式載入和顯示圖片應用程式載入和顯示圖片檔案的方法有很多種,這一節是使用檔案的方法有很多種,這一節是使用BitmapBitmap 物件來載入圖片後,以物件來載入圖片後,以DrawImage()DrawImage() 方法顯示圖片,下一節使用方法顯示圖片,下一節使用PictureBoxPictureBox 圖片盒控制項來載入和顯示圖圖片盒控制項來載入和顯示圖片檔案。片檔案。

Page 25: 第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形 11-2 繪出文字和圖形 11-3 圖片檔案的載入與顯示 11-3 圖片檔案的載入與顯示

11-3-1 11-3-1 載入和顯示圖檔載入和顯示圖檔 -Bitmap-Bitmap 物物件件

BitmapBitmap 物件的內容是儲存像素資料的圖檔影像,物件的內容是儲存像素資料的圖檔影像,需要使用需要使用 NewNew 關鍵字來建立此物件,如下所示:關鍵字來建立此物件,如下所示:

Dim buffer As Bitmap = _Dim buffer As Bitmap = _ New Bitmap(320, 220)New Bitmap(320, 220) 在建構子的第在建構子的第 11 個參數是個參數是 BitmapBitmap 物件的寬度物件的寬度

(以像素為單位),第(以像素為單位),第 22 個參數是高度,它是一個參數是高度,它是一個儲存在記憶體中,尺寸為個儲存在記憶體中,尺寸為 320 X 220320 X 220 的圖檔。的圖檔。

如果擁有現成圖片檔案,也可以使用如果擁有現成圖片檔案,也可以使用 BitmapBitmap 物物件來載入圖片檔案,如下所示:件來載入圖片檔案,如下所示:

Dim bmp = New Bitmap( _Dim bmp = New Bitmap( _ path & "sample.bmp")path & "sample.bmp")

Page 26: 第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形 11-2 繪出文字和圖形 11-3 圖片檔案的載入與顯示 11-3 圖片檔案的載入與顯示

11-3-1 11-3-1 載入和顯示圖檔載入和顯示圖檔 -- 使用使用BitmapBitmap 物件建立物件建立 GraphicsGraphics 物件物件

如果使用如果使用 BitmapBitmap 物件來建立物件來建立 GraphicsGraphics物件,我們就可以使用物件,我們就可以使用 GraphicsGraphics 物件方法物件方法來編輯來編輯 BitmapBitmap 物件儲存的圖形,因為在物件儲存的圖形,因為在GraphicsGraphics 物件上繪製的圖形,就是繪在物件上繪製的圖形,就是繪在BitmapBitmap 物件的的點陣圖上,如下所示:物件的的點陣圖上,如下所示:

Dim g As Graphics = _Dim g As Graphics = _

Graphics.FromImage(buffer)Graphics.FromImage(buffer)

g.Clear(Color.White)g.Clear(Color.White)

g.DrawLine(pen, x, y, e.X, e.Y)g.DrawLine(pen, x, y, e.X, e.Y)

Page 27: 第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形 11-2 繪出文字和圖形 11-3 圖片檔案的載入與顯示 11-3 圖片檔案的載入與顯示

11-3-1 11-3-1 載入和顯示圖檔載入和顯示圖檔 -- 在畫布顯在畫布顯示示 BitmapBitmap 物件物件

在表單或控制項畫布上顯示在表單或控制項畫布上顯示 BitmapBitmap 物件,物件,就是使用就是使用 DrawImage()DrawImage() 方法,如下所示:方法,如下所示:g.DrawImage(buffer, 1, 25)g.DrawImage(buffer, 1, 25)

g.DrawImage(bmp, 1, 25, bmp.Width, _g.DrawImage(bmp, 1, 25, bmp.Width, _

bmp.Height + 25)bmp.Height + 25) 上述程式碼可以將上述程式碼可以將 BitmapBitmap 物件物件 bufferbuffer 顯顯

示在畫布座標示在畫布座標 (1, 25)(1, 25) ,第,第 22 列指定圖形尺列指定圖形尺寸。寸。

Page 28: 第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形 11-2 繪出文字和圖形 11-3 圖片檔案的載入與顯示 11-3 圖片檔案的載入與顯示

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

Page 29: 第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形 11-2 繪出文字和圖形 11-3 圖片檔案的載入與顯示 11-3 圖片檔案的載入與顯示

11-3-2 PictureBox11-3-2 PictureBox 圖片盒控制項顯圖片盒控制項顯示圖片示圖片 -- 建立建立

PictureBoxPictureBox 圖片盒控制項是一種圖片控制項,可圖片盒控制項是一種圖片控制項,可以顯示點陣圖格式以顯示點陣圖格式 BMPBMP、、 GIFGIF或或 JPGJPG 等圖檔的等圖檔的內容。當在內容。當在 VBEVBE 建立好專案後,就可以在表單新建立好專案後,就可以在表單新增增 PictureBoxPictureBox 控制項,如下所示:控制項,如下所示:

Page 30: 第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形 11-2 繪出文字和圖形 11-3 圖片檔案的載入與顯示 11-3 圖片檔案的載入與顯示

11-3-2 PictureBox11-3-2 PictureBox 圖片盒控制項顯圖片盒控制項顯示圖片示圖片 -- 屬性屬性

PictureBoxPictureBox 控制項的常用屬性,如下表所控制項的常用屬性,如下表所示:示:屬性 說明Name 控制項名稱Image 設定和取得 BMP、GIF、JPG、ICO和WMF格式的點陣圖檔的

影像資料,在 VBE可以直接選取圖檔SizeMode 圖片顯示方式,其值是 PictureBoxMode列舉常數,Normal是

在控制項左上角顯示圖片,此為預設值,AutoSize依圖片尺寸自動調整控制項尺寸,CenterImage顯示在控制項中間,

StretchImage依控制項尺寸來調整,Zoom可以在控制項顯示完整圖片

Page 31: 第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形 11-2 繪出文字和圖形 11-3 圖片檔案的載入與顯示 11-3 圖片檔案的載入與顯示

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

Page 32: 第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形 11-2 繪出文字和圖形 11-3 圖片檔案的載入與顯示 11-3 圖片檔案的載入與顯示

11-3-3 11-3-3 捲軸控制項捲軸控制項 -- 建立建立 ScrollBarScrollBar 捲軸控制項是一種調整顯示位置的好捲軸控制項是一種調整顯示位置的好

工具,當文字內容太長或圖片太大時,就可以使工具,當文字內容太長或圖片太大時,就可以使用捲動軸來調整顯示位置。用捲動軸來調整顯示位置。

Visual BasicVisual Basic 捲軸控制項有兩種:一是垂直的捲軸控制項有兩種:一是垂直的VScrollBarVScrollBar 控制項;一是水平的控制項;一是水平的 HScrollBarHScrollBar 控控制項。制項。

Page 33: 第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形 11-2 繪出文字和圖形 11-3 圖片檔案的載入與顯示 11-3 圖片檔案的載入與顯示

11-3-3 11-3-3 捲軸控制項捲軸控制項 -- 屬性與事件屬性與事件 VScrollBarVScrollBar和和 HScrollBarHScrollBar 控制項的常用屬性與控制項的常用屬性與

事件,如下表所示:事件,如下表所示:屬性 說明Name 控制項名稱Value 存取捲軸控制項上捲動方塊目前位置的值

Maximum 存取捲動到最上方和最左方的最大值,預設值 100

Minimum 存取捲動到最下方和最右方的最小值,預設值 0

LargeChange 當捲動方塊是大距離移動時,此為 Value屬性的增減值,預設值為 10

SmallChange 當捲動方塊是小距離移動時,此為 Value屬性的增減值,預設值為 1

事件 說明Scroll 當捲動方塊使用滑鼠或鍵盤移動時,觸發此事件

Page 34: 第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形 11-2 繪出文字和圖形 11-3 圖片檔案的載入與顯示 11-3 圖片檔案的載入與顯示

11-3-3 11-3-3 捲軸控制項捲軸控制項 -- 繪出圖片的部繪出圖片的部分範圍分範圍

在在 PictureBoxPictureBox 控制項如果只顯示部分的圖檔內控制項如果只顯示部分的圖檔內容,首先定義長方形區域,請使用容,首先定義長方形區域,請使用 NewNew 關鍵字建關鍵字建立,如下所示:立,如下所示:

Dim oRect As Rectangle = New Rectangle(0, 0, _Dim oRect As Rectangle = New Rectangle(0, 0, _ ptbOutput.Width, ptbOutput.Height)ptbOutput.Width, ptbOutput.Height)Dim cRect As Rectangle = _Dim cRect As Rectangle = _ New Rectangle(hsbWidth.Value,vsbHeight.Value, _New Rectangle(hsbWidth.Value,vsbHeight.Value, _ ptbOutput.Width, ptbOutput.Height)ptbOutput.Width, ptbOutput.Height) 在建立好長方形的在建立好長方形的 RectangleRectangle 物件後,就可以使物件後,就可以使用用 DrawImage()DrawImage() 方法來顯示部分圖形,如下所方法來顯示部分圖形,如下所示:示:

g.DrawImage(ptbOutput.Image, oRect, cRect, _g.DrawImage(ptbOutput.Image, oRect, cRect, _ GraphicsUnit.Pixel)GraphicsUnit.Pixel)

Page 35: 第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形 11-2 繪出文字和圖形 11-3 圖片檔案的載入與顯示 11-3 圖片檔案的載入與顯示

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

Page 36: 第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形 11-2 繪出文字和圖形 11-3 圖片檔案的載入與顯示 11-3 圖片檔案的載入與顯示

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

Page 37: 第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形 11-2 繪出文字和圖形 11-3 圖片檔案的載入與顯示 11-3 圖片檔案的載入與顯示

11-4-1 11-4-1 計時器控制項計時器控制項 -- 建立建立 在在 Visual BasicVisual Basic 應用程式建立動畫需要使用應用程式建立動畫需要使用

TimerTimer 計時器控制項,它可以控制繪圖或圖片顯計時器控制項,它可以控制繪圖或圖片顯示。示。 TimerTimer 控制項是在指定間隔時間自動產生事控制項是在指定間隔時間自動產生事件,以便事件處理程序能夠建立動畫效果。件,以便事件處理程序能夠建立動畫效果。

Page 38: 第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形 11-2 繪出文字和圖形 11-3 圖片檔案的載入與顯示 11-3 圖片檔案的載入與顯示

11-4-1 11-4-1 計時器控制項計時器控制項 -- 屬性與事件屬性與事件 TimerTimer 控制項常用屬性與事件,如下表所控制項常用屬性與事件,如下表所

示:示:屬性 說明Name 控制項名稱

Enabled 是否啟動計時器控制項,預設值 False為不啟動,True為啟動Interval 設定觸發 Tick事件的間隔時間,預設值是 100毫秒(10-3秒)

事件 說明Tick 當 Enabled屬性為 True,在 Interval屬性的間隔時間到時,就會觸

發此事件

Page 39: 第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形 11-2 繪出文字和圖形 11-3 圖片檔案的載入與顯示 11-3 圖片檔案的載入與顯示

11-4-2 11-4-2 圖片的動畫效果圖片的動畫效果 在在 Visual BasicVisual Basic 應用程式只需使用計時器應用程式只需使用計時器

控制項,配合圖片載入與顯示,每次調整控制項,配合圖片載入與顯示,每次調整圖片位置後,就可以建立圖片移動的動畫圖片位置後,就可以建立圖片移動的動畫效果。效果。

Page 40: 第 11 章 繪圖與多媒體 11-1 繪圖的基礎 11-1 繪圖的基礎 11-2 繪出文字和圖形 11-2 繪出文字和圖形 11-3 圖片檔案的載入與顯示 11-3 圖片檔案的載入與顯示

11-5 11-5 應用實例:螢幕保護程式應用實例:螢幕保護程式 WindowsWindows作業系統的螢幕保護程式是當使用者作業系統的螢幕保護程式是當使用者

沒有使用電腦一段時間後,自動顯示的動畫畫面。沒有使用電腦一段時間後,自動顯示的動畫畫面。通常螢幕保護程式會顯示動態繪圖或圖片效果。通常螢幕保護程式會顯示動態繪圖或圖片效果。在在 Visual BasicVisual Basic 只需活用計時器控制項,就可以只需活用計時器控制項,就可以輕鬆建立自已的螢幕保護程式。輕鬆建立自已的螢幕保護程式。