第九章繪圖函數與元件（應用：直線與形狀）

1

第九章繪圖函數與元件（應用：直線與形狀）

2

章節預覽

• 控制項及 Visual Basic 相關基本知識– 9.1 座標– 9.2 設定顏色– 9.8 直線 (Line) 控制項– 9.9 形狀 (Shape) 控制項– 9.10 本章整合應用實例

• 函數– 9.3 繪點－ PSet 方法– 9.4 繪線、方框、方塊－ Line 方法– 9.5 繪圓、橢圓、弧、扇形－ Circle 方法– 9.6 吸取顏色－ Point 方法– 9.7 LoadPicture 函數、 SavePicture 敘述與 App.Path 屬性

3

9.1 ：座標

• 許多的繪圖函數皆與 Visual Basic 的座標系統息息相關，因此，首先介紹與繪圖相關的座標屬性。

• ScaleMode 屬性– 只有表單、圖片方塊、印表機 3 種物件才有 ScaleMode 屬性。– 用來設定物件的內部座標單位，特別注意的是 ScaleMode 只能改變物件內部的座標單

位而無法改變物件的外部座標單位。 ScaleMode 的屬性值如下：屬性值說明

0由使用者自訂座標系統。（當 ScaleTop, ScaleLeft, ScaleHeight, ScaleWidth 的值改變時，系統會自動設定 ScaleMode 為 0 ）

1 預設值，以 Twip 為單位（ 1 Twip = 1/1440 英吋）。2 以點（ Point ）為單位（ 1 點 = 1/72 英吋）。3 以像素（ Pixel ）為單位。4 以字元（ Character ）為單位（每個字元高 1/6 英吋、寬 1/12 英吋）。5 以英吋（ inch ）為單位。6 以公厘（ mm ）為單位。7 以公分（ cm ）為單位。

4

9.1 ：座標

• ScaleMode 屬性– ScaleMode 屬性是用來設定物件內部座標的單位而非表單外部的座標單位– 設定 ScaleMode 屬性常常必須配合設定其他的屬性，例如 ScaleTop 、 ScaleLeft 、

ScaleHeight 、 ScaleWidth 。這些屬性與物件外部相關的屬性名稱類似但功能不同

• ScaleMode 、 ScaleTop 、 ScaleLeft 、 ScaleHeight 、 ScaleWidth屬性只有表單、圖片方塊、印表機等物件才有，而單位由 ScaleMode 屬性值決定。

屬性值說明ScaleMode 設定物件內部座標系統的單位。ScaleLeft 設定物件左上角坐標的 X 值（可為負值）。ScaleTop 設定物件左上角坐標的 Y 值（可為負值）。ScaleWidth 設定物件 X 軸的寬度。ScaleHeight 設定物件 Y 軸方向的高度。 Left 設定物件左邊界與母件左邊界的距離（單位由母件決定）。 Top 設定物件上邊界與母件上邊界的距離（單位由母件決定）。 Width 設定物件的寬度（單位由母件決定）。 Height 設定表物件的高度（單位由母件決定）。

5

9.1 ：座標

• 上圖的表單可說明這些屬性有何不同， Width 、 Height 、 Left 、 Top 都是指對於母件（例如表單的母件為螢幕）的座標，假設設定 Width=6000 、Height=4000 ，則代表要在螢幕中建立一個寬為 6000Twips 、高為4000Twips 的表單（單位由母件決定）。設定 Left=500 、 Top=500 ，代表該表單位置相對於螢幕左上角 (0,0) 的座標為 (500,500)Twips （單位由母件決定）。所以這些值（大小、位置）雖可由子件來決定，但座標單位則由母件決定。

6

9.1 ：座標

• ScaleWidth 、 ScaleHeight 、 ScaleLeft 、 ScaleTop 則是表單內部的另一套座標系統，分別是表單內部大小與座標（請注意表單內部的長寬與外部長寬並不相等，因為要保留邊框與標題區），當設定 ScaleMode=1 時，內部座標左上角為 (0,0) ，向右、向下延伸正值，右下角座標恰為（ ScaleWidth,ScaleHeight ），單位則由 ScaleMode 決定，例如上圖將ScaleMode 設為 1 ，因此內部座標的單位也是 Twips 。若將內部座標單位改為公分（ ScaleMode=7 ），則變成下圖座標系統。

7

9.1 ：座標

• Visual Basic 的座標系統內定為向右、向下延伸逐漸增加正值，和數學所學的座標系統不太相同，數學所學之座標系統為向右向上延伸逐漸增加X,Y 值。不過，我們也可以將座標系統改為其他方式。

• 【自訂座標】：– 設定 ScaleMode=0 、 ScaleWidth=490 、 ScaleHeight=300 、 ScaleLeft=-

245 、 ScaleTop=-150 。則座標如下圖：

• 在上圖中，並未寫出內部座標的單位，由於將 ScaleMode 設為 0 ，因此該座標系統專屬於使用者所制定的。

8

9.1 ：座標

– 透過下列公式計算得出上圖右下角座標 (X2,Y2) 的值，以及該座標單位的實際大小。

• 左上角座標 (X1,Y1) ：( ScaleLeft,ScaleTop)=(-245,-150)

• 右下角座標 (X2,Y2) ：( ScaleLeft+ ScaleWidth,,ScaleTop+ ScaleHeight)=(245,150)

• 假設表單內部實際總寬度為 5880Twips 、總高度為 3600Twips ，則自訂單位恰為 (5800/490)=(3600/300)=20Twips=1/72 英吋 =1 點

• 【範例 9-1 】：– 使用 ScaleMode=1 與 7 繪圖。

456789

Private Sub Form_Activate() ScaleMode = 1 '以 Twips為單位 Line (10, 10)-Step(500, 500), QBColor(1), BF ScaleMode = 7 '以公分為單位 Line (2, 2)-Step(4, 4), QBColor(8), BFEnd Sub

9

9.1 ：座標

• CurrentX 、 CurrentY 屬性 ( 水平垂直座標值 )

– 【語法說明】：• 物件為表單、圖片方塊或印表機，省略該參數則物件為表單。• CurrentX , CurrentY 屬性無法於編輯介面時指定，只能透過敘述在程式中設定。• 不同的函數執行後焦點座標位置有些不同，當執行 Line 方法畫直線之後，焦點座

標會停留在直線終點，執行 Circle 方法畫圓形之後，焦點座標位於圓心。

語法： X = [物件 .] CurrentX Y = [物件 .] CurrentY功能：取得目前座標點所在的水平與垂直座標值

語法： [ 物件 .] CurrentX = X [ 物件 .] CurrentY = Y功能：設定文字或圖形左上角起始點之水平與垂直座標。

10

9.1 ：座標

• 【範例 9-2 】：– 使用 CurrentX,CurrentY 設定直線起點座標，以及取得直線終點座標。

5678910111213

Private Sub Form_Activate() CurrentX = 650 CurrentY = 300 Print "(" & CurrentX & "," & CurrentY & ")" CurrentX = 650 CurrentY = 300 Line -Step(1000, 2000) Print "(" & CurrentX & "," & CurrentY & ")"End Sub

11

9.1 ：座標

• Scale 方法– 在設計介面時，可以直接在屬性視窗中修改 ScaleMode 、 ScaleWidth 、 ScaleHeight 、

ScaleLeft 、 ScaleTop 屬性來設定表單、圖片方塊及印表機等物件的內部坐標。– 在程式執行時，也可以藉由程式重新指定

ScaleMode 、 ScaleWidth 、 ScaleHeight 、 ScaleLeft 、 ScaleTop 的屬性值來改變物件內部座標（如範例 9-1 ），除此之外，也可以使用 Scale 方法來改變ScaleWidth 、 ScaleHeight 、 ScaleLeft 、 ScaleTop 的屬性值。

– Scale 方法的語法如下：

– 【語法說明】：• X1 ：代表 ScaleLeft 屬性值。 Y1 ： ScaleTop 的屬性值。• X2-X1 ： ScaleWidth 的屬性值。（所以 X2 為右下角座標的 X 值）• Y2-Y1 ： ScaleHeight 的屬性值。（所以 Y2 為右下角座標的 Y 值）• 若省略 [(X1,Y1 )-(X2,Y2)] 參數，則物件的內部座標將會變成預設值

（ ScaleMode=1 ）。

語法： [ 物件 .] Scale [(X1,Y1 )-(X2,Y2)]功能：設定物件的內部座標。

12

9.2 ：設定顏色

• Visual Basic 設定顏色的方法一共分為 3 種：– 使用 QBColor 函數– 使用 RGB 函數– 直接指定顏色值

• QBColor 函數– QBColor 是 QuickBasic 的設定顏色函數，到了 Visual Basic 也繼續提供此函數，在此，

直接透過範例來說明 QBColor 函數的效果。– 【範例 9-3 】：

• 使用 QBColor 函數設定顏色，會出不同顏色的線條。

5678910111213

Private Sub Form_Activate() For ColorNum = 0 To 15 ColorHeight = ColorNum Line (0, ColorHeight * 300)-Step(3000, (ColorHeight + 1) * 300), _ QBColor(ColorNum), BF CurrentY = CurrentY - (ColorHeight + 1) * 300 Print "QBColor(" & ColorNum & ")" Next ColorNumEnd Sub

13

9.2 ：設定顏色

• RGB 函數– RGB 函數是利用 3原色原理產生更多色彩。語法如下：

– 【語法說明】：• RGB 函數共有 3 個參數，分別代表紅、綠、藍顏色的比例。每個顏色值分別為 0~255 ，值越大者代表該原色所佔比例越大。由於1 個 Byte 可以表示的數字範圍恰好為 0~255，因此紅、綠、藍 3原色各佔 1 個 Byte ，每一個顏色則佔用 3 個 Bytes （ 24 bits ），也就是「 24bit全彩」。

• 舉例來說，要設定紅色的話，則可以使用RGB(255,0,0) 。設定綠色則 RGB(0,255,0)、設定藍色則 RGB(0,0,255) 。而黃色則為（紅 +綠），所以是 RGB(255,255,0)

語法： RGB (Red, Green, Blue)功能：利用 3 原色設定色彩。

14

【實作範例 9-4 】

• 【實作範例 9-4 】：– 使用 RGB 函數來設定顏色，並利用捲軸設定 3原色所佔比例。

• 上機實作– Step1 ：專案名稱為『 p9_04』。– Step2 ：在表單上產生下列控制項並設定屬性。

– Step3 ：編輯下頁程式碼。

15

【實作範例 9-4 】

5678910111213141516171819202122232425

Private Sub Form_Load() picSampleColor.BackColor = RGB(0, 0, 0) vsbR.Value = 0 vsbG.Value = 0 vsbB.Value = 0End Sub

Private Sub vsbB_Change() lblBV = Str(vsbB.Value) picSampleColor.BackColor = RGB(vsbR.Value, vsbG.Value, vsbB.Value)End Sub

Private Sub vsbG_Change() lblGV = Str(vsbG.Value) picSampleColor.BackColor = RGB(vsbR.Value, vsbG.Value, vsbB.Value)End Sub

Private Sub vsbR_Change() lblRV = Str(vsbR.Value) picSampleColor.BackColor = RGB(vsbR.Value, vsbG.Value, vsbB.Value)End Sub

16

【實作範例 9-4 】

– Step4 ：執行程式。

17

9.2 ：設定顏色

• 直接設定顏定值– 屬性視窗中有關顏色的屬性值（例如 BackColor 屬性值）是使用十六進位（ &H ）的長整數來代表顏色，格式為『 &HBBGGRR』。

• 當中的 BB 、 GG 、 RR 分別代表藍，綠，紅的顏色所佔強度。例如：黃色的表示法為 RGB(255,255,0) ，若改用十六進位顏色表示法，則為 &H00FFFF 。

• 【範例】 Form1.BackColor = &H00FFFF （設定表單的背景顏色為黃色）

• 【範例】 Picturel.BackColor = &H00FF00 （設定圖片方塊的背景顏色為綠色）

18

9.3 ：繪點－ PSet 方法

• PSet 語法如下：

– 【語法說明】：• PSet 方法執行完畢， CurrentX 、 CurrentY 將被設定為該點的座標值。例如：執行 PSet(50,100) 後，則 CurrentX=50 ， CurrentY=100 。

• 若要在表單上畫出不同大小的點，可以配合表單的 DrawWidth 屬性，可以繪出不同大小的點。

• 若將顏色設為與 BackColor 顏色相同的話， Pset 所畫的點會看不到。因此可以用來清除某個特定點。

– 【範例 9-5 】：• 使用 Pset 方法，繪製 y=x3-3x2+3 的方程式圖形。

語法： [ 物件 .] PSet (X,Y) [,Color]功能：在表單、圖片方塊或印表機物件上繪製一個點（可指定該點的顏色）。

19

9.3 ：繪點－ PSet 方法

45678910111213

Private Sub Form_Activate() Scale (-10, 10)-(10, -10) DrawWidth = 2 '畫筆寬度為 2 Line (-10, 0)-(10, 0), RGB(0, 0, 0) 'X軸 Line (0, 10)-(0, -10), RGB(0, 0, 0) 'Y軸 DrawWidth = 3 '畫筆寬度為 3 For X = -10 To 10 Step 0.1 PSet (X, X ^ 3 - 3 * X ^ 2 + 3), RGB(0, 0, 255) Next XEnd Sub

20

9.4 ：繪線、方框、方塊－ Line 方法

• Line 語法如下：

– 【語法說明】：• X1,Y1 ：線的起點； X2,Y2 ：線的終點； Color ：使用 RGB 函數。• 執行 Line 方法後， CurrentX 、 CurrentY 將是直線的終點座標標。例如：

Line (100,150)-(350,450) ，則敘述執行完畢後CurrentX=350 、 CurrentY=450 。

• Step 代表以直線起點做相對位移。例如： Line (20,40)-Step(30,50) ，則CurrentX = 20+30=50 、 CurrentY = 40+50 = 110 。若想要畫頭尾相連多條連續直線，使用 Line-Step(X,Y)即為方便。

Line總語法： [ 物件 .]Line [(X1 , Y1)] - [Step] (X2 , Y2) [,Color] [,B[F]]功能：在表單、圖片方塊或印表機等物件上畫一條直線、方框、方塊。

畫直線語法： [ 物件 .] Line [(X1,Y1)]-[Step](X2,Y2) [,Color]

21


– 【語法說明】：• 加 B 表示畫方框。（中間空心）• X1,Y1 ：方框的左上角頂點； X2,Y2 ：方框的右下角頂點。【範例】： Line (20,20) - (80,80) , RGB(255,0,0) , B上述敘述會畫出以 (20,20) 、 (80,80) 為對角頂點的紅色空心方框，面積為 3600 。

– 【語法說明】：• 加 BF 表示畫方塊。（中間實心）• X1,Y1 ：方塊的左上角頂點； X2,Y2 ：方塊的右下角頂點。【範例】： Line (20,20) - (80,80) , RGB(255,0,0) , BF上述敘述會畫出以 (20,20) 、 (80,80) 為對角頂點的紅色實心方塊，面積為 3600 。

畫方塊語法： [ 物件 .] Line [(X1,Y1)]-[Step](X2,Y2) [,Color] BF

畫方框語法： [ 物件 .] Line [(X1,Y1)]-[Step](X2,Y2) [,Color] B

22


• 在表單或圖片方塊繪圖時，除了使用函數與繪圖方法之外，尚可以配合其他屬性製作更多種類的圖形變化，常用來搭配的繪圖屬性如下：

屬性說明BackColor 設定物件的背景顏色。ForeColor 設定物件的前景顏色。DrawMode 設定線條的顯示效果（參閱 9.9節）。

DrawWidth設定點或線條的寬度。當 DrawWidth 設定為 2 以上時， DrawStyle 的屬性 0~4 皆會變成實線效果。

DrawStyle

設定線條的樣式：線條效果0- 實線 ( 預設值 )1-破折線2- 點線3-破折線 + 點線4-破折線 + 點線 + 點線5- 透明6- 內實線

FillColor 設定填充條紋顏色。FillStyle 設定填充條紋樣式（參閱 9.9節）。

23


• 【範例 9-6 】：– 使用 Line 方法繪製各類圖形。

24

5678910111213141516171819202122232425262728293031323334353637

Private Sub Form_Activate() '============畫線 ================ DrawWidth = 1 Line (100, 200)-(500, 1000), RGB(255, 0, 0) ' 直角三角形 DrawWidth = 4 PSet (1400, 200), RGB(0, 0, 255) Line -(1400, 1200), RGB(0, 0, 255) Line -(1800, 1200), RGB(0, 0, 255) Line -(1400, 200), RGB(0, 0, 255) ' 四角形 ( 另一種畫方框的方法 ) DrawWidth = 1 DrawStyle = 2 '點線 PSet (2200, 100), RGB(255, 255, 0) Line -Step(0, 1000), RGB(255, 255, 0) Line -Step(1000, 0), RGB(255, 255, 0) Line -Step(0, -1000), RGB(255, 255, 0) Line -Step(-1000, 0), RGB(255, 255, 0) '============畫方框 ================ DrawStyle = 3 '破折線 + 點線 Line (100, 1600)-(1000, 2300), RGB(0, 127, 127), B ' 同心方框 DrawWidth = 1 DrawStyle = 0 For Num = 0 To 500 Step 50 Line (1600 - Num, 1800 - Num)-(1600 + Num, 1800 + Num), RGB(0, 0, 127), B Next Num '============畫方塊 ================ Line (2200, 1300)-Step(1000, 1000), RGB(255, 0, 127), BFEnd Sub

25

9.5 ：繪圓、橢圓、弧、扇形－ Circle 方法

• Circle 語法如下：

– 【語法說明】：• (x,y) ：圓心座標。• r ：圓的半徑。• Color ：顏色值。

– 【語法說明】：• d1 ：圓弧的起點角度，以弳為單位。（省略時 d1 為 0 ）• d2 ：圓弧的終點角度。（省略時 d1 為 2π ）（ π近似於 3.14159 ）。

畫圓形語法： [ 物件 .]Circle(x,y),r [,Color] 功能：表單、圖片方塊或印表機等物件上畫圓形。

畫圓弧語法： [ 物件 .]Circle(x,y),r [,Color] ,d1,d2功能：表單、圖片方塊或印表機等物件上畫圓弧。

26


• 弳度與角度的轉換如右圖： – 【轉換公式】：

– 【語法說明】：• 當 d1,d2 前面加上負號『 -』，則在圓弧角度的圓周會連一條到圓心的線，可以用來畫出扇形。

畫扇形語法： [ 物件 .]Circle(x,y),r [,Color] ,-d1,-d2功能：表單、圖片方塊或印表機等物件上畫扇形。

27


– 【語法說明】：• a ：橢圓之兩軸比， a=( 垂直半徑長 )/( 水平半徑長 ) 。• (1) a=1 時，圓為正圓。• (2) a>1 時，為瘦長橢圓。（ r 為垂直半徑長，垂直軸較長）• (3) a<1 時，為扁平橢圓。（ r 為水平半徑長，水平軸較長）

畫橢圓語法： [ 物件 .]Circle(x,y),r[,Color],,,a

功能：表單、圖片方塊或印表機等物件上畫橢圓。

畫橢圓弧語法： [ 物件 .]Circle(x,y),r[,Color],d1,d2,a

功能：表單、圖片方塊或印表機等物件上畫橢圓弧。

28


• 【範例 9-7 】：– 使用 Circle 方法繪製各類與圓有關的圖形。

29

16789101112131415161718192021222324252627282930313233

Const PI = 3.1415926Private Sub Form_Activate() '==========圓形 ============ Circle (700, 700), 500, RGB(0, 255, 255) DrawStyle = 0 FillColor = QBColor(2) FillStyle = 0 Circle (1500, 700), 500 '=========圓弧 ============ DrawStyle = 3 Circle (3000, 700), 500, RGB(125, 0, 125), 1 / 2 * PI, 3 / 2 * PI '=========扇形 ============ DrawStyle = 0 FillStyle = 0 Circle (3800, 700), 500, RGB(0, 0, 0), -3 / 4 * PI, -5 / 4 * PI '=========小精靈 ========== DrawWidth = 2 FillColor = RGB(127, 127, 255) Circle (1200, 2000), 500, RGB(127, 127, 255), -1 / 8 * PI, -15 / 8 * PI Circle (1300, 1700), 50, QBColor(4) '=========扁直橢圓 ======== FillStyle = 3 FillColor = RGB(0, 0, 255) Circle (2400, 2000), 500, RGB(0, 0, 255), , , 2 '=========扁平橢圓 ======== FillStyle = 0 FillColor = RGB(0, 0, 255) Circle (3500, 2000), 500, RGB(0, 0, 255), , , 0.5End Sub

30

9.6 ：吸取顏色－ Point 方法

• Point 語法如下：

– 【語法說明】：• 使用 Point 方法可吸取特定點的顏色。• (2) Point 方法所吸取的特定點顏色值為長整數。

• 【實作範例 9-8 】：– 設計一個繪圖軟體提供的吸取顏色功能。

• (1) 到指定點吸取顏色。• (2) 將吸取的顏色指定到其他的區域。

語法： [ 物件 .] Point (x,y)功能：取得表單或圖片方塊物件中某個指定點的顏色值。

31

【實作範例 9-8 】

• 上機實作– Step1 ：將專案名稱設為『 p9_08』。– Step2 ：在表單上產生下列控制項並設定屬性。

– Step3 ：撰寫程式碼。– Step4 ：執行程式。

32

【實作範例 9-8 】

45678910111213141516

171819202122

2324

Dim SelectedColor

Private Sub Form_Activate() For ColorNum = 0 To 15 ColorHeight = ColorNum Line (0, ColorHeight * 300)-Step(3000, (ColorHeight + 1) * 300), _ QBColor(ColorNum), BF CurrentY = CurrentY - (ColorHeight + 1) * 300 Print "QBColor(" & ColorNum & ")" Next ColorNumEnd Sub

Private Sub Form_MouseDown(Button As Integer, Shift As Integer, X As Single,

Y As Single) SelectedColor = Point(X, Y) picSelect.BackColor = SelectedColor lblColor.Caption = "點選顏色為 " & Hex(Point(X, Y)) & "(16進制 )"End Sub

Private Sub picFill_MouseDown(Button As Integer, Shift As Integer, X As Single,

Y As Single) picFill.BackColor = SelectedColorEnd Sub

33

【實作範例 9-8 】

34

9.7 ：LoadPicture 函數、 SavePicture 敘述與 App.Path屬性

• 如果不是要開發繪圖軟體，則可以使用別人開發的繪圖軟體製作所需要的精美圖片，再將該圖片載入到我們所需要的程式中即可。載入圖片使用的是 LoadPicture 函數，而儲存圖片使用的則是 SavePicture 敘述。當遇到與實體檔案（例如圖檔）有關的敘述時，常常會希望在程式執行時動態得到該檔案的路徑，此時則可以利用 App.Path 屬性取得檔案路徑。

• LoadPicture 函數

– 【語法說明】：• filename ：要載入圖形的檔名，如果該圖檔位置與應用程式位處於不同資料夾，則需要加上路徑名稱，例如： Form1.Picture = LoadPicture ("C:\VB6\PIC\TEST.bmp")

• LoadPicture 函數可以載入 .bmp 、 .wmf 、 .ico 等格式的圖檔。• 若省略 filename ，則會清除畫面。例如： Image1.Picture = LoadPicture ( )就會將 Image1 的圖形清除掉

語法： [ 物件 .] Picture = LoadPicture ([filename])功能：將圖形檔載入表單、影像或圖片方塊物件中。

35

9.7 ：LoadPicture 函數、 SavePicture 敘述與 App.Path 屬性

• SavePicture 敘述

– 【語法說明】：• 若未指定物件，則 SavePicture 會將目前表單內的圖形存檔。例如： SavePicture Image, "C:\PIC\TEST2.bmp" 。

• 儲存圖形的控制項時， AutoRedraw 屬性為 True 。• 必須選擇 Image 或 Picture ，若指定為 Image ，則儲存時會以

Bitmap(.bmp)格式存檔；若指定為 Picture ，則會以載入該物件時的格式當作存檔格式。例如： picTEST1 圖片方塊的 Picture 屬性載入了一個 JPEG(*.jpg)檔若執行 SavePicture picTEST1.Picture, "TEST2" ，則 TEST1 會是一個JPEG 圖檔；若執行 SavePicture picA.Image, "TEST3" ，則 TEST3 會是一個點陣圖檔。

語法： SavePicture [物件 .]Image(Picture),filename

功能：將表單或圖片方塊的圖形儲存為圖檔。

36

9.7 ：LoadPicture 函數、 SavePicture 敘述與 App.Path 屬性

• App.Path 屬性

– 【語法說明】：• 假設目前執行的程式位於『 C:\VB6\ch09\9_09\』目錄，則 App.Path 屬性值就是 " C:\VB6\ch09\9_09" 字串，所以若要使用 LoadPicture 來載入與執行程式同一目錄的 TEST.bmp 圖檔，則可使用下列敘述加以完成：

– picTEST = LoadPicture(App.Path+"\TEST.bmp")• 若 TEST.bmp 圖檔位於執行程式的父目錄，則可使用 "/../" 取得上一層的路徑，敘述如下：

– picTEST = LoadPicture(App.Path+"\..\TEST.bmp")• 若 TEST.bmp 圖檔位於執行程式的兄弟目錄，即『 C:\VB6\ch09\PIC\』目錄，則可使用下列敘述完成：

– picTEST = LoadPicture(App.Path+"\..\PIC\TEST.bmp")

語法： App.Path功能：取得目前執行程式的所在路徑。

37

【實作範例 9-9 】

• 【實作範例 9-9 】：– 在左邊圖片方塊中，提供繪圖功能，按下【儲存檔案】鈕，會將圖片存檔，按下【開啟舊檔】鈕，則會將剛才存檔的圖片讀入右邊的圖片方塊中。

• 上機實作– Step1 ：將專案名稱設為『 p9_09』。– Step2 ：在表單上產生下列控制項並設定屬性。

– Step3 ：撰寫程式碼。– Step4 ：執行程式。

38

4567891011121314151617

181920212223

24252627

Private Sub cmdClear_Click() picSource.Cls picTarget.Picture = LoadPicture("")End Sub

Private Sub cmdLoad_Click() picTarget.Picture = LoadPicture(App.Path + "\PIC1.bmp")End Sub

Private Sub cmdSave_Click() SavePicture picSource.Image, App.Path + "\PIC1.bmp"End Sub

Private Sub picSource_MouseDown(Button As Integer, Shift As Integer,

X As Single, Y As Single) If Button = 1 Then picSource.PSet (X, Y) End IfEnd Sub

Private Sub picSource_MouseMove(Button As Integer, Shift As Integer,

X As Single, Y As Single) If Button = 1 Then picSource.Line -(X, Y) End IfEnd Sub

39

【實作範例 9-9 】

40

9.8 ：直線 (Line) 控制項

• 『直線』控制項可以在介面設計階段就直接產生各種樣式的線條– 『直線』控制項只能夠用來繪圖，而沒有可驅動的事件。– 『直線』控制項的母件可以是表單或圖片方塊，當移動母件時，子件『直

線』控制項的線條也會隨著移動。• 建立『直線』控制項

1: 選取直線工具

2: 在表單上拉出直線控制項大小

41


• 直線的屬性

屬性說明DrawMode

（顯示效果）設定直線控制項的顯示效果（參閱 9.9.2節）

BorderColor（線條顏色）設定線條顏色。

BorderWidth（線條寬度）

設定線條寬度。若 BorderWidth>1 ，則 BorderStyle 的屬性值只有『 0』、『 1』、『 6』生效。

BorderStyle（線條樣式）

設定線條的樣式：線條效果0 透明1 實線 ( 預設值 )2破折線3 點線4破折線 + 點線5破折線 + 點線 + 點線6 內實線

X1 直線起點的 X 軸座標。Y1 直線起點的 Y 軸座標。X2 直線終點的 X 軸座標。Y2 直線終點的 Y 軸座標。

42


• 直線控制項的優點– (1) 可以直接看到直線樣式，由於『直線』控制項是一個物件，因此在介面

編輯階段就可以看到直線樣式，而不必像 Line 方法，必須等到執行程式時才看到結果。因此直線控制項修改直線較為容易（只需要修改屬性值即可）。

– (2) 執行 Cls 方法時，不會清除直線控制項的直線。• 【實作範例 9-10 】：

– 使用直線控制項當作刀子，切割長方形為兩等份。• 上機實作

– Step1 ：專案名稱為『 p9_10』。– Step2 ：表單如右圖。

– Step3 ：編輯下頁程式碼。– Step4 ：執行程式。

43

【實作範例 9-10 】

56789

1011121314

15161718192021

Private Sub Form_Activate() picSource.Line (400, 400)-(1600, 1600), RGB(255, 0, 0), BFEnd Sub

Private Sub picSource_MouseMove(Button As Integer, Shift As Integer,

X As Single, Y As Single) linCut.X2 = linCut.X2 + X - linCut.X1 linCut.X1 = XEnd Sub

Private Sub picSource_MouseUp(Button As Integer, Shift As Integer,

X As Single, Y As Single) picLeft.Cls picRight.Cls If (400 < linCut.X1) And (linCut.X1 < 1600) Then picLeft.Line (400, 400)-(linCut.X1, 1600), RGB(255, 0, 0), BF picRight.Line (linCut.X1, 400)-(1600, 1600), RGB(255, 0, 0), BF End IfEnd Sub

44

【實作範例 9-10 】

45

9.9 ：形狀 (Shape) 控制項

• 『形狀』控制項一共可以製作 6 種不同形狀的圖形。– 形狀控制項沒有任何的事件，僅僅能夠做為繪圖之用– 會隨母件移動。

• 建立『形狀』控制項

1: 選取形狀工具

2: 在表單上拉出形狀控制項大小

46


• 形狀的屬性

– 形狀控制項可設定的屬性比起直線控制項還多，因此可以產生更多變化。

屬性說明

Shape 設定形狀控制項的形狀。 ( 參閱 9.9.3節 )

DrawMode 設定形狀控制項的顯示效果。 ( 參閱 9.9.3節 )

BackColor 設定形狀控制項的背景顏色

BackStyle設定形狀控制項的背景形式：0- 透明 ( 預設值 )1- 不透明

BorderColor 設定形狀控制項的邊框顏色。

BorderStyle設定形狀控制項的邊框樣式，屬性值為 0~6( 預設值為 0)（請參閱 9.8.2節）。

BorderWidth 設定形狀控制項的邊框寬度。FillColor 設定形狀控制項內的填滿顏色。FillStyle 設定形狀控制項內的填充條紋樣式。 ( 參閱 9.9.3節 )

47


– Shape 屬性• Shape 屬性是用來設定形狀控制項的形狀，屬性值為 0~5 ，各代表不同形狀：

Shape 屬性值說明0 長方形 ( 預設值 )

1 正方形2 橢圓形3 圓形4 圓角矩形（類似流程圖之開始結束符號）

5 圓角正方形

48


– DrawMode 屬性• DrawMode 屬性是用來決定畫筆與螢幕顏色的組合關係。由於表單、圖片方塊等物件都具有 DrawMode 屬性，因此當執行 Pset 、 Line 及 Circle 方法時，不同的 DrawMode 屬性會產生不同組合效果。

• 直線控制項和形狀控制項也有 DrawMode 屬性，下表是常用的DrawMode 屬性值及組合效果。

屬性值說明屬性值說明1 黑色 9 背景顏色 And 前景顏色2 Not(背景顏色 Or 前景顏色 ) 10 Not (背景顏色 Xor 前景顏色 )

3 背景顏色 And (Not 前景顏色 ) 11 沒有動作4 Not ( 前景顏色 ) 12 背景顏色 Or (Not 前景顏色 )

5 (Not 前景顏色 )And 前景顏色 13 前景顏色 ( 預設值 )

6 Not(背景顏色 ) 14 (Not 背景顏色 ) Or 前景顏色7 前景顏色 Xor 背景顏色 15 背景顏色 Or 前景顏色

8Not (背景顏色 And 前景顏色 )

16 白色

49


– FillStyle 屬性• FillStyle 屬性可以設定圖形內部的填充樣式，有多種花紋可供選擇如下表：

FillStyle 屬性值說明0 實心1 透明 ( 預設值 )

2 水平線3 垂直線4 左上到右下的斜線5 左下到右上的斜線6 垂直交叉線7 對角交叉線

50


• 『形狀』控制項的程式設計– 【範例 9-11 】：

• 由於 DrawMode 的屬性值效果很難了解，因此我們直接用範例來看看不同的 DrawMode 屬性值會造成什麼樣的效果。456

Private Sub Command1_Click() shpUp.DrawMode = Val(Text1.Text)End Sub

51


– 【範例 9-12 】：• 撰寫一個簡單的程式，每按一下滑鼠，就變化形狀控制項的形狀。

45678910111213141516

Dim S_ValuePrivate Sub Form_Click() If S_Value > 4 Then S_Value = 0 Else S_Value = S_Value + 1 End If shpChange.Shape = S_ValueEnd SubPrivate Sub Form_Load() S_Value = 0End Sub

52


• 執行結果

53

9.10 ：本章整合應用實例

• 【實作範例 9-13 】：– 設計繪圖軟體中常提供的水平翻轉與垂直翻轉功能。

• 上機實作– Step1 ：專案名稱為『 p9_13』。– Step2 ：在表單上產生下列控制項並設定屬性。

– Step3 ：編輯下兩頁程式碼。– Step4 ：執行程式。

54

456789101112131415161718192021222324252627282930

Private Sub cmdSave_Click() lblMessage = "存檔中 ..." SavePicture pic2.Image, (App.Path + "\Target.ico") lblMessage = "存檔完畢 !!!"End Sub

Private Sub cmdTrans_Click() If optH.Value = True Then lblMessage = "水平翻轉中 ..." For Y = 0 To pic1.ScaleHeight - 1 For X = 0 To pic1.ScaleWidth - 1 PointColor = pic1.Point(X, Y) pic2.PSet (127 - X, Y), PointColor Next X Next Y lblMessage = "水平翻轉完成 !!!" Else lblMessage = "垂直翻轉中 ..." For X = 0 To pic1.ScaleHeight - 1 For Y = 0 To pic1.ScaleWidth - 1 PointColor = pic1.Point(X, Y) pic2.PSet (X, 127 - Y), PointColor Next Y Next X lblMessage = "垂直翻轉完成 !!!" End IfEnd Sub

55

323334353637383940

Private Sub Form_Activate() lblMessage = "載入圖檔中 ..." pic1.Scale (0, 0)-(127, 127) pic2.Scale (0, 0)-(127, 127) pic1.Picture = LoadPicture(App.Path + "\Source.ico") pic1.AutoRedraw = True pic2.AutoRedraw = True lblMessage = "圖檔已載入 !!!"End Sub

56

【實作範例 9-14 】

• 【實作範例 9-14 】：– 延續第 6 章範例，設計以圖餅圖表示得票結果。

• 上機實作– Step1 ：專案名稱為『 p9_14』。– Step2 ：建立表單與控制項。

– Step3 ：編輯下頁程式碼。– Step4 ：執行程式。

57

12345678910111213141516171819202122232425

Private Sub lblSta_Click() picSta.Cls PI = 3.1415926 ManVotes = Val(lblP1.Caption) + Val(lblP2.Caption) + Val(lblP3.Caption) WomanVotes = Val(lblP4.Caption) + Val(lblP5.Caption) + Val(lblP6.Caption) If (ManVotes + WomanVotes) > 0 Then ManRate = Int(ManVotes / (ManVotes + WomanVotes) * 100) WomRate = 100 - ManRate lblManRate.Caption = Str(ManRate) & "%" lblWomRate.Caption = Str(WomRate) & "%" If ManRate > 0 Then picSta.FillStyle = 5 picSta.FillColor = QBColor(1) picSta.Circle (800, 800), 800, QBColor(1), -0.01, -2 * PI * ManRate / 100 End If If WomRate > 0 Then picSta.FillStyle = 0 picSta.FillColor = QBColor(0) picSta.Circle (800, 800), 800, QBColor(0), -2 * PI * ManRate / 100, -2 * PI End If Else MsgBox "請先投票 !!" End IfEnd Sub

58

【實作範例 9-14 】

59

9.11 ：本章回顧

• 控制項及 Visual Basic 相關基本知識– 座標– 設定顏色– 直線 (Line) 控制項– 形狀 (Shape) 控制項

• 函數– 繪點－ PSet 方法– 繪線、方框、方塊－ Line 方法– 繪圓、橢圓、弧、扇形－ Circle 方法– 吸取顏色－ Point 方法– LoadPicture 函數、 SavePicture 敘述與 App.Path 屬性

60

本章習題

第九章 繪圖函數與元件 （應用：直線與形狀）

Documents

第九章繪圖函數與元件（應用：直線與形狀）