新觀念的VB6教本ch13

新觀念的新觀念的 VB6VB6 教本教本
第第 1313 章章表單的圖形輸出系統表單的圖形輸出系統

13-113-1 座標系統座標系統

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

相對性的座標相對性的座標 (1)(1)
 表單的座標是以螢幕的左上角為原點，而決定表單座表單的座標是以螢幕的左上角為原點，而決定表單座
標的屬性是標的屬性是 (Left, Top)(Left, Top) 。。
 此圖是我們將此圖是我們將 LeftLeft 屬性設定為屬性設定為 15001500 、、 TopTop 屬性設定屬性設定
為為 900900 之後，表單執行時所顯示的結果。之後，表單執行時所顯示的結果。
1500
900
以螢幕的
左上角為原點
表單座標 (1500,900)

 而當我們在表單上置控制元件時，也可以利用佈而當我們在表單上置控制元件時，也可以利用佈 LeftLeft
及及 TopTop 屬性來決定控制元件的座標，但此時的座標是屬性來決定控制元件的座標，但此時的座標是
以表單顯示區的左上角為原點。以表單顯示區的左上角為原點。
1500
900
以表單顯示區的
左上角為原點
座標(840,720)
840
720

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

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

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

座標的單位座標的單位 ---- 疑問的解答疑問的解答 (2)(2)
 如圖：如圖：
 為了能在解析度較高的裝置上輸出更精緻的夠為了能在解析度較高的裝置上輸出更精緻的夠
圖形，所以圖形，所以 VBVB 選擇了一種很小的單位叫做選擇了一種很小的單位叫做
TwipTwip 作為座標的單位。作為座標的單位。
640×480 的 VGA 所輸出
2 公分半徑的圓
600×600dpi 的印表機
所輸出 2 公分半徑的圓

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

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

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

13-213-2 輸出顏色的設定輸出顏色的設定

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

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

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

ForeColor (前景顏色)
FillColor (塗抹顏色)
BackColor
(背景顏色)
FillStyle=0- 填滿 FillStyle=1- 透明

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

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

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

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

RGBRGB 三原色的意義三原色的意義 (2)(2)
R( 紅 )
G( 綠 ) B( 藍 )
黃紫
白
青

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

RGBRGB 函數的參數函數的參數 (2)(2)
 以下所列出的是一些常用顏色的以下所列出的是一些常用顏色的 RGBRGB 設定設定
：值：值
顏色Ｒ值Ｇ值Ｂ值
黑色
0 0 0
藍色
0 0 255
綠色
0 255 0
青色
0 255 255
紅色
255 0 0
紫色
255 0 255
黃色
255 255 0
白色
255 255 255
顏色Ｒ值Ｇ值Ｂ值
灰色
128 128 128
暗藍色
0 0 128
暗綠色
0 128 0
暗青色
0 128 128
暗紅色
128 0 0
暗紫色
128 0 128
暗黃色
128 128 0
亮灰色
192 192 192

RGBRGB 與顯示卡的顏色與顯示卡的顏色 (1)(1)
 由於由於 RGBRGB 三個參數三個參數 RR 、、 GG 、、 BB 的數的數
範圍是值範圍是值 00 ～～ 255255 ，所以使用，所以使用 RGBRGB 函函
數所組合出來的顏色一共可達數所組合出來的顏色一共可達
256×256×256256×256×256 ＝＝ 16,777,21616,777,216 種顏色。種顏色。
 但並不是所有的但並不是所有的 VGAVGA 顯示卡都支援那顯示卡都支援那
麼多的顏色，假設麼多的顏色，假設 VGAVGA 只支援只支援 1616 色色
，那麼當我們把顏色設定到，那麼當我們把顏色設定到 1616 顏色之顏色之
外時，顯示出來的結果將會如何？呢外時，顯示出來的結果將會如何？呢

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

 但顯示在但顯示在 1616 色的色的 VGAVGA 時，卻是以紅色和黃時，卻是以紅色和黃
色均分的方式來顯示，如下圖：勻佈色均分的方式來顯示，如下圖：勻佈
 以調色的方式顯示出來的顏色，在視覺上還算以調色的方式顯示出來的顏色，在視覺上還算
十分近似。十分近似。
黃色
紅色
以網狀平均分佈紅色與黃
色，使視覺上近似橘色。

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

QBColorQBColor 函數函數 (1)(1)
 除了除了 RGBRGB 函數可以用來取得顏色設定，另一值函數可以用來取得顏色設定，另一值
個個 QBColorQBColor 函數也具備類似的功能，只是它只函數也具備類似的功能，只是它只
能取得能取得 1616 種顏色的設定，首先請參考下表：值種顏色的設定，首先請參考下表：值
參數顏色
0
黑色
1
暗藍色
2
暗綠色
3
暗青色
4
暗紅色
5
暗紫色
6
暗黃色
7
亮灰色
參數顏色
8
灰色
9
藍色
10
綠色
11
青色
12
紅色
13
紫色
14
黃色
15
白色

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

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

QBColorQBColor 函數函數 ---- 實例練習實例練習
Step1Step1
 在表單上置一計時器控制元件，佈在表單上置一計時器控制元件，佈
並且將其並且將其 IntervalInterval 屬性設定為屬性設定為 100100
(( 也就是也就是 0.10.1 秒秒 )) 。。

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

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

13-313-3 畫線與方形的畫線與方形的 LineLine 敘敘
述述

畫線的畫線的 LineLine 敘述敘述
 LineLine 敘述可以用來畫線或方形。敘述可以用來畫線或方形。
 若是用來畫線，其格式是：若是用來畫線，其格式是：
Line (x1,y1)-(x2,y2), 顏色
起點畫線的顏色終點

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

畫方塊畫方塊的的 LineLine 敘述敘述 (1)(1)
 LineLine 敘述也可以用來畫方塊，其格式是敘述也可以用來畫方塊，其格式是
：：
Line (x1,y1)-(x2,y2), 邊線顏色 , BF
方塊一角參考以下說明方塊對角
Line (x1,y1)-(x2,y2), 邊線顏色 , B

畫方塊畫方塊的的 LineLine 敘述敘述 (2)(2)
 其中最後一個參數若為其中最後一個參數若為 BFBF ，則畫出來，則畫出來
的方塊其內部的顏色將與邊線的顏色相的方塊其內部的顏色將與邊線的顏色相
同，如果最後一個參數為同，如果最後一個參數為 BB ，則方塊內，則方塊內
部的顏色將由部的顏色將由 FillStyleFillStyle 及及 FillColorFillColor 來來
決定。決定。
方塊內部的顏色
與邊線顏色相同
最後一個參數 =BF
最後一個參數 =B
Fi l l St yl e=0- 填滿
方塊內部的顏色用
Fi l l Col or 來填滿
最後一個參數 =B
Fi l l St yl e=1- 透明
方塊內部是透明的

畫方塊畫方塊的的 LineLine 例子一例子一
 從從 (100,100)(100,100) 畫一方形到畫一方形到 (500,500)(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 作為
邊線顏色

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

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

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

省略省略 LineLine 敘述的起點敘述的起點 (1)(1)
 而在而在 LineLine 敘述中，「起點」參數是可以敘述中，「起點」參數是可以
省略的，如果省略了起點參數，省略的，如果省略了起點參數， LineLine 將將
會以會以 (CurrentX,CurrentY)(CurrentX,CurrentY) 為起點，便可為起點，便可
以很容易畫出連續的線段以很容易畫出連續的線段。。
 例如已知三點例如已知三點 (100,100)(100,100) 、、 (400, 200)(400, 200) 、、
(100,300)(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)

省略省略 LineLine 敘述的起點敘述的起點 (2)(2)
(100,100)
(100,300)
(400,200)
Li ne ( 100, 100)-( 400, 200)
Li ne - ( 100, 300)
Li ne - ( 100, 100)
1.
2.
3.

LineLine 敘述的實例練習敘述的實例練習 (1)(1)
 已知座標的已知座標的 55 個點，如下圖，利用個點，如下圖，利用
LineLine 敘述畫出一星形。敘述畫出一星形。
(1245,375)
(525,1665)
(2085,765)(480,765)
(2010,1740)

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

13-4 Circle13-4 Circle 敘述敘述

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

畫圓形的例子一畫圓形的例子一
Ci r cl e ( 1000, 1000) , 500, RGB( 0, 255, 0)
圓心半徑邊框顏色
綠色

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

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

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

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

 這個格式增加了兩個參數：這個格式增加了兩個參數：起始角起始角
度度及及終止角度終止角度，不過要正確地下對，不過要正確地下對
這兩個參數前，必須先瞭解兩件事這兩個參數前，必須先瞭解兩件事
情：情：
1.1. 圓形角度。圓形角度。
2.2. 角度量與度量的換算弳角度量與度量的換算弳。。

 圓形角度圓形角度：：
圓形的角度以最右邊為圓形的角度以最右邊為 0°0° ，然後以逆時針方向累，然後以逆時針方向累
增，而繞行一圈的角度是增，而繞行一圈的角度是 360°360° ，如下：，如下：
0o
45o
90o
135o
180o
225o
270o
315o
360o
圓形的角度以最右邊為0°
，然後以逆時針方向累增，
而繞行一圈的角度是360°。

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

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

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

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

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

CircleCircle 敘述敘述 ---- 扇形扇形 (1)(1)
 如果我們自己手繪扇形，通常會先畫一如果我們自己手繪扇形，通常會先畫一
圓弧，然後再從圓弧兩端畫線段到圓心圓弧，然後再從圓弧兩端畫線段到圓心
，即成扇形。，即成扇形。
 而對於而對於 CircleCircle 敘述來說，原來畫圓弧的敘述來說，原來畫圓弧的
參數就足以用來畫扇形，因此畫扇形的參數就足以用來畫扇形，因此畫扇形的
參數與畫圓弧完全相同，如下：參數與畫圓弧完全相同，如下：
Circle (X, Y), 半徑 , [ 邊框顏色 ], 起始角度 ,
終止角度

CircleCircle 敘述敘述 ---- 扇形扇形 (2)(2)
 但是設定 ‘起始角度’ 及 ‘終止角度’ 時，要但是設定 ‘起始角度’ 及 ‘終止角度’ 時，要
傳入傳入負值負值，也就是從，也就是從 -2π-2π ～～ 00 ，以示區分，以示區分
。。
半徑
扇形只是比圓弧多了
圓心到邊框的線段。
圓心
( X, Y)
起始角度
終止角度

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

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

CircleCircle 敘述敘述 ---- 橢圓橢圓 (1)(1)
 CircleCircle 畫橢圓的方法是以同半徑的圓為畫橢圓的方法是以同半徑的圓為
基礎，然後向圓心方向擠壓畫出橢圓，基礎，然後向圓心方向擠壓畫出橢圓，
如下：如下：
半徑
半徑從左右兩邊向
圓心方向擠壓
從上下兩邊向
圓心方向擠壓

 至於擠壓到什麼程度？則是根據「縱呢至於擠壓到什麼程度？則是根據「縱呢
橫比」橫比」 (aspect)(aspect) ，縱橫比的意義如下：，縱橫比的意義如下：
橫向長度
縱橫比=縱向長度/ 橫向長度
縱向長度

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

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

縱橫比＝１縱橫比＞１縱橫比＜１
縱向長度＝橫向長度縱向長度＞橫向長度縱向長度＜橫向長度

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

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

CircleCircle 敘述敘述 ---- 實例練習實例練習 (1)(1)
 畫一太極圖。畫一太極圖。
半徑

 繪製本範例的太極圖步驟：繪製本範例的太極圖步驟：
2. 在左半邊繪製
　黑色半圓
3. 在上方繪製1/2
　大的黑色圓形
4. 在下方繪製1/2
　大的白色圓形
5. 在上方繪製1/6
　大的白色圓形
6. 在下方繪製1/6
　大的黑色圓形
1. 繪製含有邊框
　的白色圓形

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

' 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

' 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

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

設定邊線度的寬設定邊線度的寬
DrawWidthDrawWidth 屬性屬性 (1)(1)
 DrawWidth(DrawWidth( 邊線度寬邊線度寬 )) 是用來設定線段是用來設定線段
及圖形邊框的度，內定為寬值及圖形邊框的度，內定為寬值 11 ，設定，設定
的方法十分簡單，例如：的方法十分簡單，例如：
DrawWidth = 1 ' 設定為 1 點寬
Line (100, 500)-(2000, 500)
Line (100, 1200)-(2000, 1200)
Line (100, 1900)-(2000, 1900)

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

設定邊線樣式的設定邊線樣式的
DrawStyleDrawStyle 屬性屬性 (1)(1)
 DrawStyle (DrawStyle ( 邊線樣式邊線樣式 )) 屬性是用來設定線屬性是用來設定線
段及圖形邊框的樣式，可設定的樣式有：值段及圖形邊框的樣式，可設定的樣式有：值
0 -0 - 實線實線
1 -1 - 破折線破折線
2 -2 - 點線點線
3 -3 - 破折線破折線 -- 點線點線
4 -4 - 破折線破折線 -- 點線點線 -- 點線點線
5 -5 - 透明透明
6 -6 - 內實線內實線

 以下還是以實例來觀察設定這些樣式值以下還是以實例來觀察設定這些樣式值
之後，邊線輸出的結果：之後，邊線輸出的結果：
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)

 以上畫線段的實例中並未設定 “以上畫線段的實例中並未設定 “ 5 -5 - 透明” 及 “透明” 及 “ 6 -6 -
內實線” 兩種樣式，這是因為這兩種樣式是值值內實線” 兩種樣式，這是因為這兩種樣式是值值
「邊框」專用的。「邊框」專用的。
0- 實線
1- 破折線
2- 點線
3- 破折線-點線
4- 破折線-點線-點線

 若將樣式設定成值若將樣式設定成值 "5 -"5 - 透明透明 "" ，則畫圖，則畫圖
形時將不畫邊框，如下：形時將不畫邊框，如下：
Dr awSt yl e = 0 ' 實線
Li ne ( x1, y1) - ( x2, y2) , , B
Dr awSt yl e = 5 ' 透明
Li ne ( x1, y1) - ( x2, y2) , , B

 如果將樣式設定成 “值如果將樣式設定成 “值 6 -6 - 內實線”，則當邊內實線”，則當邊
框超過框超過 11 點時，邊線會往圖形內部畫，如點時，邊線會往圖形內部畫，如
下：下： Dr awSt yl e = 0 ' 實線
Dr awWi dt h = 3
Li ne ( x1, y1) - ( x2, y2) , , B
Dr awSt yl e = 6 ' 內實線
Dr awWi dt h = 3
Li ne ( x1, y1) - ( x2, y2) , , B
三點邊線向
左右兩邊畫
三點邊線
向裡面畫

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

讓塗抹樣式更有變化的讓塗抹樣式更有變化的
FillStyleFillStyle 屬性屬性 (2)(2)
 以下是當我們把以下是當我們把 FillStyleFillStyle 設定成以上的設定成以上的
樣式，區域塗抹的樣式：值樣式，區域塗抹的樣式：值
2- 水平線
3- 垂直線
4- 左上到右下斜線
5- 左下到右上斜線
6- 垂直交叉線
7- 對角交叉線

表單顯示區的與高：寬表單顯示區的與高：寬
ScaleWidthScaleWidth 與與 ScaleHeightScaleHeight (1)(1)
 由於表單是圖形輸出的所在，如果由於表單是圖形輸出的所在，如果
圖形的輸出不考慮表單的與高，寬圖形的輸出不考慮表單的與高，寬
則圖形可能輸出到表單之外，所以則圖形可能輸出到表單之外，所以
在圖形的輸出中，我們也經常會使在圖形的輸出中，我們也經常會使
用到表單的兩個屬性用到表單的兩個屬性 ScaleWidth(ScaleWidth( 表表
單顯示區之度寬單顯示區之度寬 )) 及及 ScaleHeight(ScaleHeight( 表表
單顯示區之高度單顯示區之高度 )) 。。

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

p.398p.398 實例練習實例練習 Step 1Step 1
 在表單上置一組佈在表單上置一組佈 (( 共共 44 個個 )) 影像框影像框
(Image)(Image) 陣列，並且設定其陣列，並且設定其 PicturePicture 屬性屬性
如下如下 ::
物件陣列陣列註標
Picture
屬性圖檔
Image1 0
本書
ch13
目錄底下的
bigm01.bmp
1
本書
ch13
目錄底下的
bigm02.bmp
2
本書
ch13
目錄底下的
bigm03.bmp
3
本書
ch13
目錄底下的
bigm02.bmp

p.398p.398 實例練習實例練習 Step 2Step 2
 將以上將以上 44 個影像框的個影像框的
VisibleVisible 屬性全部設定為屬性全部設定為
FalseFalse 。。

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

 其中設定之屬性如下：其中設定之屬性如下：
物件屬性屬性值
表單
Caption
天生大嘴巴
BackColor
白色
Timer1 Interval 100
Image2 Picture
本書磁片的
ch13
目錄底下的
bigm01.bmp

 在在 Timer1_TimerTimer1_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

‘ 如果 Image2 已經超過右邊界，則移到左邊界
If Image2.Left > Form1.ScaleWidth Then
Image2.Left = 0
' Image1 的陣列註標值加一，若大於 4 ，則歸 0
Index = Index + 1
If Index >= 4 Then Index = 0
End Sub

新觀念的VB6教本ch13

More Related Content

Viewers also liked

Similar to 新觀念的VB6教本ch13

Recently uploaded

新觀念的VB6教本ch13