第 12 章 聲色大全-- 動畫&繪圖.

Presentation on theme: "第 12 章 聲色大全-- 動畫&繪圖."— Presentation transcript:

1 第 12 章 聲色大全 動畫&繪圖

2 PictureBox 圖片控制項 屬性 Image SizeMode BorderStyle(外框樣式)
Location.x , Location.y Left, Top (相當於Location.x , Location.y) Size.Width(寬度)、Size.Heigth(高度)

3 載入圖片的方法 載入圖片 清除圖片 PictureBox1.Load(“c:\ch12\pig.fig”)
PictureBox1.Image=Image.FormFile(“c:\ch12\pig.fig”) PictureBox1.Image=new Bitmap(“c:\ch12\pig.fig”) 清除圖片 PictureBox1.Image=Nothing

4 圖片位置和尺寸的調整 位置 尺寸 PictureBox1.Location=New Point(22,66) 或
PictureBox1.Left=22 PictureBox1.Top=66 尺寸 PictureBox1.Size=New Size(Width,Height) 縮小一半 PictureBox1.Size=New Size(picturebox1.Width/2, picturebox1.Height/2) PictureBox1.Width=picturebox1.width/2 PictureBox1.Height=picturebox1.Height/2

5 ScrollBar 屬性 Value Maximum (defalut=100) Minimum (defalut=0)
SmallChange(default=1) ‘微動鈕 LargeChange(default=10) ‘快動區 Private Sub HScrollBar1_Scroll(ByVal……..) Handles HScrollBar1.Scroll Dim temp As Integer temp = 376 PictureBox10.Width = temp * HScrollBar1.Value / 100 End Sub Private Sub VScrollBar1_Scroll(ByVal………) Handles VScrollBar1.Scroll temp = 261 PictureBox10.Height = temp * VScrollBar1.Value / 100

6 TrackBar 屬性 Value Maximum (defalut=10) Minimum (defalut=0)
SmallChange(default=1) ‘微動鈕 LargeChange(default=5) ‘快動區 Orientation ‘水平或垂直 TickFrequency ‘刻度距離 TickStyle ‘設定外形 Private Sub TrackBar1_Scroll(ByVal……) Handles TrackBar1.Scroll Dim speed As Integer speed = TrackBar1.Value If speed <> 0 Then Timer2.Enabled = True Timer2.Interval = 100 / speed Else Timer2.Enabled = False End If End Sub

7 Color Color.FromArgb([A], R, G, B) Color.顏色 使用方法： A:透明度(0:透明, 255:不透明)
Color.pink Color.blue 使用方法： button1.backcolor=color.blue 或 button1.backcolor=color.fromargb(0,0,255) 調色盤 Private Sub NumericUpDown_ValueChanged(ByVal….) Handles NumericUpDown1.ValueChanged, NumericUpDown2.ValueChanged, NumericUpDown3.ValueChanged PictureBox11.BackColor = Color.FromArgb(NumericUpDown1.Value, NumericUpDown2.Value,NumericUpDown3.Value) End Sub

8 聲音(參考P.222~225) My.Computer.audio(聲音檔, 播放方式) My.Computer.audio.stop()
audioPlayMode.Background audioPlayMode.WaittoComplete audioPlayMode.BackgroundLoop My.Computer.audio.stop() 使用方法： My.Computer.audio(“c:\ding.wav”,audioPlayMode.Background) 只能播放WAV及系統音效

9 Windows Media Player 工具箱按滑鼠右鍵選擇項目com元件Windows Media Player 控制撥放
AxWindowsMediaPlayer1.Ctlcontrols.play() AxWindowsMediaPlayer1.Ctlcontrols.pause() AxWindowsMediaPlayer1.Ctlcontrols.stop() AxWindowsMediaPlayer1.Ctlcontrols.previous() AxWindowsMediaPlayer1.Ctlcontrols.next() Private Sub 影片ToolStripMenuItem_Click(ByVal) Handles 影片ToolStripMenuItem.Click AxWindowsMediaPlayer1.Visible = True AxWindowsMediaPlayer1.URL = path & "5.wmv" AxWindowsMediaPlayer1.Ctlcontrols.play() End Sub

10 LinkLable Process.start 網址：Process.start(“tw.yahoo.com”)
檔案：Process.start(“c:\windows\system32\mspaint.exe”) Private Sub LinkLabel1_LinkClicked(ByVal ….) Handles LinkLabel1.LinkClicked Process.Start(" End Sub

11 一、繪圖控制項 繪圖控制項是指可使用繪圖方法來繪製幾何圖形或圖案的控制項，例如： 表單（Form） 圖片方塊（PictureBox）
群組方塊（GroupBox）

12 二、繪圖區域（1/2） 繪圖區域（工作區）是指繪圖控制項上可繪製圖形的區域，由Size屬性決定 表單工作區寬度為300 表單工作區高度為
在繪圖區域範圍內所繪製的圓形 超出繪圖區域範圍所繪製的圓形

13 二、繪圖區域（2/2） 變更繪圖區域的大小 在屬性視窗修改Size屬性設定值 撰寫程式碼
語法： 繪圖控制項名稱.Size = New System.Drawing.Size(寬度, 高度) 例： Me.Size = New System.Drawing.Size(550, 400) 或 Me.Size=New Size(Width,Height)

14 三、座標系統（1/2） 繪圖區域 繪圖區域的座標系統可用來表示圖形的位置
以繪圖區域的左上角為原點，水平方向為橫座標，垂直方向為縱座標，並以像素為座標單位 繪圖區域 (0, 0) (100, 0) (0, 100) X 軸 Y 軸 (200, 0) (200, 200)

15 三、座標系統（2/2） 每一個繪圖區域都有其獨立的座標系統 表單原點 (0, 0) 圖片方塊 原點(0, 0) 起始點座 標(50, 50)
120

16 四、容器內控制項的位置表示 設定控制項的Location屬性，可調整其在容器中的座標位置 設定控制項與其它控制項間的上、下、左、右最小間距

17 五、繪圖的事件（1/2） Windows作業系統每隔一段時間只會重繪視窗及視窗元件，而不會重繪使用繪圖方法所繪製的圖案
對表單進行相關操作時，所繪製的圖案可能會因此消失 Step2：按此鈕， 縮小表單 Step1：在表單上 按一下， 即會顯示 蝴蝶圖案 Step3：還原表單；蝴 蝶圖案消失了

18 五、繪圖的事件（2/2） 繪圖控制項的Paint事件是一種系統事件，會在作業系統重新繪製繪圖控制項時發生

19 六、線段與文字的繪製（1/7） DrawLine( )方法可用來繪製直線
語法： Graphics物件.DrawLine(線條色彩, 線段起始點X座標值X1, 線段起始點Y座標值Y1, 線段終點X座標值X2, 線段終點Y座標值Y2) 說明： 在起始座標 (X1, Y1) 到終點座標 (X2, Y2) 間繪製一條直線 「線條色彩」參數是使用Pens類別提供的線條色彩屬性，來作為畫筆的色彩 範例：表單上繪製兩條相交的直線 Private Sub Form1_Paint(ByVal sender……) Handles Me.Paint '建立一個Graphics物件並將表單的繪圖介面指定給該物件graph Dim graph As Graphics = Me.CreateGraphics '繪製由左往右斜的直線，顏色為藍色 graph.DrawLine(Pens.Blue, 15, 20, 270, 250) '繪製由右往左斜的直線，顏色為深綠色 graph.DrawLine(Pens.DarkGreen, 270, 20, 15, 250) End Sub

20 六、線段與文字的繪製（2/7） DrawCurve( )方法可用來繪製曲線
語法： Graphics物件.DrawCurve(線條色彩, 座標陣列) 說明： 依照座標陣列中的座標，來繪製一條曲線 「線條色彩」參數是使用Pens類別提供的線條色彩屬性，來作為畫筆的色彩 「座標陣列」參數是用來存放所要繪製曲線的路徑座標值。它必須宣告為Point（點）結構 語法： Dim 座標陣列名稱( ) As Point = {Point1, Point2, Point3, …} 例： Dim Point1 As New Point(10, 10) Dim Point2 As New Point(40, 60) Dim Point3 As New Point(60, 30) Dim Point4 As New Point(80, 10) '宣告1個含有4個點座標的座標陣列 Dim Points( ) As Point = {point1, point2, point3, point4}

21 六、線段與文字的繪製（3/7） 範例： 在表單上繪製一個打勾的曲線
Private Sub Form1_Paint(ByVal sender……) Handles Me.Paint Dim graph As Graphics = Me.CreateGraphics '建立三個Point物件並設定其座標值 Dim point1 As New Point(75, 150) Dim point2 As New Point(120, 200) Dim point3 As New Point(240, 40) '建立一個座標陣列並設定其包含Poin1～Point3 Dim points() As Point = {point1, point2, point3} '繪製一個打勾的曲線圖案 graph.DrawCurve(Pens.Purple, points) End Sub

22 Pen類別 為了繪製出不同線條粗細的圖形，可宣告一個Pen類別的物件來指定線條粗細
語法： Dim Pen物件名稱 As New Pen(色彩常數[, 線條粗細]) 例： Dim graph As Graphics = Me.CreateGraphics '宣告一個藍色畫筆且畫筆寬度為2 Dim bluepen As New Pen(Color.Blue, 2) graph.DrawLine(bluepen, 50, 50, 150, 100) bluepen.Width = '重新定義畫筆的寬度為5

23 Color Pen Color.FromArgb([A], R, G, B) Color.顏色 使用方法：
Color.pink Color.blue 使用方法： Dim bluepen As New Pen(Color.Blue, 2) 或 Dim bluepen As New Pen(color.fromargb(0,0,255), 2)

24 六、線段與文字的繪製（4/7） DrawString( )方法可用來繪製文字
語法： Graphics物件.DrawString(繪製的文字, 字型, 筆刷色彩, 繪製起始點X座標值X1, 繪製起始點Y座標值Y1) 說明： 在起始座標(X1, Y1)繪製文字 在「繪製的文字」參數前後必須加上雙引號（“），標示所要繪製文字的範圍 「字型」參數是用來設定所要繪製文字的字型、字型樣式、及大小 「筆刷色彩」參數是用來設定所要繪製文字的色彩 範例： Private Sub Button1_Click(ByVal sender……) Handles Button1.Click Dim graph As Graphics = Me.CreateGraphics Me.Refresh() '清除表單上所繪製的圖形 graph.DrawString("眼睛", Me.Font, Brushes.Blue, 280, 100) End Sub

25 七、Font類別 為了使繪製文字的字型樣式更富變化，可宣告一個Font類別的物件來指定文字字型
語法： Dim Font物件名稱 As New Font("字型"[, 大小, 字型樣式]) 例： Dim graph As Graphics = Me.CreateGraphics Dim font1 As New Font("標楷體", 16, FontStyle.Bold) graph.DrawString("程式", font1, Brushes.Black, 80, 60)

26 八、幾何圖形的繪製（1/7） DrawRectangle( )方法可用來繪製矩形 範例： 在表單上繪製兩個矩形
語法： Graphics物件.DrawRectangle(線條色彩, 矩形左上角的X座標值X1,矩形左上角的Y座標值Y1, 矩形的寬度W, 矩形的高度H) 說明： 以座標(X1, Y1)為起始點，繪製一個寬為W、高為H的無填色矩形 「線條色彩」參數是使用Pens類別提供的線條色彩屬性，來作為畫筆的色彩 範例： 在表單上繪製兩個矩形 Private Sub Form1_Paint(ByVal sender……) Handles Me.Paint Dim graph As Graphics = Me.CreateGraphics '繪製兩個矩形 graph.DrawRectangle(Pens.Coral, 50, 50, 120, 120) graph.DrawRectangle(Pens.DarkGreen, 100, 100, 120, 120) End Sub

27 八、幾何圖形的繪製（2/7） DrawEllipse( )方法可用來繪製圓形或橢圓形
語法： Graphics物件.DrawEllipse(線條色彩, 繪圖範圍) 說明： 在定義的繪圖範圍內，繪製一個無填色橢圓形或圓形 「繪圖範圍」參數必須宣告為Rectangle（矩形）資料型別 語法： Dim 繪圖範圍名稱 As New Rectangle(矩形左上角的X座標值X1, 矩形左上角的Y座標值Y1, 矩形的寬度W, 矩形的高度H) 例： Dim rect As New Rectangle(35, 35, 150, 200) 「線條色彩」參數是使用System.Drawing類別下的Pens類別，來作為畫筆的色彩

28 八、幾何圖形的繪製（3/7） 範例： 在表單上繪製一個圓形及橢圓形
Private Sub Form1_Paint(ByVal sender……) Handles Me.Paint Dim graph As Graphics = Me.CreateGraphics Dim rect1 As New Rectangle(30, 100, 220, 50) '宣告一個橘色畫筆且畫筆寬度為3 Dim drawpen As New Pen(Color.SandyBrown, 3) '繪製一個橘色的橢圓形 graph.DrawEllipse(drawpen, rect1) Dim rect2 As New Rectangle(75, 60, 130, 130) '繪製一個咖啡色的圓形 graph.DrawEllipse(Pens.Brown, rect2) End Sub

29 八、幾何圖形的繪製（4/7） DrawPolygon( )方法可用來繪製多邊形
語法： Graphics物件.DrawPolygon(線條色彩, 座標陣列) 說明： 依照座標陣列的座標，來繪製一個多邊形 「線條色彩」參數是使用Pens類別提供的線條色彩屬性，來作為畫筆的色彩 「座標陣列」參數是用來存放所要繪製多邊形的路徑座標值；須宣告為Point（點）結構

30 八、幾何圖形的繪製（5/7） 範例： 在表單上繪製一個五邊形
Private Sub Form1_Paint(ByVal sender……) Handles Me.Paint Dim graph As Graphics = Me.CreateGraphics Dim point1 As New Point(150, 40) Dim point2 As New Point(60, 105) Dim point3 As New Point(95, 195) Dim point4 As New Point(205, 195) Dim point5 As New Point(240, 105) Dim points() As Point = {point1, point2, point3, _ point4, point5} graph.DrawPolygon(Pens.Green, points) '繪製五邊形 End Sub

31 九、繪製填色圖案 Fillrectangle( )方法可用來繪製填色矩形 FillEllipse( )方法可用來繪製填色圓形或橢圓形
語法： Graphics物件.FillRectangle(筆刷色彩, 矩形左上角的X座標值X1, 矩形左上角的Y座標值Y1, 矩形的寬度W, 矩形的高度H) FillEllipse( )方法可用來繪製填色圓形或橢圓形 語法： Graphics物件.FillEllipse(筆刷色彩, 繪圖範圍) FillPolygon( )方法可用來繪製填色多邊形 語法： Graphics物件.FillPolygon(筆刷色彩, 座標陣列) 例： graph.DrawRectangle(Brushes.Coral, 50, 50, 120, 120)

32 Brush類別 語法： 例： Dim c As New SolidBrush(Color.FromArgb(255,0, 0))
Dim brush物件名稱 As New SolidBrush (色彩常數) Dim brush物件名稱 As New TextureBrush (bitmap) 例： Dim c As New SolidBrush(Color.FromArgb(255,0, 0)) Dim d As New TextureBrush(New Bitmap("C:\Documents and Settings\user\桌面\dog pic\dog1.gif"))

33 Color Brush Color.FromArgb([A], R, G, B) Color.顏色 使用方法：
Color.pink Color.blue 使用方法： Dim b As New SolidBrush(Color.blue))或 Dim b As New SolidBrush (color.fromargb(0,0,255))

34 十、點陣影像的建立 Bitmap類別可用來建立相當於畫布的物件，以處理點陣影像 這是一個利用Bitmap物件來顯示楓葉點陣影像

35 十一、建立Bitmap物件（1/4） 將點陣影像指定作為Bitmap物件的內容 將控制項所顯示的圖案指定給Bitmap物件
語法：Dim Bitmap物件名稱 As New Bitmap(控制項名.Image) 例：Dim bmpA As New Bitmap(PictureBox1.Image) PictureBox1所顯示的花朵圖案 bmpA

36 十一、建立Bitmap物件（2/4） 將儲存在磁碟機中的影像圖檔指定給Bitmap物件
語法：Dim Bitmap物件名稱 As New Bitmap("影像圖檔的路徑") 例：Dim bmpB As New Bitmap("C:\我的圖片\flowers.jpg") 儲存在 "C:\我的圖片" 資料夾下的花朵圖案 Ｃ磁碟機 bmpB

37 十一、建立Bitmap物件（3/4） 設定Bitmap物件的大小
語法：Dim Bitmap物件名稱 As New Bitmap(寬度大小, 高度大小) 例：Dim bmpC As New Bitmap(800, 600) bmpC物件的大小為 800 pixels x 600 pixels bmpC

38 十一、建立Bitmap物件（4/4） 利用圖片方塊來顯示Bitmap物件中的點陣影像
例： Dim bmpD As New Bitmap("C:\Bird.jpg") PictureBox1.Image = bmpD Q：上 V.S. 下有何不同??? 載入圖片的方法 PictureBox1.Load(“c:\ch12\pig.fig”) PictureBox1.Image=Image.FormFile(“c:\ch12\pig.fig”) PictureBox1.Image=new Bitmap(“c:\ch12\pig.fig”)

39 十二、DrawImage( )方法 可用來繪製存放在Bitmap物件中的影像
語法： Graphics物件名稱.DrawImage(Bitmap物件, 繪製影像的起始點X座標值X1, 繪製影像的起始點Y座標值Y1) 例： Dim graph As Graphics = Me.Creategraphics Dim bmpE As New Bitmap("C:\我的電腦\Tower.jpg") graph.DrawImage(bmpE, 280, 100)

40 十三、擷取影像（1/2） Clone( )方法可用來取得畫布上的部分影像
語法：Bitmap物件2 = Bitmap物件1.Clone(擷取範圍, 影像格式) 說明： 將在Bitmap物件1中擷取到的局部影像，設定給Bitmap物件2 「擷取範圍」參數是用來設定要在Bitmap物件1中擷取的影像範圍大小；須宣告為Rectangle結構 「影像格式」參數是用來設定所要取得影像資料的格式； 一般設為 "PixelFormat"（即像素資料）

41 十三、擷取影像（2/2） 例： Dim rect As New Rectangel(30, 10, 70, 70) bmpB = bmpA.Clone(rect, bmpa.PixelFormat) 70 座標值為(30, 10) bmpA的內容 bmpB的內容 使用Clone( )方法

42 十四、去背處理（1/2） MakeTransparent( )方法可用來去除畫布中之影像的背景色彩
語法： Bitmap物件名稱.MakeTransparent(色彩常數) 說明： 依據色彩常數所代表的色彩，將畫布物件中之影像含有該色彩的像素部分設為透明 「色彩常數」參數是用來指定要去除的背景色彩 只能去除單一的背景色彩

43 十四、去背處理（2/2） 例： bmp.MakeTransparent(Color.Black) 背景色為黑色 去背處理 原bmp的內容