410 likes | 587 Views
計算機程式. 廖文淵 Department of Computer Science and Engineering De-Lin Institute of Technology andres@dlit.edu.tw. 第九章. 繪圖. 設定顏色. 所謂的繪圖,就是在背景色上以前景色畫點、畫線、或其他的幾何圖形 在開始學繪圖之前,得先知到如何設定顏色. 號碼. 代表顏色. 號碼. 代表顏色. 0. 黑色. 8. 深灰色. 1. 深藍色. 9. 藍色. 2. 深綠色. 10. 綠色. 3. 深青色. 11. 青色. 4. 暗紅色.
E N D
計算機程式 廖文淵 Department of Computer Science and Engineering De-Lin Institute of Technology andres@dlit.edu.tw
第九章 繪圖
設定顏色 • 所謂的繪圖,就是在背景色上以前景色畫點、畫線、或其他的幾何圖形 • 在開始學繪圖之前,得先知到如何設定顏色
號碼 代表顏色 號碼 代表顏色 0 黑色 8 深灰色 1 深藍色 9 藍色 2 深綠色 10 綠色 3 深青色 11 青色 4 暗紅色 12 紅色 5 深紫色 13 紫色 6 黃棕色 14 黃色 7 灰色 15 白色 QBColor函數 • QBColor函數是為了要繼承以往DOS底下的Quick Basic所設的 lVar = QBColor(號碼) 例如:ForeColor = QBColor(14) • IVar就是相對應的RGB值
QBColor函數範例(1) • 範例(EX9-1) • 這個範例最主要的目的是列出所有QBColor函數所提供的顏色,並觀察每一顏色相對應的RGB十六進位值 • 說明 • 程式開始執行,表單上會列出所有QBColor的顏色,以及其對應的RGB值
Form1 Name frmDigitalClock AutoRedraw True BorderStyle 1 Caption QBColor ForeColor 0 QBColor函數範例(2) • 步驟 • 這個程式不需要放置任何控制項 • 依照下表修改表單的屬性欄 • 在表單的Form_Activate事件程序中填入下列程式碼 01.Private Sub Form_Activate() 02.For i = 0 To 15 03.Print Format(i, "00 "); 04.ForeColor = QBColor(i) 05.Print "█████████"; 06.ForeColor = 0 07.Print Hex(QBColor(i)) 08.Next 09. End Sub
RGB函數 • 可以產生任何色彩 • 讓設計師可以更方便的利用紅、綠、藍三原色混和出顏色,不須熟悉位元運算 • RGB函數的格式 lVar = RGB(R,G,B) • R、G、B分別代表R、G、B(紅、綠、藍) 的數值 • 範圍為 0 到 255,0 表示該顏色的成分最低,255 表示成分最高 • 例如產生純紅色RGB值 lVar = RGB(255, 0, 0) • 例如將表單被景色改呈藍色 BackColor = RGB(0, 0, 255)
顏色 顏色 藍色值(B) 常數 綠色值(G) 值 紅色值(R) 十六進位值 黑色 vbBlack &H0& 黑色 0 0 0 &H0& 藍色 vbBlue &HFF0000 藍色 255 0 0 &HFF0000 綠色 vbGreen &HFF00& 綠色 0 255 0 &HFF00& 紅色 vbRed &HFF& 紅色 0 0 255 &HFF& 青色 vbCyan &HFFFF00 青色 255 255 0 &HFFFF00 紫色 vbMagenta &HFF00FF 紫色 255 0 255 &HFF00FF 黃色 vbYellow &HFFFF& 黃色 0 255 255 &HFFFF& 白色 vbWhite &HFFFFFF 白色 255 255 255 &HFFFFFF 灰色 192 192 192 &HC0C0C0 深灰 80 80 80 &H808080 直接填入值(1) • 指定十六進位RGB值 • RGB十六進位值的表現方式 ForeColor = &H00BBGGRR 最高位元組 常數
直接填入值(2) • 指定系統顏色 • 用Long(長整數)設定顏色 • 長整數型別資料佔用4個位元組(Byte) • RGB三原色分別佔用一個位元組 • 最高位元組的最高位元:為1時,代表其後3個位元組是系統顏色編號為0時,其後3個位元組是RGB值 • 系統顏色:Windows環境中所提供的顏色 • 透過”控制台/顯示器”中的”外觀”頁來設定這些顏色
常數 值 說明 VbScrollBars &H80000000 捲軸顏色 VbDesktop &H80000001 桌面顏色 vbActiveTitleBar &H80000002 使用中視窗標題列顏色 vbInactiveTitleBar &H80000003 非使用中視窗標題列顏色 VbMenuBar &H80000004 功能表背景顏色 vbWindowBackground &H80000005 視窗背景顏色 vbWindowFrame &H80000006 視窗框線顏色 vbMenuText &H80000007 功能表上文字的顏色 vbWindowText &H80000008 視窗內文字的顏色 vbTitleBarText &H80000009 標題、大小方塊和捲動箭號內文字的顏色 vbActiveBorder &H8000000A 使用中視窗框線的顏色 vbInactiveBorder &H8000000B 非使用中視窗框線的顏色 vbApplicationWorkspace &H8000000C 多文件介面 (MDI) 應用程式的背景顏色 VbHighlight &H8000000D 控制項內選項的背景顏色 vbHighlightText &H8000000E 控制項內選項的文字顏色 vbButtonFace &H8000000F 命令鈕正面的顏色 vbButtonShadow &H80000010 命令鈕邊緣的顏色 vbGrayText &H80000011 變灰的 (失效的) 文字 vbButtonText &H80000012 壓下的按鈕上面文字的顏色 vbInactiveCaptionText &H80000013 非使用中標題內文字的顏色 vb3DHighlight &H80000014 立體顯示元件的反白顏色 vb3DDKShadow &H80000015 立體顯示元件的陰影顏色 vb3DLight &H80000016 低於 vb3Dhighlight 的 立體次亮顏色 vb3DFace &H8000000F 文字表面的顏色 vb3DShadow &H80000010 文字陰影的顏色 vbInfoText &H80000017 工具提示文字的顏色 vbInfoBackground &H80000018 工具提示背景的顏色 直接填入值(3) • Visual Basic中預先定義的系統顏色常數
通用對話方塊的種類 • Open(開啟舊檔) • SaveAs(另存新檔) • Color(色彩) • Font(字型) • Printer(列印) • WinHelp(Windows線上說明)
引用通用對話方塊控制項 • 執行功能表的”專案(P)/ 設定使用元件(O)...”項目 • 在”設定使用元件對話方塊”的”控制項”頁上找到”Microsoft Common Dialog control 6.0”項目 • 在項目前打勾 • 按下[套用(A)]按鈕 • 再按下[確定]按鈕 1)選擇”Microsoft Common Dialog Control ”項目 在工具箱中的Common Dialog控制項 3)按下[確定]按鈕 2)按下[套用(A)]按鈕
放置通用對話方塊控制項 • 用Double-Click或拖放的方式 • 通用對話方塊控制項執行時不會出現在表單上 • 通用對話方塊控制項必須等待程式呼叫其方法,然後產生出所需的對話方塊
對話方塊 第一種:使用Method 第二種:修改屬性 不顯示任何對話方塊 Action = 0 Open(開啟舊檔) Object.ShowOpen Action = 1 SaveAs(另存新檔) Object.ShowSave Action = 2 Color(色彩) Object.ShowColor Action = 3 Font(字型) Object.ShowFont Action = 4 Printer(列印) Object.ShowPrinter Action = 5 WinHelp(線上說明) Object.ShowHelp Action = 6 產生各種對話方塊 • 兩種方法 • 用Common Dialog的方法(Method)來啟動對話方塊 • 修改Common Dialog的Action屬性值 CommonDialog1.ShowOpen CommonDialog1.Action = 1
呼叫色彩對話方塊 • CommonDialog1.ShowColor 用滑鼠按下[定義自訂色彩(D)>>]按鈕
取得所設定的顏色 • 讀取對話方塊的Color屬性值 • 傳回值是一個RGB顏色值 • 這個值可以指定給像ForeColor、BackColor之類的屬性欄 • 例如 BackColor = CommonDialog1.Color
色彩通用對話方塊實作(1) • 範例(EX9-2) • 按下[選擇背景色(B)]按鈕之後,螢幕上會出現一個色彩通用對話方塊 • 選定顏色後後,按下通用對話方塊上的[確定]鈕,表單的背景顏色會變更為所選定的顏色 • 如果按下[取消]按鈕,則表單的背景色維持不變 • 說明 • 執行時,表單上只有一個命令鈕
色彩通用對話方塊實作(2) • 按下[選擇背景色(B)]按鈕,螢幕上就會出現一個色彩通用對話方塊
色彩通用對話方塊實作(3) • 選擇顏色後,按下[確定],表單的背景顏色就會變成剛剛所選擇的顏色 • 步驟 • 引用一個通用對話方塊控制項,然後在表單上放置一個通用對話方塊物件 • 在表單上放置一個命令鈕
Form1 Command1 CommonDialog1 Name frmDlgDemo cmdChooseColor dlgSetColor BorderStyle 1 CancelError True Caption 色彩通用對話方塊範例 選擇背景色(&B) 色彩通用對話方塊實作(4) • 依照下表修改各物件屬性欄 • 通用對話方塊屬性欄CancelError • 預設值是False • 改成True時:使用者在通用對話方塊上按下[取消]時,將產生一個錯誤 • 在cmdChooseColor的Click事件程序上填入程式碼 01.Private Sub cmdChooseColor_Click() 02.On Error GoTo Error_Handler 03.dlgSetColor.ShowColor 04.BackColor = dlgSetColor.Color 05. Error_Handler: 06.Exit Sub 07. End Sub
畫點(1) • 將物件上一點設定為所指定的色彩 • 常見的物件有Form、Printer、及 PictureBox • PSet方法 物件.PSet [Step] (x, y), [color] • Step • 選擇性參數 • 畫點的位置,是由目前CurrentX及CurrentY 為原點,再加上後面(X,Y)參數的位移 • (x, y) • 必要參數 • 要畫出點的水平(x軸)與垂直(y軸)座標 • Color • 選擇性參數 • 畫出點的顏色;如果不指定這個值,則使用ForeColor的屬性值
畫點(2) • PSet方法所畫點的大小由DrawWidth屬性欄的值來決定 • DrawWidth為 1時,使用PSet方法會畫出單點 • DrawWidth值越大,畫出來的點越粗 • 每次以PSet(x, y)畫出一點後,CurrentX及CurrentY的值就會被重新設定為x及y
PSet實作(1) • 範例(EX9-3) • 利用表單的MouseMove事件程序來製作一個繪圖程式 • 說明 • 程式開始執行時,螢幕上會出現一個完全空白的表單 • 按住滑鼠左鍵不放、在空白的表單上移動時,滑鼠所經過的區域會畫上藍色的點;按住滑鼠右鍵則會畫上紅色的點;按住滑鼠中鍵,則會以背景色畫點,製造類似橡皮擦的效果
PSet實作(2) • 這是以畫點為基礎的繪圖程式 • 滑鼠經過表單引發MouseMove事件程序 • 將傳入的滑鼠X、Y座標,以PSet在表單上畫點 • 在MouseMove事件程序中 • 針對Button參數,以vbLeftButton、vbRightButton、vbMiddleButton等常數與Select Case配合,創造出畫藍色點、畫紅色點、橡皮擦等效果 • 以常數vbBlue、vbRed等來代表顏色值,提高程式的可讀性
Form1 Name frmDraw AutoRedraw True BackColor &H00FFFFFF& Caption 描點繪圖 DrawWidth 4 PSet實作(3) • 步驟 • 根據下表修改表單屬性 • 在表單的MouseMove事件程序中填入下列程式碼 01.Private Sub Form_MouseMove(ButtonAs Integer, Shift As Integer, _ X As Single, Y As Single) 02. Select Case Button 03.Case Is = vbLeftButton 04.PSet (X, Y), vbBlue 05.Case Is = vbRightButton 06.PSet (X, Y), vbRed 07.Case Is = vbMiddleButton 08.PSet (X, Y), BackColor 09.End Select 10. End Sub
Line方法(畫線)(1) 物件.Line [Step] (x1, y1) [Step] - (x2, y2), [color] • Step:選擇性參數 • 表示使用相對座標。畫線的起使位置(x1, y1),是由目前CurrentX及CurrentY 為原點的相對座標 • (x1, y1):選擇性參數 • 畫線的起始點的座標。預設為CurrentX及CurrentY • Step:選擇性參數 • 表示使用相對座標。畫線的終點位置(x2, y2),是相對於線的起始點的相對位移 • (x2, y2):必要參數 • 標明所畫線段的終點座標 • Color:選擇性參數 • 指定所畫線段顏色;如果不設定,則表示以物件的ForeColor(前景色)來畫線
Line方法(畫線)(2) • 由(CurrentX, CurrentY)到(x2, Y2)的直線Line –(x2, y2) • 由(x1, y1)到(x2, y2)的線段Line (x1, y1)-(x2, y2) • 由(x1, y1)至(x2, y2)的黃色線段Line(x1, y1)-(x2, y2), vbYellow • 每次執行完Line方法後,CurrentX及CurrentY的值就會被重新設定為(x2, y2) • 線段的粗細是由物件的DrawWidth來控制 • 在DrawWidth=1的情形下,線條樣式由DrawStyle控制 • 五種線條樣式,分別由DrawStyle=0~4代表
Line方法(畫線)(3) • DrawStyle(線條樣式)範例 • 在空白表單的Form_Activate事件程序中填入下列程式碼 • 注意DrawStyle必須在DrawWidth=1的狀態下才會有作用 Private Sub Form_Activate() Dim i As Integer For i = 0 To 4 DrawStyle = i Line (100, (i + 1) * 500)-(2500, (i + 1) * 500), vbBlack Next End Sub DrawStyle = 0 DrawStyle = 1 DrawStyle = 2 DrawStyle = 3 DrawStyle = 4
畫線實作(1) • 範例(EX9-4) • 範例EX9-3有個缺點,就是當我們移動滑鼠過快,那麼線條便會產生不連續的狀況 • 我們可以利用Line方法來加以改良,讓點與點之間以線條來聯繫,如此即可形成不間斷的連續線
畫線實作(2) • 說明 • 用Line方法代替PSet方法,讓點與點之間以線條連接 • 按下滑鼠按鈕表示開始畫圖,因此在MouseDown中將座標設定給CurrentX及CurrentY作為畫線的起點 • 表單物件上已經有CurrentX、CurrentY兩個屬性欄紀錄Line方法的起點位置,因此在MouseMove中偵測按下的滑鼠按鈕,然後以Line方法加上(X2,Y2)座標即可畫出連續線
Form1 Name frmDrawLine AutoRedraw True BackColor &H00FFFFFF& Caption 描點繪圖 DrawWidth 4 畫線實作(3) • 步驟 • 根據下表修改表單屬性 • 在MouseDown及MouseMove事件程序中填入程式碼 01.Private Sub Form_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single) 02. CurrentX = X 03.CurrentY = Y 04. End Sub 05. Private Sub Form_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single) 06.Select Case Button 07.Case Is = vbLeftButton 08.Line -(X, Y), vbBlue 09.Case Is = vbRightButton 10.Line -(X, Y), vbRed 11.Case Is = vbMiddleButton 12. Line -(X, Y), BackColor 13.End Select 14. End Sub
Line方法(畫矩形) 物件.Line [Step] (x1, y1) [Step] - (x2, y2), [color], B 物件.Line [Step] (x1, y1) [Step] - (x2, y2), [color], BF • Step:選擇性參數 • 採用相對座標,以CurrentX及CurrentY為原點座標 • (x1, y1):選擇性參數 • 矩形的起始點。省略的話,由CurrentX及CurrentY來代替 • Step:選擇性參數 • (x2,y2)採用起始點(X1,Y1)為原點的相對座標 • (x2, y2):必要參數 • (x2, y2)相當於右下角座標 • Color:選擇性參數 • 矩形外框的 RGB 色彩。如省略,則為物件的ForeColor • B:繪製矩形的必要參數(B或BF任選其一) • 矩形內部受物件的 FillColor 及 FillStyle兩個屬性影響。 FillStyle 的預設值1(透明),在不更動FillStyle預設值的情形下,只加B參數所繪製出來的矩形將只有外框 • BF:表示要以Color參數(外框顏色)來填充矩形內部
畫矩形實作(1) • 範例(EX9-5) • 用”繪製矩形” 方式來表現所有的QBColor顏色 • 說明 • 以For迴圈及Line方法來產生16個矩形;同時以For的計次變數做為QBColor()的參數,產生16種顏色的RGB值 • 將繪製矩形的動作放在Form_Paint事件程序中,因此表單無論如何放大或縮小,都能維持填滿十六種顏色矩形的狀態
Form1 Name frmRectangle Caption 繪製矩形 畫矩形實作(2) • 步驟 • 根據下表修改表單屬性 • 在表單的Paint及Resize事件程序中填入下列程式碼 01.Private Sub Form_Paint() 02. Dim i As Integer, sWidth As Integer 03.sWidth = ScaleWidth \ 16 04.For i = 0 To 15 05.Line (i * sWidth, 0)-Step(sWidth, ScaleHeight), QBColor(i), BF 06.Next 07. End Sub 08. Private Sub Form_Resize() 09. Refresh 10. End Sub
畫圓(1) 物件.Circle (x, y), radius, color • (x, y)必要參數,代表圓心座標 • radius必要參數,代表半徑 • color選擇性參數,圓外框顏色。如果不加這個參 數,則以物件的ForeColor屬性欄中的設定值 為準 • 預設的繪圖單位是以Twip為單位 • 例如在空白的表單上畫一個圓心(1000, 1000),半徑500的紅色圓: Private Sub Form_Activate() Circle (1000, 1000), 500, vbRed End Sub
常數 設定值 描述 VbFSSolid 0 實心 VbFSTransparent 1 (預設) 透明 VbHorizontalLine 2 水平線 VbVerticalLine 3 垂直線 VbUpwardDiagonal 4 左上到右下的斜線 VbDownwardDiagonal 5 右下到右上的斜線 VbCross 6 垂直交叉線 VbDiagonalCross 7 對角交叉線 畫圓(2) • 用Circle方法畫出來的圖形,如果要填滿這個封閉區間,要靠物件上的FillStyle及FillColor的設定 • 例如在紅色圓中填入黑色(預設的FillColor為黑色)交叉線 Private Sub Form_Activate() FillStyle = vbCross Circle (1000, 1000), 500, vbRed End Sub
畫扇形(1) 物件.Circle (x, y), radius, color, begin, end • begin選擇性參數 • 代表扇形的啟始角度,以弳度量為其單位 • 如果省略這個參數,則代表從0度的地方開始畫起 • end選擇性參數 • 代表扇形的終止角度,以弳度量為其單位 • 如果省略這個參數,代表一直畫到360度(2π)的地方 • 參數begin及end為 • 正值時,所畫出來的會只是一段圓弧(非封閉區間) • 負值時,circle所畫出來的才會是扇形 • 角度量換算為弳度量的公式 弳度量=角度×π÷180 π的近似值3.1415926
畫扇形(2) • 例如: • 用Circle方法畫出一個45度至315度的圓弧及扇形 Private Sub Form_Activate() Const PI = 3.1415926 Dim BeginAngle As Single, EndAngle As Single BeginAngle = 35 * PI / 180 EndAngle = 315 * PI / 180 Circle (1000, 1000), 500, vbBlack, BeginAngle, EndAngle Circle (2000, 1000), 500, vbBlack, -BeginAngle, -EndAngle End Sub
畫橢圓(1) 物件.Circle (x, y), radius, color, begin, end, aspect • Aspect • 選擇性參數 • 代表圓的縱橫比。預設值為 1.0,表示產生一正圓 • 繪製橢圓時,所謂的半徑(radius)指的是由中心點算起至圓周最長的距離 • 縱橫比 • 大於1時,橢圓會是「直立」的 • 小於1時,橢圓會是「橫放」的 縱向長度 橫向長度
畫橢圓(2) • 例如:產生一個「直立」及「橫放」的橢圓,並且在內部分別填入藍色及黃色兩種顏色 Private Sub Form_Activate() FillStyle = 0 FillColor = vbBlue Circle (1000, 1000), 500, vbBlack, , , 2 FillColor = vbYellow Circle (2000, 1000), 500, vbBlack, , , 0.5 End Sub