計算機程式廖文淵 Department of Computer Science and Engineering

計算機程式廖文淵 Department of Computer Science and Engineering De-Lin Institute of Technology andres@dlit. edu. tw

第九章繪圖

設定顏色 • 所謂的繪圖，就是在背景色上以前景色畫點、畫線、或其他的幾何圖形 • 在開始學繪圖之前，得先知到如何設定顏色

QBColor函數 • QBColor函數是為了要繼承以往DOS底下的Quick Basic所設的 l. Var = QBColor(號碼) 例如：Fore. Color = QBColor(14) • IVar就是相對應的RGB值號碼 0 1 2 3 4 5 6 7 代表顏色黑色深藍色深綠色深青色暗紅色深紫色黃棕色灰色號碼 8 9 10 11 12 13 14 15 代表顏色深灰色藍色綠色青色紅色紫色黃色白色

QBColor函數範例(1) • 範例(EX 9 -1) s 這個範例最主要的目的是列出所有QBColor函數所提供的顏色，並觀察每一顏色相對應的RGB十六進位值 • 說明 s 程式開始執行，表單上會列出所有QBColor的顏色，以及其對應的RGB值

QBColor函數範例(2) • 步驟 1. 這個程式不需要放置任何控制項 2. 依照下表修改表單的屬性欄 Name Auto. Redraw Form 1 frm. Digital. Clock True Border. Style Caption Fore. Color 1 QBColor 0 3. 在表單的Form_Activate事件程序中填入下列程式碼 01. 02. 03. 04. 05. 06. 07. 08. 09. Private Sub Form_Activate() For i = 0 To 15 Print Format(i, "00 "); Fore. Color = QBColor(i) Print "█████"; Fore. Color = 0 Print Hex(QBColor(i)) Next End Sub

RGB函數 s 可以產生任何色彩 s 讓設計師可以更方便的利用紅、綠、藍三原色混和出顏色，不須熟悉位元運算 s RGB函數的格式 l. Var = RGB(R, G, B) s R、G、B分別代表R、G、B(紅、綠、藍) 的數值 s 範圍為 0 到 255，0 表示該顏色的成分最低，255 表示成分最高 s 例如產生純紅色RGB值 l. Var = RGB(255, 0, 0) s 例如將表單被景色改呈藍色 Back. Color = RGB(0, 0, 255)

直接填入值(1) • 指定十六進位RGB值 s RGB十六進位值的表現方式 Fore. Color = &H 00 BBGGRR 顏色常數值 0 十六進位值最高位元組 &H 0& 黑色 vb. Black &H 0& 0 0 &HFF 0000 藍色 vb. Blue &HFF 0000 0 255 0 &HFF 00& 綠色 vb. Green &HFF 00& 紅色 0 0 255 &HFF& 紅色 vb. Red &HFF& 青色 255 0 &HFFFF 00 青色 vb. Cyan &HFFFF 00 紫色 255 0 255 &HFF 00 FF 紫色 vb. Magenta &HFF 00 FF 黃色 0 255 &HFFFF& 黃色 vb. Yellow &HFFFF& 白色 255 255 &HFFFFFF 白色 vb. White &HFFFFFF 灰色 192 192 &HC 0 C 0 C 0 深灰 80 80 80 &H 808080 顏色藍色值(B) 綠色值(G) 紅色值(R) 黑色 0 0 藍色 255 綠色常數

直接填入值(2) • 指定系統顏色 s 用Long(長整數)設定顏色 s 長整數型別資料佔用 4個位元組(Byte) s RGB三原色分別佔用一個位元組 s 最高位元組的最高位元：最高位元為 1時，代表其後3個位元組是系統顏色編號為 0時，其後3個位元組是RGB值 s 系統顏色：Windows環境中所提供的顏色 s 透過”控制台/顯示器”中的”外觀”頁來設定這些顏色

直接填入值(3) s Visual Basic中預先定義的系統顏色常數常數 Vb. Scroll. Bars Vb. Desktop vb. Active. Title. Bar vb. Inactive. Title. Bar Vb. Menu. Bar vb. Window. Background vb. Window. Frame vb. Menu. Text vb. Window. Text vb. Title. Bar. Text vb. Active. Border vb. Inactive. Border vb. Application. Workspace Vb. Highlight vb. Highlight. Text vb. Button. Face vb. Button. Shadow vb. Gray. Text vb. Button. Text vb. Inactive. Caption. Text vb 3 DHighlight vb 3 DDKShadow vb 3 DLight vb 3 DFace vb 3 DShadow vb. Info. Text vb. Info. Background 值 &H 80000000 &H 80000001 &H 80000002 &H 80000003 &H 80000004 &H 80000005 &H 80000006 &H 80000007 &H 80000008 &H 80000009 &H 8000000 A &H 8000000 B &H 8000000 C &H 8000000 D &H 8000000 E &H 8000000 F &H 80000010 &H 80000011 &H 80000012 &H 80000013 &H 80000014 &H 80000015 &H 80000016 &H 8000000 F &H 80000010 &H 80000017 &H 80000018 說明捲軸顏色桌面顏色使用中視窗標題列顏色非使用中視窗標題列顏色功能表背景顏色視窗框線顏色功能表上文字的顏色視窗內文字的顏色標題、大小方塊和捲動箭號內文字的顏色使用中視窗框線的顏色非使用中視窗框線的顏色多文件介面 (MDI) 應用程式的背景顏色控制項內選項的文字顏色命令鈕正面的顏色命令鈕邊緣的顏色變灰的 (失效的) 文字壓下的按鈕上面文字的顏色非使用中標題內文字的顏色立體顯示元件的反白顏色立體顯示元件的陰影顏色低於 vb 3 Dhighlight 的立體次亮顏色文字表面的顏色文字陰影的顏色具提示文字的顏色具提示背景的顏色

通用對話方塊的種類 1. 2. 3. 4. 5. 6. Open(開啟舊檔) Save. As(另存新檔) Color(色彩) Font(字型) Printer(列印) Win. Help(Windows線上說明)

引用通用對話方塊控制項 1. 執行功能表的”專案(P)/ 設定使用元件(O). . . ”項 ). . . 目 2. 在”設定使用元件對話方塊”的”控制項”頁上找到”Microsoft Common Dialog control 6. 0”項 6. 0 目 1) 在項目前打勾 2) 按下[套用(A)]按鈕 3) 再按下[確定]按鈕 1)選擇”Microsoft Common Dialog Control ”項目在具箱中的Common Dialog控制項 3)按下[確定]按鈕 2)按下[套用(A)]按鈕

放置通用對話方塊控制項 s 用Double-Click或拖放的方式 s 通用對話方塊控制項執行時不會出現在表單上 s 通用對話方塊控制項必須等待程式呼叫其方法，然後產生出所需的對話方塊

產生各種對話方塊兩種方法 • 用Common Dialog的方法(Method)來啟動對話方塊 • 修改Common Dialog的Action屬性值對話方塊第一種：使用Method 不顯示任何對話方塊第二種：修改屬性 Action = 0 Open(開啟舊檔) Object. Show. Open Action = 1 Save. As(另存新檔) Object. Show. Save Action = 2 Color(色彩) Object. Show. Color Action = 3 Font(字型) Object. Show. Font Action = 4 Printer(列印) Object. Show. Printer Action = 5 Win. Help(線上說明) Object. Show. Help Action = 6 Common. Dialog 1. Show. Open Common. Dialog 1. Action = 1

呼叫色彩對話方塊 Common. Dialog 1. Show. Color 用滑鼠按下[定義自訂色彩(D)>>]按鈕

取得所設定的顏色 • 讀取對話方塊的Color屬性值 Color • 傳回值是一個RGB顏色值 • 這個值可以指定給像Fore. Color、Back. Color之類的屬性欄 • 例如 Back. Color = Common. Dialog 1. Color

色彩通用對話方塊實作(1) • 範例(EX 9 -2) s s s 按下[選擇背景色(B)]按鈕之後，螢幕上會出現一個色彩通用對話方塊選定顏色後後，按下通用對話方塊上的[確定]鈕，表單的背景顏色會變更為所選定的顏色如果按下[取消]按鈕，則表單的背景色維持不變 • 說明 1. 執行時，表單上只有一個命令鈕

色彩通用對話方塊實作(2) 2. 按下[選擇背景色(B)]按鈕，螢幕上就會出現一個色彩通用對話方塊

色彩通用對話方塊實作(3) 3. 選擇顏色後，按下[確定]，表單的背景顏色就會變成剛剛所選擇的顏色 • 步驟 1. 引用一個通用對話方塊控制項，然後在表單上放置一個通用對話方塊物件 2. 在表單上放置一個命令鈕

色彩通用對話方塊實作(4) • 依照下表修改各物件屬性欄 Form 1 Border. Style Common. Dialog 1 frm. Dlg. Demo Name Command 1 cmd. Choose. Color dlg. Set. Color 1 Cancel. Error Caption True 色彩通用對話方塊範例選擇背景色(&B) s 通用對話方塊屬性欄Cancel. Error s 預設值是False s 改成True時：使用者在通用對話方塊上按下[取消]時， True 將產生一個錯誤 • 在cmd. Choose. Color的Click事件程序上填入程式碼 01. 02. 03. 04. 05. 06. 07. Private Sub cmd. Choose. Color_Click() On Error Go. To Error_Handler dlg. Set. Color. Show. Color Back. Color = dlg. Set. Color Error_Handler: Error_Handler Exit Sub End Sub

畫點(1) s 將物件上一點設定為所指定的色彩 s 常見的物件有Form、Printer、及 Picture. Box PSet方法物件. PSet [Step] (x, y), [color] Step s 選擇性參數 s 畫點的位置，是由目前Current. X及Current. Y 為原點，再加上後面(X, Y)參數的位移 s (x, y) s 必要參數 s 要畫出點的水平(x軸)與垂直(y軸)座標 s Color s 選擇性參數 s 畫出點的顏色；如果不指定這個值，則使用 Fore. Color 的屬性值

畫點(2) s PSet方法所畫點的大小由Draw. Width屬性欄的值來決定 s Draw. Width為 1時，使用PSet方法會畫出單點 s Draw. Width值越大，畫出來的點越粗 s 每次以PSet(x, y)畫出一點後，Current. X及Current. Y的值就會被重新設定為x及y

PSet實作(1) • 範例(EX 9 -3) s 利用表單的Mouse. Move事件程序來製作一個繪圖程式 • 說明 1. 程式開始執行時，螢幕上會出現一個完全空白的表單 2. 按住滑鼠左鍵不放、在空白的表單上移動時，滑鼠所經過的區域會畫上藍色的點；按住滑鼠右鍵則會畫上紅色的點；按住滑鼠中鍵，則會以背景色畫點，製中鍵背景色造類似橡皮擦的效果

PSet實作(2) 3. 這是以畫點為基礎的繪圖程式 s 滑鼠經過表單引發Mouse. Move事件程序 Mouse. Move s 將傳入的滑鼠X、Y座標，以PSet在表單上畫點 PSet 4. 在Mouse. Move事件程序中 s 針對Button參數，以vb. Left. Button、vb. Right. Button、 vb. Left. Button vb. Right. Button vb. Middle. Button等常數與Select Case配合，創造出畫 vb. Middle. Button Case 藍色點、畫紅色點、橡皮擦等效果 s 以常數vb. Blue、vb. Red等來代表顏色值，提高程式 vb. Blue vb. Red 的可讀性

PSet實作(3) • 步驟 1. 根據下表修改表單屬性 Name Auto. Redraw Back. Color Caption Draw. Width Form 1 frm. Draw True &H 00 FFFFFF& 描點繪圖 4 2. 在表單的Mouse. Move事件程序中填入下列程式碼 01. Private Sub Form_Mouse. Move(Button As Integer, Shift As Integer, _ Button X As Single, Y As Single) 02. Select Case Button 03. Case Is = vb. Left. Button 04. PSet (X, Y), vb. Blue 05. Case Is = vb. Right. Button 06. PSet (X, Y), vb. Red 07. Case Is = vb. Middle. Button 08. PSet (X, Y), Back. Color 09. End Select 10. End Sub

Line方法(畫線)(1) 物件. Line [Step] (x 1, y 1) [Step] - (x 2, y 2), [color] s Step：選擇性參數 Step s 表示使用相對座標。畫線的起使位置(x 1, y 1)，是由目前Current. X及Current. Y 為原點的相對座標 s (x 1, y 1)：選擇性參數 y 1) s 畫線的起始點的座標。預設為Current. X及Current. Y s Step：選擇性參數 Step s 表示使用相對座標。畫線的終點位置(x 2, y 2)，是相對於線的起始點的相對位移 s (x 2, y 2)：必要參數 y 2) s 標明所畫線段的終點座標 s Color：選擇性參數 Color s 指定所畫線段顏色；如果不設定，則表示以物件的 Fore. Color(前景色)來畫線

Line方法(畫線)(2) s 由(Current. X, Current. Y)到(x 2, Y 2)的直線 Line –(x 2, y 2) s 由(x 1, y 1)到(x 2, y 2)的線段 Line (x 1, y 1)-(x 2, y 2) s 由(x 1, y 1)至(x 2, y 2)的黃色線段 Line (x 1, y 1)-(x 2, y 2), vb. Yellow s 每次執行完Line方法後，Current. X及Current. Y的值就會被重新設定為(x 2, y 2) s 線段的粗細是由物件的Draw. Width來控制 Draw. Width s 在Draw. Width=1的情形下，線條樣式由Draw. Style控制 =1 Draw. Style s 五種線條樣式，分別由Draw. Style=0~4代表

Line方法(畫線)(3) • Draw. Style(線條樣式)範例 s 在空白表單的Form_Activate事件程序中填入下列程式碼 s 注意Draw. Style必須在Draw. Width=1的狀態下才會有作用 Private Sub Form_Activate() Dim i As Integer For i = 0 To 4 Draw. Style = i Line (100, (i + 1) * 500)-(2500, (i + 1) * 500), vb. Black Next End Sub Draw. Style = 0 Draw. Style = 1 Draw. Style = 2 Draw. Style = 3 Draw. Style = 4

畫線實作(1) • 範例(EX 9 -4) s 範例EX 9 -3有個缺點，就是當我們移動滑鼠過快，那麼線條便會產生不連續的狀況 s 我們可以利用Line方法來加以改良，讓點與點之間以線條來聯繫，如此即可形成不間斷的連續線

畫線實作(2) • 說明 1. 用Line方法代替PSet方法，讓點與點之間以線條連接 2. 按下滑鼠按鈕表示開始畫圖，因此在Mouse. Down中將座標設定給Current. X及Current. Y作為畫線的起點 3. 表單物件上已經有Current. X、Current. Y兩個屬性欄紀錄Line方法的起點位置，因此在Mouse. Move中偵測按下的滑鼠按鈕，然後以Line方法加上(X 2, Y 2)座標即可畫出連續線

畫線實作(3) • 步驟 1. 根據下表修改表單屬性 Form 1 Name Auto. Redraw Back. Color Caption Draw. Width frm. Draw. Line True &H 00 FFFFFF& 描點繪圖 4 2. 在Mouse. Down及Mouse. Move事件程序中填入程式碼 01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. Private Sub Form_Mouse. Down(Button As Integer, Shift As Integer, X As Single, Y As Single) Current. X = X Current. X Current. Y = Y Current. Y End Sub Private Sub Form_Mouse. Move(Button As Integer, Shift As Integer, X As Single, Y As Single) Select Case Button Select Case Is = vb. Left. Button Case Line -(X, Y), vb. Blue Case Is = vb. Right. Button Case Line -(X, Y), vb. Red Line Case Is = vb. Middle. Button Case Line -(X, Y), Back. Color Line End Select End Sub

Line方法(畫矩形) 物件. Line [Step] (x 1, y 1) [Step] - (x 2, y 2), [color], BF s Step：選擇性參數 Step s 採用相對座標，以Current. X及Current. Y為原點座標 s (x 1, y 1)：選擇性參數 y 1) s 矩形的起始點。省略的話，由Current. X及Current. Y來代替 s Step：選擇性參數 Step s (x 2, y 2)採用起始點(X 1, Y 1)為原點的相對座標 s (x 2, y 2)：必要參數 y 2) s (x 2, y 2)相當於右下角座標 s Color：選擇性參數 Color s 矩形外框的 RGB 色彩。如省略，則為物件的Fore. Color s B：繪製矩形的必要參數(B或BF任選其一) s 矩形內部受物件的 Fill. Color 及 Fill. Style兩個屬性影響。 Fill. Style 的預設值 1(透明)，在不更動Fill. Style預設值的情形下，只加B參數所繪製出來的矩形將只有外框 s BF：表示要以Color參數(外框顏色)來填充矩形內部 BF

畫矩形實作(1) • 範例(EX 9 -5) s • 用”繪製矩形” 方式來表現所有的QBColor顏色說明 1. 以For迴圈及Line方法來產生 16個矩形；同時以For的 For Line 計次變數做為QBColor()的參數，產生 16種顏色的RGB 計次變數 () 值 2. 將繪製矩形的動作放在Form_Paint事件程序中，因此 Form_Paint 表單無論如何放大或縮小，都能維持填滿十六種顏色矩形的狀態

畫矩形實作(2) • 步驟 1. 根據下表修改表單屬性 Name Caption Form 1 frm. Rectangle 繪製矩形 2. 在表單的Paint及Resize事件程序中填入下列程式碼 01. 02. 03. 04. 05. 06. 07. 08. 09. 10. Private Sub Form_Paint() Dim i As Integer, s. Width As Integer s. Width = Scale. Width 16 For i = 0 To 15 Line (i * s. Width, 0)-Step(s. Width, Scale. Height), QBColor(i), BF Next End Sub Private Sub Form_Resize() Refresh End Sub

畫圓(1) 物件. Circle (x, y), radius, color s (x, y) s radius s color 必要參數，代表圓心座標必要參數，代表半徑選擇性參數，圓外框顏色。如果不加這個參數，則以物件的Fore. Color屬性欄中的設定值為準 s 預設的繪圖單位是以Twip為單位 s 例如在空白的表單上畫一個圓心(1000, 1000)，半徑 500 的紅色圓： Private Sub Form_Activate() Circle (1000, 1000), 500, vb. Red End Sub

畫圓(2) s 用Circle方法畫出來的圖形，如果要填滿這個封閉區間，要靠物件上的Fill. Style及Fill. Color的設定 Fill. Style Fill. Color 常數設定值描述 Vb. FSSolid 0 實心 Vb. FSTransparent 1 (預設) 透明 Vb. Horizontal. Line 2 水平線 Vb. Vertical. Line 3 垂直線 Vb. Upward. Diagonal 4 左上到右下的斜線 Vb. Downward. Diagonal 5 右下到右上的斜線 Vb. Cross 6 垂直交叉線 Vb. Diagonal. Cross 7 對角交叉線 s 例如在紅色圓中填入黑色(預設的Fill. Color為黑色)交叉線 Private Sub Form_Activate() Fill. Style = vb. Cross Circle (1000, 1000), 500, vb. Red End Sub

畫扇形(1) 物件. Circle (x, y), radius, color, begin, end begin • begin 選擇性參數 s 代表扇形的啟始角度，以弳度量為其單位 s 如果省略這個參數，則代表從 0度的地方開始畫起 • end 選擇性參數 s 代表扇形的終止角度，以弳度量為其單位 s 如果省略這個參數，代表一直畫到 360度(2π)的地方 • 參數begin及end為 s 正值時，所畫出來的會只是一段圓弧(非封閉區間) s 負值時，circle所畫出來的才會是扇形角度量換算為弳度量的公式弳度量=角度×π÷ 180 π的近似值 3. 1415926

畫扇形(2) • 例如： s 用Circle方法畫出一個45度至 315度的圓弧及扇形 Private Sub Form_Activate() Const PI = 3. 1415926 Dim Begin. Angle As Single, End. Angle As Single Begin. Angle = 35 * PI / 180 End. Angle = 315 * PI / 180 Circle (1000, 1000), 500, vb. Black, Begin. Angle, End. Angle Circle (2000, 1000), 500, vb. Black, -Begin. Angle, -End. Angle End Sub

畫橢圓(1) 物件. Circle (x, y), radius, color, begin, end, aspect • Aspect s 選擇性參數 s 代表圓的縱橫比。預設值為 1. 0，表示產生一正圓縱橫比 s 繪製橢圓時，所謂的半徑(radius)指的是由中心點算起至圓周最長的距離 • 縱橫比縱向長度 s 大於 1時，橢圓會是「直立」的 s 小於 1時，橢圓會是「橫放」的橫向長度

畫橢圓(2) • 例如：產生一個「直立」及「橫放」的橢圓，並且在內部分別填入藍色及黃色兩種顏色 Private Sub Form_Activate() Fill. Style = 0 Fill. Color = vb. Blue Circle (1000, 1000), 500, vb. Black, , , 2 Fill. Color = vb. Yellow Circle (2000, 1000), 500, vb. Black, , , 0. 5 End Sub

第九章--結束

計算機程式 廖文淵 Department of Computer Science and Engineering

計算機程式廖文淵 Department of Computer Science and Engineering