Transcript 程式設計實習

程式設計實習
繪圖
畫布和繪圖工具
要繪圖，就必需要先建立『畫布』和『繪圖工具』。
畫布
畫圖工具
電腦繪圖的座標
在開始說明繪圖類別之前，我們先了解一下VB的座
標象限。在VB中繪圖區的左上角被定義為原點，x座
標與y座標皆為0，x座標向右邊越來越大，y座標則
是越向下越大。
0,0
畫布
在VB中，畫布可以是『表單』 、『圖片
盒』，但這兩種用在繪圖時圖形只是暫時
存在物件上，若有視窗覆蓋時所繪製之圖
形會消失，因此我們使用的是宣告在記憶
體中的Bitmap繪圖區 。
Bitmap物件類別
點陣圖記憶體圖像，即為系統於記憶體中所
闢出之存放點陣圖資料的區塊。
此一區塊之資料除了以指令釋放或是程式(序)
結束外，其資料並不會消失。
此物件除了可以繪圖外，亦可載入圖檔。
Bitmap物件宣告（一）
Dim 物件名稱 As New Bitmap(寬,高)
Dim Bmp As New Bitmap(410,410)
在記憶體中宣告一410x410的繪圖區
Bitmap物件宣告（二）
Dim 物件名稱 As Bitmap ………先宣告
Bitmap物件名稱=New Bitmap(寬,高)…程式中再指定
Dim Bmp As Bitmap
Bmp=New Bitmap(410,410)
在記憶體中宣告一410x410的繪圖區
Bitmap物件宣告使用實例
宣告一Bitmap物件
Dim Bmp As Bitmap
Private Form_Load(ByVal…
Bmp=New Bitmap(410,410) ‘宣告繪圖區並指定大小
End Sub
以PictureBox顯示Bitmap
PictureBox名稱.Image=Bitmap名稱
PictureBox1.Image=Bmp
Graphics物件
在VB2010中件提供了一些繪圖的方法，
可讓我們藉由這些繪圖方法讓我們畫出
各式各樣的幾何圖形，這些相關之繪圖
方法是定義在Graphics物件中。
有了這些能力再指定畫布就可繪製各式
圖形了。
將Bitmap物件指定給Graphic
Dim 繪圖類別名稱 As Graphics
繪圖類別名稱=Graphics.FromImage(Bitmap物件名稱）
Dim g As Graphics
．
．
g=Graphics.FromImage(bmp）
使用實例
宣告一Bitmap物件，並將其指定給Ｇ的繪圖物件
Dim Bmp As Bitmap
Dim G As Graphics
Private Form_Load(ByVal…
Bmp=New Bitmap(410,410) ‘宣告繪圖區並指定大小
G=Graphics.FromImage(Bmp)
End Sub
Graphics 類別常用方法
公用方法
Clear
傳入參數，使用某個指定的顏色，把畫布上所有像素顏色用這個指定的顏色取代。
Dispose
釋放Graphic取得的所有資源。
DrawBeziers
繪製貝茲曲線，讓點與點之間的聯繫有弧度。
DrawClosedCurve
繪製封閉的曲線。DrawClosedCurve會自動將開始的點與結束的點連接起來。
DrawCurve
繪製曲線。
DrawEllipse
繪製橢圓形。
DrawImage
DrawLine
將一組像素資料繪製到表單或控制項；當沒有指定圖像大小時，像素資料會以原始
大小繪製。
繪製直線。
DrawLines
繪製多條直線。(傳入數個點，連接每個點，在點與點之間用直線連接。)
DrawPolygon
繪製多邊型。(連接多個點，在點與點之間用直線連接)DrawPolygon會自動將開始的
點與結束的點連接起來。
DrawRectangle
繪製四邊形。
DrawString
繪製文字。
FillColsedCurve
用顏色填滿封閉曲線中的空間。與DrawClosedCurve相同，FillColsedCurve會自動
將開始的點與結束的點連接起來。
FillEllipse
繪製圓形，並用指定的顏色填滿圓中的空間。
FillRectangle
繪製多邊型，並用指定的顏色填滿四邊形中的空間。
畫線 DrawLine
語法：
Graphic名稱.DrawLine(畫筆,x1,y1,x2,y2)
畫筆：可指定所畫線條之顏色及粗細
可用系統內建之 Pens.預設色彩或自定
x1,y1：線條起點
x2,y2：線條終點
畫線範例
Private Sub Button1_Click(ByVal…
G.DrawLine(Pens.Red,0,0,409,409)
PictureBox1.Image=bmp ‘將繪圖區圖形顯示
End Sub
Pen物件的宣告
宣告方式： Dim 畫筆名稱 As Pen
建立方式： 畫筆名稱=New Pen(顏色,粗細)
Dim Pen As Pen
．
．
Pen=New Pen(Color.Red,3)
設定畫筆為紅色，其粗細為３個像素
Color物件自定顏色
語法： Color.FromArgb([A],R,G,B)
說明：
Ａ－不透明度，0~255值越大代表越不透明
Ｒ－紅色濃度，0~255值越大代表顏色強度越大
Ｇ－綠色濃度，0~255值越大代表顏色強度越大
Ｂ－藍色濃度，0~255值越大代表顏色強度越大
分離Color的組成值
取Alpha值語法： 顏色控制項.Color.A
取紅色值語法：顏色控制項.Color.R
取綠色值語法：顏色控制項.Color.G
取藍色值語法：顏色控制項.Color.B
變更已宣告Pen物件的顏色及粗細
指定顏色： P物件名稱.Color=顏色物件
指定粗細： P物件名稱.Width=數值
P.Color=Color.Red
P.Width=3
設定畫筆為紅色，其粗細為３個像素
以自定畫筆畫線
Private Sub Button1_Click(ByVal…
P.Color=Color.Blue
P.Width=3
G.DrawLine(P,0,0,409,409)
PictureBox1.Image=bmp ‘將繪圖區圖形顯示
End Sub
清除畫布
語法：
Graphic名稱.Clear(顏色)
顏色：
為Color物件，可用系統內建之色彩，如：
Color.White
範例：
G.Clear(Color.White)
清除範例
Private Sub Button2_Click(ByVal…
G.Clear(Color.White) ‘清除繪圖區並填入白色
PictureBox1.Image=bmp ‘將繪圖區圖形顯示
End Sub
畫線範例－雷射線
Private Sub Button3_Click(ByVal…
Timer1.Enabled = Not Timer1.Enabled
End Sub
Private Sub Timer1_Tick(ByVal…
Dim X,Y As Integer
P.Color=Color.FromArgb(Rnd*255,Rnd*255, Rnd*255)
P.Width=Fix(Rnd*5)+1
X=Fix(Rnd*409):Y=Fix(Rnd*409)
G.DrawLine(P,205,205,X,Y)
PictureBox1.Image=bmp
End Sub
‘將繪圖區圖形顯示
畫線範例－連續線
Private Form_Load(ByVal…
OldX=Fix(Rnd*410):OldY=Fix(Rnd*410)
End Sub
Private Sub Button4_Click(ByVal …
Dim X,Y As Integer
P.Color=Color.Red:P.Width=2
X=Fix(Rnd*410):Y=Fix(Rnd*410)
G.DrawLine(P,OldX,OldY,X,Y)
OldX=X:OldY=Y
PictureBox1.Image=bmp ‘將繪圖區圖形顯示
End Sub
畫線範例－格線(10格x10格)
Private Sub DrawGrid()
Dim X,Y As Integer
For Y=0 to 400 Step 40
G.DrawLine(Pens.Blue,4,Y+4,404,Y+4)
Next
For X=0 to 400 Step 40
G.DrawLine(Pens.Blue,X+4,4,X+4,404)
Next
PictureBox1.Image=bmp ‘將繪圖區圖形顯示
End Sub
Private Sub Button5_Click(ByVal …
DrawGrid()
End Sub
求圓上任一點的方法
X  r cos

Y  r sin 
畫線範例－利用圓方程式畫圓
配合bmp，圓心為205,205
Private Sub Button6_Click(ByVal …
Dim X,Y,I As Integer
Dim S As Single
For I=0 To 360 Step 36 ‘找出圓上11點
S=(Math.PI/180)*I
X=204+150*Math.Sin(S)
Y=204+150*Math.Cos(S)
G.DrawLine(Pens.Red,204,204,X,Y)
Next
PictureBox1.Image=Bmp
End Sub
畫線範例－接續上例畫封閉線
Private Sub Button7_Click(ByVal …
Dim X,Y,I As Integer
Dim S As Single
OldX=0:OldY=0
For I=0 To 360 Step 36 ‘找出圓上11點
S = (Math.PI / 180) * I
X = 204 + 150 * Math.Sin(S)
Y = 204 + 150 * Math.Cos(S)
G.DrawLine(Pens.Red, 204, 204, X, Y)
If I <> 0 Then
G.DrawLine(Pens.Black, OldX, OldY, X, Y)
End If
OldX = X : OldY = Y
Next
PictureBox1.Image=Bmp
End Sub
畫正弦波
由上圖可知要畫正弦波，橫軸設為角度、縱
軸設為SINθ之值，即可描出；但在繪圖區其
座標系統皆為像素，故需將角度轉為像素方
能繪圖。
畫正弦波
對應之總角度 欲描繪之實際角度( )

X座標軸總像素 轉換後之座標值( X )
X座標軸總像素
X  
對應之總角度
或
對應之總角度
 X
X座標軸總像素
格線區之水平像素
角度和座標間互換
角度轉座標－
若要在繪圖區畫一正弦波，則X軸所要畫的
總角度為360度，當角度為90度時對應的座
標點為：
X = 90°× ( 400/360°)=100
座標轉角度－
若要在繪圖區畫一正弦波，則X軸所要畫的
總角度為360度，當座標位置為100時對應的
角度應為：
θ = 100 × ( 360°/ 400)=90°
格線區之水平像素為
400點
畫線範例－畫一個正弦波
Private Sub Button7_Click(ByVal …
Dim X,Y,I As Integer
Dim S As Single
OldX=4:OldY=204
For I=0 To 400
S = (2*Math.PI/400) * I
X = 4+I
Y = 204 - 150 * Math.Sin(S)
G.DrawLine(Pens.Red, OldX, OldY, X, Y)
OldX = X : OldY = Y
Next
PictureBox1.Image=Bmp
End Sub
若要2個正弦波則只要將2改為4即可(因二個正弦波之總角度
為4PI，其餘以此類推）
畫矩形 DrawRectangle
語法：
Graphic名稱.DrawRectangle(畫筆,左上角X座標,左上角Y座
標,矩形寬度,矩形高度)
畫筆：可指定所畫線條之顏色及粗細
可用系統內建之 Pens.預設色彩或自定
(左上角座標X,左上角座標Y)
矩形高度
矩形寬度
矩形繪製範例一
Private Sub Button9_Click(ByVal …
Dim I as Integer
For I=1 To 10
P.Color=Color.Brown
P.Width=2
G.DrawRectangle(P, 10,10, 20*i, 20*i)
Next
PictureBox1.Image=Bmp
End Sub
矩形繪製範例二
Private Sub Button10_Click(ByVal …
Dim I as Integer
For I=1 To 10
P.Color=Color.Brown
P.Width=2
G.DrawRectangle(P, 204-i*10,204-i*10, 20*i, 20*i)
Next
PictureBox1.Image=Bmp
End Sub
畫實心矩形 FillRectangle
語法：
Graphic名稱.FillRectangle(筆刷,左上角X座標,左上角Y座
標,矩形寬度,矩形高度)
筆刷：類似繪圖軟體之油漆刷，可用來填色，
VB中可使用的預設筆刷有二種：
純色筆刷－
Dim MyBrush As SolidBrush(顏色)
以圖檔做為填色的筆刷－
Dim MyBrush As TextureBrush(New Bitmap(圖檔名稱))
另亦可呼叫Drawing2D類別使用漸層及影線，在此不做介紹
實心矩形繪製範例
Private Sub Button11_Click(ByVal …
Dim I as Integer
Dim MyBrush As New SolidBrush(Color.White) ‘先預設為白色筆刷
For I=10 To 1 Step -1
MyBrush.Color=Color.FromArgb(Rnd*255,Rnd*255,Rnd*255)
G.FillRectangle(MyBrush, 204-i*10,204-i*10, 20*i, 20*i)
Next
PictureBox1.Image=Bmp
End Sub
畫楕圓 DrawEllipse
語法：
Graphic名稱.DrawEllipse(畫筆,左上角X座標,左上角Y座標,
楕圓寬度,楕圓高度)
畫筆：可指定所畫線條之顏色及粗細
可用系統內建之 Pens.預設色彩或自定
(左上角座標X,左上角座標Y)
楕圓高度
楕圓寬度
楕圓繪製範例－同心圓
Private Sub Button12_Click(ByVal …
Dim I as Integer
For I=1 To 10
P.Color=Color.Brown
P.Width=2
G.DrawEllipse(P, 204-i*10,204-i*10, 20*i, 20*i)
Next
PictureBox1.Image=Bmp
End Sub
畫實心圓 FillEllipse
語法：
Graphic名稱. FillEllipse(筆刷,左上角X座標,左上角Y座
標,圓寬度,圓高度)
筆刷：類似繪圖軟體之油漆刷，可用來填色，
VB中可使用的預設筆刷有二種：
純色筆刷－
Dim MyBrush As SolidBrush(顏色)
以圖檔做為填色的筆刷－
Dim MyBrush As TextureBrush(New Bitmap(圖檔名稱))
另亦可呼叫Drawing2D類別使用漸層及影線，在此不做介紹
實心矩形繪製範例
Private Sub Button13_Click(ByVal …
Dim I as Integer
Dim MyBrush As New SolidBrush(Color.White) ‘先預設為白色筆刷
For I=10 To 1 Step -1
MyBrush.Color=Color.FromArgb(Rnd*255,Rnd*255,Rnd*255)
G.FillEllipse(MyBrush, 204-i*10,204-i*10, 20*i, 20*i)
Next
PictureBox1.Image=Bmp
End Sub
畫弧線 DrawArc
語法：
Graphic名稱.DrawArc(畫筆,左上角X座標,左上角Y座標,弧
線寬度,弧線高度,弧線起始角度,順時針掃瞄角度)
畫筆：可指定所畫線條之顏色及粗細
(左上角座標X,左上角座標Y)
弧線掃瞄角度
(以度為單位)
弧線起點角度
(以度為單位)
弧線高度
弧線寬度
上圖之弧起點角為0度，掃瞄角為90度；若角度為負時則為逆時
針方向掃瞄
弧線範例
Private Sub Button14_Click(ByVal …
‘弧線起始角由TextBox1設定,掃瞄角度由TextBox2設定
Dim SA, EA As Integer
SA = Val(TextBox1.Text)
EA = Val(TextBox2.Text)
DrawGrid()
P.Width = 2
P.Color = Color.Red
G.DrawArc(P, 124, 124, 160, 160, SA, EA)
PictureBox1.Image=Bmp
End Sub
SE=0、EA=90
畫扇形 DrawPie
語法：
Graphic名稱.DrawPie(畫筆,左上角X座標,左上角Y座標,弧
線寬度,弧線高度,弧線起始角度,順時針掃瞄角度)
畫筆：可指定所畫線條之顏色及粗細
(左上角座標X,左上角座標Y)
弧線起點角度
(以度為單位)
弧線掃瞄角度
(以度為單位)
弧線高度
弧線寬度
和畫弧不同的是，扇形為封閉之弧線，即畫完後會從圓心到弧
的兩個端點以兩條線封閉起來
扇形範例
Private Sub Button15_Click(ByVal …
‘扇形起始角由TextBox1設定,掃瞄角度由TextBox2設定
Dim SA, EA As Integer
SA = Val(TextBox1.Text)
EA = Val(TextBox2.Text)
DrawGrid()
P.Width = 2
P.Color = Color.Red
G.DrawPie(P, 124, 124, 160, 160, SA, EA)
PictureBox1.Image=Bmp
End Sub
SE=0、EA=90
畫實心扇形 FillPie
語法：
Graphic名稱.FullPie(筆刷,左上角X座標,左上角Y座標,弧
線寬度,弧線高度,弧線起始角度,順時針掃瞄角度)
畫刷：類似繪圖軟體之油漆刷，可用來填色
(左上角座標X,左上角座標
Y)
弧線掃瞄角度
(以度為單位)
弧線起點角度
(以度為單位)
弧線高度
弧線寬度
和畫弧不同的是，扇形為封閉之弧線，即畫完後會從圓心到弧
的兩個端點以兩條線封閉起來
實心扇形範例
Private Sub Button16_Click(ByVal …
‘扇形起始角由TextBox1設定,掃瞄角度由TextBox2設定
Dim SA, EA As Integer
SA = Val(TextBox1.Text)
EA = Val(TextBox2.Text)
DrawGrid()
G.FillPie(Brushes.Green, 124, 124, 160, 160, SA, EA)
PictureBox1.Image=Bmp
End Sub
SE=0、EA=90
畫字串 DrawString
語法：
Graphic名稱.DraweString(字串,字型,筆刷,x,y)
字串：要顯示之文字，為字串型態。
字型：可設定顯示文字之『字型』、『大小』及『樣
式』
Dim F As New Font(“細明體”,12, FontStyle.Regular）
X,Y：要顯示字串之座標點。
繪製字串範例
Private Sub Button16_Click(ByVal …
Dim F As New Font("新細明體", 12, FontStyle.Regular)
Dim I As Integer
For I = 0 To 20 Step 5
G.DrawString("String", F, Brushes.Red, I * 5, I * 5)
Next
PictureBox1.Image=Bmp
End Sub