新觀念的 VB6 教本 第13章 表單的圖形輸出系統.

Presentation on theme: "新觀念的 VB6 教本 第13章 表單的圖形輸出系統."— Presentation transcript:

1 新觀念的 VB6 教本 第13章 表單的圖形輸出系統

2 13-1 座標系統

3 座標系統 座標系統的目的在於標定物件或輸出物(文字或圖形)的位置。
VB 的座標系統是以螢幕的左上角為原點 (0,0)，而 X 值向右遞增，Y 值向下遞增。 要特別注意的是 Y 值與數學座標系統的習慣相反，數學上的 Y 值向下是遞減，向上才是遞增。

4 相對性的座標(1) 表單的座標是以螢幕的左上角為原點，而決定表單座標的屬性是 (Left, Top)。

5 相對性的座標(2) 而當我們在表單上佈置控制元件時，也可以利用 Left 及 Top 屬性來決定控制元件的座標，但此時的座標是以表單顯示區的左上角為原點。

6 相對性的座標(3) 請注意，除了控制元件之外，凡是在表單上面輸出的文字及圖形也都是以表單顯示區的左上角為相對座標。

7 座標的單位 -- 座標的疑問 您是否注意到上面所看到的座標位置、寬度、及高度值都很大，遠大於一般 VGA 螢幕的解析度， VGA 的解析度通常是 640×480、800×600、1024×768 等，而我們在前面所看到的座標位置均已超過螢幕的解析度，這到底是怎麼回事呢？

8 座標的單位 -- 疑問的解答(1) 那是 VB 為了製作出更細緻的圖形而選擇了較小座標單位的關係，以解析度為 640×480 的 VGA 為例，畫出一個半徑等於 2 公分的圓，外觀上會有明顯的鋸齒狀，同樣以 600×600 dpi 的印表機來輸出 2 公分的圓，則顯得精緻許多。

9 座標的單位 -- 疑問的解答(2) 如圖： 為了能夠在解析度較高的裝置上輸出更精緻的 圖形，所以 VB 選擇了一種很小的單位叫做 Twip 作為座標的單位。

10 Twip 座標單位 Twip 是表單座標系統的內定座標單位，除了 Twip 之外，VB 還允許我們選擇其他的座標單位，例如像素點(pixel)、英吋、公分等，不過為了避免對初學者產生困擾，本書暫時不予討論，總之以 Twip 為座標單位比較能夠適用於更多的輸出裝置，所以也是 VB 最鼓勵的方式。

11 什麼是 dpi？ dpi：dot per inch 的縮寫，意思是每英吋的點數，例如 600 dpi 表示每一英吋可以印出 600點，而 600×600 dpi 表示每一平方英吋的小方格內可印出600×600= 的點，所以解析度非常高。

12 什麼是像素點(pixel)？ 像素點(pixel)：像素點是衡量螢幕解析度的單位，以解析度為 640×480 的 VGA 螢幕為例，指的就是含有 640×480 個像素點的 VGA 螢幕。

13 13-2 輸出顏色的設定

14 輸出顏色的設定(1) 我們前面以 Print 敘述所輸出的文字都是黑色的，但其實不管是文字或圖形，輸出的顏色都是可設定的，欲設定輸出的顏色可以從表單的幾個屬性著手。

15 輸出顏色的設定(2) BackColor(背景顏色)：即是用來設定表單的背景顏色。
ForeColor(前景顏色)：將來文字或圖形在表單上面輸出時，所選擇的顏色，其內定值是黑色，所以我們平常執行 Print 敘述之後，所看到的文字都是黑色。

16 輸出顏色的設定(3) FillColor(塗抹顏色)：繪圖時，用來塗抹圖形區域的顏色。
FillStyle(塗抹樣式)：繪圖時，用來指定是否塗抹圖形區域的屬性。 若等於 “0 - 實心”，則以 FillColor 屬性的顏色來塗抹圖形區域。 若等於 "1 - 透明"，則不去塗抹圖形區域，也就是保持原來的顏色。

17 輸出顏色的設定(4)

18 輸出顏色的設定(5) 在設計模式之下，我們可以利用屬性視窗來設定這些顏色的屬性 。
在執行模式之下，則可以透過屬性設定的敘述來設定這些顏色，例如： BackColor = 顏色設定值

19 輸出顏色的設定(6) 如何決定顏色設定值呢？
方法之一是先在設計模式之下試著設定一些顏色，並且把滿意顏色的屬性值記錄下來，作為執行時的顏色設定值，這個方法我們在第四章已經做過介紹。 另一個方法則是利用 RGB 函數。

20 RGB 函數 RGB 函數的呼叫格式是： X = RGB(R, G, B)

21 RGB 三原色的意義(1) R、G、B 三個英文字母代表的是組成各種顏色變化的三原色 Red (紅)、Green(綠)、Blue(藍) 。
舉例來說，紅色與綠色會組合成黃色。 又三原色的強度也會影響組合出來 的顏色。 例如綠色的強度只有一半時，與紅色組合出來的顏色會變成橘色。

22 RGB三原色的意義(2)

23 RGB函數的參數 (1) 傳入 RGB 函數的 R、G、B 三個參數，即 是紅、綠、藍三原色的強度，而 RGB 的傳 回值則是組合出來的顏色設定值，又參數 R、G、B 的強度值是 0～255，超過 255 的 值會視為 255 ，例如： 所以以下敘述可以在執行階段將表單的背 景顏色設成黃色： BackColor = RGB(255, 255, 0) ‘ 由紅色及綠色組合的顏色,即為黃色 BackColor = RGB(255, 128, 0) ' 綠色強度只有一半,會變成橘色 BackColor = RGB(255, 255, 0)

24 RGB函數的參數 (2) 以下所列出的是一些常用顏色的 RGB 設定值：

25 RGB 與顯示卡的顏色(1) 由於 RGB 三個參數 R、G、B 的數值範 圍是 0～255，所以使用 RGB 函數所組合 出來的顏色一共可達 256×256×256＝ 16,777,216 種顏色。 但並不是所有的 VGA 顯示卡都支援那麼 多的顏色，假設 VGA 只支援 16 色，那 麼當我們把顏色設定到 16 顏色之外時， 顯示出來的結果將會如何呢？

26 RGB 與顯示卡的顏色(2) 如果是背景顏色或塗抹顏色，則系 統會用多種顏色以網狀分佈的「調 色」方式來顯示該顏色，例如執行 以下敘述：
目的是把表單的背景顏色設定成橘 色。 BackColor = RGB(255, 128, 0) ' 橘色(16 色之外)

27 RGB 與顯示卡的顏色(3) 但顯示在 16 色的 VGA 時，卻是以紅色和黃色 均勻分佈的方式來顯示，如下圖：
以調色的方式顯示出來的顏色，在視覺上還算 十分近似。

28 RGB 與顯示卡的顏色(4) 如果是前景顏色，則系統會從16色 之中挑選最接近的顏色來顯示前景 顏色，例如橘色會被顯示成黃色。
所以設定前景顏色時，要特別注意 顯示卡所支援的顏色，以避免顯示 時的失真現象。

29 QBColor 函數(1) 除了 RGB 函數可以用來取得顏色設定值，另一個 QBColor 函數也具備類似的功能，只是它只能取得 16 種顏色的設定值，首先請參考下表：

30 QBColor 函數(2) 舉例來說，如果傳入 QBColor 的參數是 12 ，則傳回紅色的顏色設定值，所以：
QBColor(12) 等於 RGB(255, 0, 0)

31 QBColor 函數 -- 實例練習 製作一個背景會自動變換顏色的表單，變換頻率是每 0.1 秒一次。
還記得 8-3 節所介紹的計時器(Timer)控制元件嗎？這個程式我們只要結合 QBColor 函數及計時器就可以做到，方法如下：

32 QBColor 函數 -- 實例練習 Step1 在表單上佈置一計時器控制元件，並且將其 Interval 屬性設定為 100 (也就是0.1秒)。

33 QBColor 函數 -- 實例練習 Step 2 在 Timer1_Timer 程式區塊中撰寫以下程式：
Dim Index As Integer ' 宣告在Timer1_Timer之外 Private Sub Timer1_Timer() Form1.BackColor = QBColor(Index) Index = Index If Index > 15 Then Index = 0 End Sub

34 QBColor 函數 -- 實例練習講解 以上程式利用 Timer1_Timer 每 0.1 秒被執行一次的機會，逐次取得 QBColor(0～15) 的顏色設定值，然後設定給表單的 BackColor 屬性，便能夠達到每 0.1 秒變換表單背景顏色一次的目的。

35 13-3 畫線與方形的 Line 敘述

36 畫線的 Line 敘述 Line 敘述可以用來畫線或方形。 若是用來畫線，其格式是：

37 畫線呼叫例 其中顏色參數可以省略，如果省略，則以表單的前景顏色(ForeColor屬性)作為輸出的顏色，例如：
ForeColor = RGB(0,0,255) ' 將前景顏色設定成藍色 Line (0,0)-(500,500) ' 省略顏色參數, 所以採前景顏色(藍色)來畫線 Line (500,0)-(0,500), RGB(255,0,0) ' 畫紅色的線

38 畫方塊的 Line 敘述(1) Line敘述也可以用來畫方塊，其格式是：

39 畫方塊的 Line 敘述(2) 其中最後一個參數若為 BF，則畫出來的方塊其內部的顏色將與邊線的顏色相同，如果最後一個參數為 B，則方塊內部的顏色將由 FillStyle 及 FillColor 來決定。

40 畫方塊的 Line 例子一 從 (100,100) 畫一方形到 (500,500)，而方形 內部的顏色跟邊線一樣，同時設定為黃色。 或
Yellow = RGB(255, 255, 0) Line (100,100)-(500,500), Yellow, BF ' 方塊內部與邊線顏色一樣為黃色 ForeColor = RGB(255, 255, 0) ' 將前景顏色設定成黃色 Line (100,100)-(500,500),, BF ' 以上的Line敘述省略了邊線顏色的參數，所以取ForeColor作為邊線顏色

41 畫方塊的 Line 例子二 從 (500,500) 畫一方形到 (900,900)，而方形內部為黃色，邊線為黑色。
FillStyle = 0 ' 實心,將使圖形內部被塗抹成 FillColor 所設定的顏色 FillColor = RGB(255,255,0) ' 塗抹顏色為黃色 Line (500,500)-(900,900), RGB(0,0,0), B

42 畫方塊的 Line 例子三 從 (500,500) 畫一方形到 (900,900)，而方形邊線為黑色，內部則透明。
FillStyle = 1 ' 透明，表示不改變背景的顏色 Line (500,500)-(900,900), RGB(0,0,0), B

43 CurrentX、CurrentY 屬性 每當 VB 在表單上執行了輸出的敘述之後，它都會把最後的座標記錄在 CurrentX 及 CurrentY 兩個屬性裡，以 Line 敘述為例，終點的值將會寫到 CurrentX 及 CurrentY 裡面。

44 省略 Line 敘述的起點(1) 而在Line敘述中，「起點」參數是可以省略的，如果省略了起點參數，Line將會以 (CurrentX,CurrentY) 為起點，便可以很容易畫出連續的線段 。 例如已知三點 (100,100)、(400, 200)、(100,300)，畫出其三角形的程式如下： Line (100,100)-(400,200) ' (CurrentX, CurrentY) 變成 (400,200) Line -(100,300) ' 等於 Line (400,200)-(100,300) Line -(100,100) ' 等於 Line (100,300)-(100,100)

45 省略 Line 敘述的起點(2)

46 Line 敘述的實例練習(1) 已知座標的 5 個點，如下圖，利用 Line 敘述畫出一星形。

47 Line 敘述的實例練習(2) Line (1245, 375)-(525, 1665) Line -(2085, 765) Line -(480, 765) Line -(2010, 1740) Line -(1245, 375)

48 13-4 Circle 敘述

49 Circle 敘述 -- 圓形 Circle 敘述可以用來畫圓、圓弧、扇形、及橢圓。 以Circle 敘述來畫圓形的格式是：
Circle (X, Y), 半徑[, 邊框顏色]

50 畫圓形的例子一

51 畫圓形的例子二 以上三個參數中，邊框顏色是可以省略的，若省略則取表單的 ForeColor 屬性為顏色，例如：
ForeColor = RGB(255, 0, 0) ‘ 紅色 Circle (1000, 1000), ’ 省略邊框顏色 ' 所以取表單的ForeColor顏色, 即紅色

52 畫圓形的例子三 畫圓時，是否塗抹圓形區域是由表單的 FillStyle(塗抹樣式)屬來性決定，如果 FillStyle 屬性值等於 “0 - 實心”，則塗抹的顏色便取自 FillColor 屬性的顏色，例如： FillStyle = 0 ' 實心 FillColor = RGB(0, 255, 0) ' 綠色 Circle (1000, 1000), 500 ' 畫一圓，並填滿為綠色

53 畫圓形的例子四 FillStyle = 1 ' 透明 Circle (1000, 1000), 500 ' 只畫圓框，不塗抹圓形區域

54 Circle 敘述 -- 圓弧(1) 以 Circle 敘述來畫圓弧的格式是：
Circle (X, Y), 半徑, [邊框顏色], 起始角度, 終止角度

55 Circle 敘述 -- 圓弧(2) 這個格式增加了兩個參數：起始角度及終止角度，不過要正確地下對這兩個參數前，必須先瞭解兩件事情：
1. 圓形角度。 2. 角度量與弳度量的換算 。

56 Circle 敘述 -- 圓弧(3) 圓形角度： 圓形的角度以最右邊為 0°，然後以逆時針方向累增，而繞行一圈的角度是 360°，如下：

57 Circle 敘述 -- 圓弧(4) 角度量與弳度量的換算：
Circle敘述所接受的角度是弳度量(radian)，而不是角度量(degree)，所以設定起始角度及終止角度時，必須先把角度量換算成弳度量，換算的根據是π= 180°，而換算的公式是： 弳度 = 角度×π÷180 (π = )

58 Circle 敘述 -- 圓弧例子一(1) 以 (900, 900) 為圓心，半徑等於 500，從 90° 畫一圓弧到 180°

59 Circle 敘述 -- 圓弧例子一(2) pi = s = 90 * pi / 180 ' 起始角度 90°的弳度量 e = 180 * pi / 180 ' 終止角度 180°的弳度量 Circle (900, 900), 500,, s, e ' 省略邊框顏色參數 起始角度及終止角度的有效值是 -2π～2π，超過這個範圍 Circle 敘述並不接受，請特別注意。 又 -2π～0 範圍的角度值是用來畫扇形，後述。

60 Circle 敘述 -- 圓弧例子二(1) 起始角度及終止角度也可以省略其中一個，其中若省略終止角度，則終止角度被視為 360°，若省略起始角度，則起始角度被視為 0°。

61 Circle 敘述 -- 圓弧例子二(2) 例： pi = d270 = 270 * pi / 180 d45 = 45 * pi / 180 ' 省略終止角度,相當於從270 °畫弧到360° Circle (900, 900), 500,, d270 ' 省略起始角度,相當於從0 °畫弧到45° Circle (900, 900), 500,,, d45

62 Circle 敘述 -- 扇形(1) 如果我們自己手繪扇形，通常會先畫一圓弧，然後再從圓弧兩端畫線段到圓心，即成扇形。
Circle (X, Y), 半徑, [邊框顏色], 起始角度, 終止角度

63 Circle 敘述 -- 扇形(2) 但是設定 ‘起始角度’ 及 ‘終止角度’ 時，要傳入負值，也就是從 -2π～0，以示區分。

64 Circle 敘述 --扇形例子 (1) 以 (900, 900) 為圓心，半徑等於 500，從 90° 畫一扇形到 180°

65 Circle 敘述 --扇形例子 (2) pi = s = 90 * pi / 180 ‘ 起始角度 e = 180 * pi / 180 ’ 終止角度 ' 將起始角度及終止角度設成負值，即是畫扇形 Circle (900, 900), 500,, -s, -e 扇形內部的顏色也是由表單的 FillStyle 及 FillColor 兩種屬性來決定，其決定之原則與畫圓形時相同。

66 Circle 敘述 --橢圓 (1) Circle 畫橢圓的方法是以同半徑的圓為基礎，然後向圓心方向擠壓畫出橢圓，如下：

67 Circle 敘述 --橢圓 (2) 至於擠壓到什麼程度呢？則是根據「縱橫比」(aspect)，縱橫比的意義如下：

68 Circle 敘述 --橢圓 (3) 所以利用 Circle 畫橢圓只要加個縱橫比參數即可，如下：
Circle (X, Y), 半徑, [邊框顏色], [起始角度], [終止角度], 縱橫比

69 Circle 敘述 --橢圓 (4) 其中縱橫比會決定橢圓的形狀，如果想從縱橫比得知橢圓的形狀，以下是簡單的判斷原則：
縱橫比＝１：也就是縱向長度等於橫向長度，畫出來的形狀其實就是一個圓形。 縱橫比＞１：縱向長度大於橫向長度，所以呈「左右窄」的形狀，而縱橫比越大，則左右越窄。 縱橫比＜１：縱向長度小於橫向長度，所以呈「上下窄」的形狀，而縱橫比越小，則上下越窄。

70 Circle 敘述 --橢圓 (5)

71 Circle 敘述 -- 橢圓例子一 以 (900,900) 為圓心，半徑等於 500，畫一縱橫比為 2 的橢圓。
' 省略了邊框顏色、起始角度、終止角度三個參數

72 Circle 敘述 -- 橢圓例子二 上面這個例子省略了起始角度及終止角度，如果把這兩個參數也應用上去，還可以畫出橢圓的弧線及扇形，例如：
pi = s = 90 * pi / 180 e = 180 * pi / 180 Circle (900, 900), 500,, s, e, 1/2 ' 畫一橢圓弧線 Circle (900, 900), 500,, -s, -e, 2 ' 畫一橢圓扇形

73 Circle 敘述 -- 實例練習(1) 畫一太極圖。

74 Circle 敘述 -- 實例練習(2) 繪製本範例的太極圖步驟：

75 Circle 敘述 -- 實例練習(3) 假設太極圖的圓心是 (X,Y)，而半徑等於 R，則描繪的程式如下：
Const pi = ' 圓週率 π X = ScaleWidth / 2 Y = ScaleHeight / 2 R = ScaleWidth / 4 BLACK = QBColor(0) ' 黑色 WHITE = QBColor(15) ' 白色 FillStyle = 0 ' 填滿

76 Circle 敘述 -- 實例練習(4) ' 1.繪製含有邊框的白色圓形 FillColor = WHITE Circle (X, Y), R ' (X,Y) 即滑鼠按下時的座標位置 ' 2.在左半邊繪製黑色半圓 FillColor = BLACK Circle (X, Y), R, , -90 * pi / 180, -270 * pi / 180 ' 3.在上方繪製 1/2 大的黑色圓形 Circle (X, Y - R / 2), R / 2

77 Circle 敘述 -- 實例練習(5) ' 4.在下方繪製 1/2 大的白色圓形 FillColor = WHITE ForeColor = WHITE Circle (X, Y + R / 2), R / 2 ' 5.在上方繪製 1/6 大的白色圓形 Circle (X, Y - R / 2), R / 6 ' 6.在下方繪製 1/6 大的黑色圓形 FillColor = BLACK ForeColor = BLACK Circle (X, Y + R / 2), R / 6

78 13-5 影響圖形輸出的屬性

79 設定邊線寬度的 DrawWidth 屬性(1)
DrawWidth = 1 ' 設定為 1 點寬 Line (100, 500)-(2000, 500) DrawWidth = 5 ' 設定為 5 點寬 Line (100, 1200)-(2000, 1200) DrawWidth = 10 ' 設定為 10 點寬 Line (100, 1900)-(2000, 1900)

80 設定邊線寬度的 DrawWidth 屬性(2)
而執行以上敘述的結果如下： 比較值得注意的是：當 DrawWidth 較大時，所 畫出來的線段兩端會呈圓形。

81 設定邊線樣式的 DrawStyle 屬性(1)
0 - 實線 1 - 破折線 2 - 點線 3 - 破折線-點線 4 - 破折線-點線-點線 5 - 透明 6 - 內實線

82 設定邊線樣式的 DrawStyle 屬性(2)
以下還是以實例來觀察設定這些樣式值之後，邊線輸出的結果： DrawWidth = 1 DrawStyle = 0 ' 實線 Line (100, 500)-(2000, 500) DrawStyle = 1 ' 破折線 Line (100, 900)-(2000, 900) DrawStyle = 2 ' 點線 Line (100, 1300)-(2000, 1300) DrawStyle = 3 ' 破折線-點線 Line (100, 1700)-(2000, 1700) DrawStyle = 4 ' 破折線-點線-點線 Line (100, 2100)-(2000, 2100)

83 設定邊線樣式的 DrawStyle 屬性(3)
以上畫線段的實例中並未設定 “5 - 透明” 及 “6 - 內實線” 兩種樣式值，這是因為這兩種樣式值是「邊框」專用的。

84 設定邊線樣式的 DrawStyle 屬性(4)
若將樣式值設定成 "5 - 透明"，則畫圖形時將不畫邊框，如下：

85 設定邊線樣式的 DrawStyle 屬性(5)
如果將樣式值設定成 “6 - 內實線”，則當邊框超過 1 點時，邊線會往圖形內部畫，如下：

86 讓塗抹樣式更有變化的 FillStyle 屬性(1)
我們前面就已經介紹過 FillStyle (塗抹樣式)屬性，不過當時只說明了兩種樣式值 “0 - 實心” 及 “1 - 透明”，除了這兩種樣式值之外， FillStyle 還可以是： 2 - 水平線 3 - 垂直線 4 - 左上到右下的斜線 5 - 左下到右上的斜線 6 - 垂直交叉線 7 - 對角交叉線

87 讓塗抹樣式更有變化的 FillStyle 屬性(2)

88 表單顯示區的寬與高：ScaleWidth 與 ScaleHeight (1)

89 p.398 實例練習 製作一個可以從左向右移動的大嘴巴動畫，而當動畫移過表單右邊界，動畫又會從左邊界開始移動，如下圖。

90 p.398 實例練習 Step 1 在表單上佈置一組(共4個)影像框(Image)陣列，並且設定其 Picture 屬性如下:

91 p.398 實例練習 Step 2 將以上 4 個影像框的 Visible 屬性全部設定為 False。

92 p.398 實例練習 Step 3-1 在表單上佈置另一個影像框及一個計時器，並設定相關屬性，最後完成之表單如下：

93 p.398 實例練習 Step 3-2 其中設定之屬性如下：

94 p.398 實例練習 Step 4-1 在 Timer1_Timer 程式區塊中撰寫以下程式：
Dim Index As Integer ‘ 宣告在Timer1_Timer之外 Private Sub Timer1_Timer() ’ Image2 每次變換一張圖片 Set Image2.Picture = Image1(Index).Picture ‘ Image2 每次前進 Image2.Width/6 的寬度 Image2.Left = Image2.Left + Image2.Width / 6

95 p.398 實例練習 Step 4-2 ‘ 如果 Image2 已經超過右邊界，則移到左邊界 If Image2.Left > Form1.ScaleWidth Then Image2.Left = ' Image1的陣列註標值加一，若大於4，則歸0 Index = Index If Index >= 4 Then Index = 0 End Sub