VisualBasic程序設(shè)計(jì)項(xiàng)目化教程 項(xiàng)目9 制作調(diào)色板.ppt

1、Visual Basic 程序設(shè)計(jì)項(xiàng)目化教程,主編 管小清 郭賀彬,項(xiàng)目九 制作調(diào)色板,項(xiàng)目目標(biāo)： 本項(xiàng)目設(shè)計(jì)并實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的調(diào)色板，利用RGB三元色的原理來(lái)設(shè)置三種基色的值，來(lái)調(diào)出各種顏色；每種顏色利用滾動(dòng)條來(lái)控制值的變化（滾動(dòng)條的值的變化范圍為0255）；除此之外還可以利用公共對(duì)話框中提供的顏色設(shè)置功能來(lái)設(shè)置所需要的顏色。主要用來(lái)學(xué)習(xí)VB的圖片控件的使用，滾動(dòng)條的使用和RGB（）函數(shù)的使用等。,項(xiàng)目九 制作調(diào)色板,項(xiàng)目主要知識(shí)點(diǎn)： 1、圖片控件的使用 Picture控件的使用 Image控件的使用 2、滾動(dòng)條的使用 基本屬性 特有屬性 常用事件 3、RGB（）函數(shù)的使用 4、Val（）函

2、數(shù)的使用 5、公共對(duì)話框的使用 6、控件的BackColor屬性 7、程序設(shè)計(jì)思想的訓(xùn)練,項(xiàng)目九 制作調(diào)色板,項(xiàng)目實(shí)施步驟： 掌握相關(guān)基礎(chǔ)知識(shí) 界面設(shè)計(jì) 窗體設(shè)計(jì) 控件屬性設(shè)置 程序設(shè)計(jì) 編程初步 程序代碼 程序調(diào)試，功能完善 保存項(xiàng)目工程,9.1 第1步 基礎(chǔ)知識(shí),9.1.1 Picture控件的使用 圖片框(PictureBox)控件的主要作用是為用戶顯示圖片，也可作為其他控件的容器。實(shí)際顯示的圖片是由Picture屬性決定的。 1、圖片框的基本屬性： Name、Height、Width、Top、Left、Enabled、Visible等。 2、圖片框的特有屬性： （1）Picture屬性

3、 Picture屬性用于窗體、圖片框和圖像框。它可通過(guò)屬性窗口進(jìn)行設(shè)置，也可在程序中進(jìn)行設(shè)置，即使用LoadPicture()函數(shù)，裝入圖片文件。在窗體、圖片框和圖像框中顯示的圖形以文件形式存放在磁盤上，VB6.0支持以下格式的圖形文件。 位圖文件(Bitmap) 圖標(biāo)文件(Icon) 圖元文件(Metafile) 壓縮位圖文件(JPEG) 壓縮位圖文件(GIF),9.1 第1步 基礎(chǔ)知識(shí),（2）AutoSize屬性 圖片框控件不能伸縮圖像使圖像適應(yīng)它的大小。如果把圖片框控件的AutoSize屬性設(shè)置為True，那么圖片框控件就會(huì)自動(dòng)調(diào)整自身的大小以容納整個(gè)圖像。 3、圖片框控件的特點(diǎn) 圖片框

4、控件的最大特點(diǎn)是，它的表現(xiàn)更像一個(gè)窗體對(duì)象，它具有許多與窗體對(duì)象相似的屬性和方法。窗體的所有顯示文本和圖像的方法、作圖方法以及與之相關(guān)的屬性在圖片框控件中都有同名的方法和屬性。圖片框控件有自己的坐標(biāo)系統(tǒng)，也可以重新定義坐標(biāo)系統(tǒng)。 PictureBox控件也可作為容器使用，把控件添加到圖片框控件中的方法與把控件添加到框架控件中的方法也相同。,9.1 第1步 基礎(chǔ)知識(shí),4、圖形文件的裝入 圖形文件的裝入有兩種方法：一種是在設(shè)計(jì)階段裝入，另一種是在運(yùn)行期間裝入。 （1）在設(shè)計(jì)階段裝入圖形文件 在設(shè)計(jì)階段裝入圖形文件用兩種方法： 用屬性窗口中的Picture屬性裝入 可以通過(guò)Picture屬性，把圖形

5、文件裝入窗體、圖片框或圖像為例，操作步驟如下： 在窗體上建立一個(gè)圖片框。 保持圖片框?yàn)榛顒?dòng)的控件，在屬性窗口中找到Picture屬性，單擊該屬性條，其右端出現(xiàn)3個(gè)點(diǎn)“”按鈕。 單擊右端出現(xiàn)3個(gè)點(diǎn)“”按鈕，屏幕顯示“加載圖片”對(duì)話框。 單擊“文件類型”欄右端的箭頭，將下拉顯示可以裝入的圖形文件類型，可從中選擇所需要的文件類型。 在中間的“搜尋”目錄列表框中，選擇含有圖形文件的目錄，可以根據(jù)需要選擇某個(gè)目錄，單擊“打開(kāi)”按鈕，然后在該目錄中，選擇所要裝入的文件。 單擊“打開(kāi)”按鈕 以上的操作步驟也適合圖像框。如果窗體上沒(méi)有活動(dòng)的圖片框，窗體為活動(dòng)時(shí)，裝入的圖形文件將裝到窗體上。,9.1 第1步 基

6、礎(chǔ)知識(shí),利用剪切板裝入 用Windows下的繪圖軟件，處理所需的圖形，并將該圖形拷貝到剪貼板中。 啟動(dòng)VB，在窗體上建立一個(gè)圖形框，并保持為活動(dòng)狀態(tài)。 執(zhí)行“編輯”菜單中的“粘貼”命令，剪貼板中的圖形將出現(xiàn)在圖形框中。 在建立圖片框時(shí)，應(yīng)適當(dāng)調(diào)整其大小，以便能裝入完整的圖形。 （2）在運(yùn)行期間裝入圖形文件 Picture屬性可以設(shè)置被顯示的圖片文件名(包括可選路徑名)。在程序運(yùn)行時(shí)，可以使用LoadPicture()函數(shù)，在圖片框中裝入圖形。 格式：對(duì)象.Picture=LoadPicture(圖形文件名) 功能：在圖形框中裝入一個(gè)圖形。,9.1 第1步 基礎(chǔ)知識(shí),說(shuō)明： 對(duì)象可以是圖片框或圖

7、像框，也可以是窗體，如果是窗體，對(duì)象名可以省略。 如果刪除一個(gè)圖形，可以使用LoadPicture()函數(shù)，將一個(gè)空白圖形裝入圖形框的Picture屬性。 格式：對(duì)象.Picture=LoadPicture() 如果圖片框中已有圖形，則被新裝入的圖形所覆蓋。 裝入圖片框中的圖形，可以拷貝到另一個(gè)圖片框中。假設(shè)在窗體中已建立了兩個(gè)圖片框：Picture1與Picture2，則用： Picture1.Picture=LoadPicture(C：GraphicsIconsArrowsarw06up.ico) Picture2.Picture=Picture1.Picture 可以把圖片框Pictur

8、e1中的圖形拷貝到圖片框Picture2中 圖像框可以響應(yīng)Click和DblClick事件。 常用方法 在圖片框中使用Cls方法和Print方法。,9.1 第1步 基礎(chǔ)知識(shí),9.1.2 圖像框 圖像框（image）控件是一個(gè)簡(jiǎn)單易用的、顯示圖像文件的控件。圖像控件使用的系統(tǒng)資源較少而且顯示速度較快，它可以自動(dòng)調(diào)整自己的大小以適應(yīng)圖像大小，或者伸縮圖像的大小使圖像適合圖像控件的大小。 常用屬性：Name、Height、Width、Top、Left、Enabled、Visible等。 圖像框控件有兩個(gè)主要的屬性：Picture屬性和Stretch屬性。 Picture屬性 該屬性的功能與圖片框的相

9、同。 Stretch屬性 該屬性用來(lái)自動(dòng)調(diào)整圖像框中圖形內(nèi)容的大小，既可通過(guò)屬性窗口設(shè)置，也可以通過(guò)程序代碼設(shè)置。該屬性值為True或False。 其屬性值為False時(shí)，圖像框可以自動(dòng)改變大小以適應(yīng)其中的圖形。 其屬性值為True時(shí)，加載到圖像框中的圖形，可以自動(dòng)調(diào)整尺寸以適應(yīng)圖像框的大小。 在這種情況下，圖像控件的寬高之比與圖像的寬高之比不相同時(shí)，會(huì)明顯造成圖像的變形。說(shuō)明： 圖像框控件沒(méi)有AutoSize屬性。 在圖像框控件裝入圖片文件的方法和使用圖片的文件格式與圖片框相同。,9.1 第1步 基礎(chǔ)知識(shí),3、常用事件 圖像框可以響應(yīng)Click和DblClick事件。 4、圖片框與圖像框的區(qū)

10、別 （1）圖片框是“容器”控件，可以作為父控件，而圖像框不能作為父控件。也就是說(shuō)，在圖片框中，可以包含其他控件，作為它的“子控件”，如果移動(dòng)圖片框，則框中的控件也隨著一起移動(dòng)，并且與圖片框的相對(duì)位置保持不變，其TOP和LEFT屬性是相對(duì)圖片框而言，而與窗體無(wú)關(guān)；當(dāng)圖片框的大小改變時(shí)，這些子控件的圖片框中的相對(duì)位置保持不變，圖片框內(nèi)的子控件也不能移到圖片框外。 （2）圖片框可以通過(guò)print方法接收文本，并可接收由像素組成的圖形，而圖像框不能接收用print方法輸入的信息，也不能用繪圖方法在圖像框上繪制圖形。每個(gè)圖片框都有一個(gè)內(nèi)部坐標(biāo)，用來(lái)指示下一個(gè)被繪制的點(diǎn)的位置，這個(gè)位置就是當(dāng)前光標(biāo)的坐標(biāo)。

11、,9.1 第1步 基礎(chǔ)知識(shí),（3）圖像框比圖片框占用內(nèi)存少，顯示速度快。如果在圖像框和圖片框都能滿足需要的情況下，應(yīng)先考慮使用圖像框。 5、保存圖形 對(duì)繪制或裝在窗體、圖片框和圖像框內(nèi)的圖形，可以使用SavePicture命令把圖形保存到磁盤文件內(nèi)。 格式：SavePicture 對(duì)象.屬性，文件名 功能：保存繪制或裝在窗體、圖片框和圖像框內(nèi)的圖形。,9.1 第1步 基礎(chǔ)知識(shí),9.1.3 滾動(dòng)條 滾動(dòng)條（Scrollbar）通常用來(lái)附在窗體上，協(xié)助觀察數(shù)據(jù)或確定位置，也可以用來(lái)作為數(shù)據(jù)輸入的工具。滾動(dòng)條有水平和垂直兩種，其默認(rèn)名稱分別為HScrollX 和VScrollX（X為1,2,3,）。

12、可以通過(guò)工具箱中的水平滾動(dòng)條和垂直滾動(dòng)條工具來(lái)建立。 滾動(dòng)條的最大值與最小值。在使用滾動(dòng)條前要先設(shè)置它的Min屬性和Max屬性，為滾動(dòng)條指定最小和最大取值范圍。 水平滾動(dòng)條的滑塊在最左端為最小值Min，由左往右移動(dòng)時(shí)，其值隨之遞增，在最右端為最大值Max。 垂直滾動(dòng)條的滑塊在最上端為最小值Min，由上向下移動(dòng)時(shí)，其值隨之遞增，到最下端為最大值Max。,9.1 第1步 基礎(chǔ)知識(shí),1、滾動(dòng)條的基本屬性： Name、Height、Width、Top、Left、Enabled、Visible等。 2、滾動(dòng)條特有屬性： (1)Max屬性 最大值屬性表示當(dāng)滑塊處于滾動(dòng)條最大位置時(shí)所代表的值，取值范圍可在-

13、3276832767之間。在把滾動(dòng)條添加到窗體之初，這個(gè)屬性的值是32767。 (2)Min屬性 最小值屬性表示當(dāng)滑塊處于滾動(dòng)條最小位置時(shí)所代表的值，取值范圍可在-3276832767之間。在把滾動(dòng)條添加窗體之初，這個(gè)屬性的值是0。 (3)SmallChange屬性 該屬性表示當(dāng)用戶單擊滾動(dòng)條兩端箭頭時(shí)，滑塊移動(dòng)的增量值。 (4)LargeChange屬性 該屬性表示當(dāng)用戶單擊滾動(dòng)條的空白處時(shí)，滑塊移動(dòng)的增量值。,9.1 第1步 基礎(chǔ)知識(shí),(5)Value屬性 該屬性表示滾動(dòng)條內(nèi)滑塊所處位置所代表的值。 Value屬性的值總是在滾動(dòng)條設(shè)置的Min和Max屬性值之間。 當(dāng)滑塊在最左端或最上端時(shí)，

14、Value屬性的值就是Min； 當(dāng)滑塊在滾動(dòng)條的右端或下端時(shí)，Value屬性的值就是Max。 3、常用事件 滾動(dòng)條具有重要事件：Scroll事件與Change事件。當(dāng)拖動(dòng)滑塊時(shí)會(huì)觸發(fā)Scroll事件，而當(dāng)改變Value屬性(滾動(dòng)條內(nèi)滑塊位置改變)時(shí)，會(huì)觸發(fā)Change事件。 在程序中，通過(guò)響應(yīng)這兩個(gè)事件完成其他控件的滾動(dòng)工作。在事件過(guò)程中用滾動(dòng)條的Value屬性獲得滑塊在滾動(dòng)條中的位置，根據(jù)這個(gè)位置決定其他控件中顯示的內(nèi)容應(yīng)該滾動(dòng)到什么位置。 9.1.4 Val（）函數(shù)的使用 格式：Val(字符串) 功能：將字符串的數(shù)字轉(zhuǎn)換成數(shù)值,9.2 第2步：界面設(shè)計(jì),在窗體上分別添加如下控件： Pict

15、ure 控件（1） 水平滾動(dòng)條（3）注：也可用垂直滾動(dòng)條 CommonDialog （1） 文本框（TextBox）（3） 標(biāo)簽Label（9） 命令按鈕CommandButton（1） 框架Frame（2） 注：CommonDialog的添加方法參見(jiàn)項(xiàng)目一。 各控件在窗體上的設(shè)置如圖9-1所示,9.2 第2步：界面設(shè)計(jì),各控件的屬性如表9-1所示,圖9-1各控件在窗體上的設(shè)置,9.2 第2步：界面設(shè)計(jì),表9-1主要控件的屬性,9.3 第3步：改變Picture控件的背景顏色,編程用滾動(dòng)條實(shí)現(xiàn)改變Picture控件的背景顏色。 程序如下： Private Sub HScroll1_Change

16、() Picture1.BackColor=RGB(HScroll1.Value,HScroll2.Value,HScroll3.Value)（改變圖片框的背景顏色） Label4.Caption = Str(HScroll1.Value) （用標(biāo)簽動(dòng)態(tài)顯示滾動(dòng)條的值） Text1.Text = Str(HScroll1.Value) （把滾動(dòng)條的值同時(shí)賦給文本框） End Sub Private Sub HScroll1_Scroll() Picture1.BackColor = RGB(HScroll1.Value, HScroll2.Value, HScroll3.Value) Labe

17、l4.Caption = Str(HScroll1.Value) Text1.Text = Str(HScroll1.Value) End Sub 以上只是對(duì)滾動(dòng)條1的事件編程，對(duì)另外兩個(gè)滾動(dòng)條的編程參照上述程序，由學(xué)生在教師指導(dǎo)下獨(dú)立完成。,9.3 第4步：改變圖片框的背景色,通過(guò)文本框輸入值的方法來(lái)改變圖片框的背景色 程序如下： Private Sub Text1_KeyPress(KeyAscii As Integer) Picture1.BackColor = RGB(Val(Text1.Text), Val(Text2.Text), Val(Text3.Text) If KeyAsc

18、ii = 13 Then （判斷最后輸入的是否是回車鍵） HScroll1.Value = Val(Text1.Text) （用文本框來(lái)改變滾動(dòng)條的值） Label4.Caption = Val(Text1.Text) （把文本框的值變化用標(biāo)簽顯示） End If End Sub Private Sub Text2_KeyPress(KeyAscii As Integer) Picture1.BackColor = RGB(Val(Text1.Text), Val(Text2.Text), Val(Text3.Text) If KeyAscii = 13 Then HScroll2.Value

19、 = Val(Text2.Text) Label5.Caption = Val(Text2.Text) End If End Sub 以上是對(duì)Text1，Text2的程序設(shè)計(jì)，另外Text3的程序，請(qǐng)同學(xué)們參照上述程序完成。,9.3 第4步：改變圖片框的背景色,注意： 要實(shí)現(xiàn)上述功能必須在Text1的KeyPress事件下完成，而不是在Change事件或Click事件下完成。（可以實(shí)踐） 要取得文本框和標(biāo)簽里的數(shù)字值永使用VAL（）函數(shù)。 KeyPress與KeyDown、KeyUp和Change 等事件的區(qū)別（講解）,圖9-2 運(yùn)行結(jié)果圖,9.5 第5步：改變圖片框的背景色,9.5 第5步：

20、改變圖片框的背景色 使用通用對(duì)話框調(diào)用系統(tǒng)顏色框來(lái)改變圖片框的背景色 1、在工具箱中添加CommonDialog 2、在命令按鈕內(nèi)編寫下述程序 Private Sub Command1_Click() CommonDialog1.ShowColor Picture1.BackColor = CommonDialog1.Color End Sub,效果如圖9-3所示：,圖9-3調(diào)用系統(tǒng)顏色框改變圖片框背景色,9.5 第5步：改變圖片框的背景色,第6步：程序測(cè)試 程序測(cè)試，進(jìn)行數(shù)據(jù)合法性檢驗(yàn)，并進(jìn)行功能完善（如文本框中的輸入值在0255之間等由學(xué)生完成） 項(xiàng)目總結(jié)： 滾動(dòng)條的屬性和使用方法 通用對(duì)話框的使用方法 顏色函數(shù)的使用 程序的修改和完善 操作練習(xí)： 將水平滾動(dòng)條改為垂直滾動(dòng)條并編程 加入數(shù)據(jù)有效性驗(yàn)證判斷 用圖片框和標(biāo)簽框控件，設(shè)計(jì)1個(gè)圖片和字幕同時(shí)滾動(dòng)的程序。程序的執(zhí)行屏幕如圖9-4所示，程序的設(shè)計(jì)屏幕如圖9-5所示。,圖9-4程序的執(zhí)行屏幕,圖9-5程序的設(shè)計(jì)屏幕,9.5 第5步：改變圖片框的背景色,習(xí)題： 一、選擇題 1、為了使命令按鈕的Picture、DownPicture、DisabledPicture屬性生效，必須把它的Style的屬性設(shè)置為 。 A、0 B、2 C、True D