《《VB圖形圖像編程》PPT課件.ppt》由會員分享，可在線閱讀，更多相關(guān)《《VB圖形圖像編程》PPT課件.ppt（34頁珍藏版）》請在裝配圖網(wǎng)上搜索。

第5章圖形圖像編程 本章學(xué)習(xí)目標 了解 NET框架提供的的圖形類庫掌握基本圖形繪制方法初步了解VisualBasic NET語言處理位圖圖像功能GDI 坐標系統(tǒng) 顏色 Paint事件等 最后重點介紹五子棋 人物拼圖案例 目錄 5 1圖形圖像繪制基礎(chǔ)知識5 2繪制基本圖形5 3創(chuàng)建畫刷填充圖形5 4圖像處理5 5文字處理5 6五子棋游戲設(shè)計5 7人物拼圖游戲設(shè)計 5 1圖形圖像繪制基礎(chǔ)知識 5 1 1GDI 概述GDI是GraphicsDeviceInterface的縮寫 含義是圖形設(shè)備接口 它的主要任務(wù)是負責(zé)系統(tǒng)與繪圖程序之間的信息交換 處理所有Windows程序的圖形輸出 GDI 技術(shù)是由GDI技術(shù) 進化 而來 出于兼容性考慮 WindowsXP仍然支持以前版本的GDI 但是在開發(fā)新應(yīng)用程序的時候 開發(fā)人員為了滿足圖形輸出需要應(yīng)該使用GDI 因為GDI 對以前的Windows版本中GDI進行了優(yōu)化 并添加了許多新的功能 5 1圖形圖像繪制基礎(chǔ)知識 圖5 1展示了GDI 在應(yīng)用程序與上述設(shè)備之間起著重要的中介作用 其中 GDI 為我們 包辦 了幾乎一切 從把一個簡單的字符串 HelloWorld 打印到控制臺到繪制直線 矩形甚至是打印一個完整的表單等 5 1圖形圖像繪制基礎(chǔ)知識 在VisualBasic NET中 所有圖形圖像處理功能都在以下命名空間下 1 System Drawing命名空間提供了對GDI 基本圖形功能的訪問 主要有Graphics類 Bitmap類 從Brush類繼承的類 Font類 Icon類 Image類 Pen類 Color類等 2 System Drawing Drawing2D命名空間VisualBasic NET中沒有3D命名空間 這是因為三維 3D 的效果實際上是通過二維 2D 的圖案體現(xiàn)的 System Drawing Drawing2D命名空間提供了高級的二維和矢量圖形功能 主要有梯度型畫刷 Matrix類 用于定義幾何變換 和GraphicsPath類等 3 System Drawing Imaging命名空間提供了高級GDI 圖像處理功能 4 System Drawing Text命名空間提供了高級GDI 字體和文本排版功能 5 1圖形圖像繪制基礎(chǔ)知識 5 1 2Graphics類要進行圖形處理 必須首先創(chuàng)建Graphics對象 然后才能利用它進行各種畫圖操作 創(chuàng)建Graphics對象的形式有 1 在窗體或控件的Paint事件中直接引用Graphics對象每一個窗體或控件都有一個Paint事件 該事件的參數(shù)中包含了當(dāng)前窗體或控件的Graphics對象 在為窗體或控件創(chuàng)建繪制代碼時 一般使用此方法來獲取對圖形對象的引用 PrivateSubForm1 Paint ByValsenderAsSystem Object ByValeAsSystem Windows Forms PaintEventArgs HandlesMyBase PaintDimgAsGraphics e Graphics EndSub 5 1圖形圖像繪制基礎(chǔ)知識 2 從當(dāng)前窗體或控件獲取對Graphics對象的引用把當(dāng)前窗體的畫刷 字體 顏色作為缺省值獲取對Graphics對象的引用 注意這種對象只有在處理當(dāng)前Windows窗口消息的過程中有效 如果想在已存在的窗體或控件上繪圖 可以使用此方法 例如 DimgAsGraphics Me PictureBox1 CreateGraphics 5 1圖形圖像繪制基礎(chǔ)知識 3 從繼承自圖像的任何對象創(chuàng)建Graphics對象 此方法在需要更改已存在的圖像時十分有用 例如 DimbitmapAsNewBitmap C test a1 bmp DimgAsGraphics Graphics FromImage bitmap 在圖形編程中 默認的圖形度量單位是像素 不過 可以通過修改PageUnit屬性來修改圖形的度量單位 可以是英寸或是毫米等 實現(xiàn)方法如下 DimgAsGraphics e Graphicsg PageUnit GraphicsUnit Inch 5 1圖形圖像繪制基礎(chǔ)知識 5 1 3顏色GDI 中的許多繪圖操作都涉及到顏色 例如 在繪制線條或矩形時都需要指定使用什么顏色 在自然界中 顏色大都由透明度 A 和三基色 R G B 所組成 在GDI 中 顏色封裝在Color結(jié)構(gòu)中 5 1圖形圖像繪制基礎(chǔ)知識 Color結(jié)構(gòu)中 除了提供 A R G B 以外 還提供許多系統(tǒng)定義的顏色如Pink 粉顏色 也就說用戶可以通過Color結(jié)構(gòu)就可以使用系統(tǒng)定義的顏色 Color結(jié)構(gòu)的基本屬性如表1所示 表1顏色的基本屬性 5 1圖形圖像繪制基礎(chǔ)知識 在圖像處理中一般需要獲取或設(shè)置像素的顏色值 獲取一幅圖像的某個像素顏色值的具體步驟如下 1 定義BitmapBitmapmyBitmap newBitmap c MyImages TestImage bmp 2 定義一個顏色變量把在指定位置所取得的像素值存入顏色變量中Colorc newColor c myBitmap GetPixel 10 10 獲取此Bitmap中指定像素的顏色 3 將顏色值分解出單色分量值intr g b r c R 紅色分量g c G 綠色分量b c B 藍色分量 5 1圖形圖像繪制基礎(chǔ)知識 5 1 4坐標在實際的繪圖中 我們所關(guān)注的一般都是指設(shè)備坐標系 此坐標系以像素為單位 像素指的是屏幕上的亮點 每個像素都有一個坐標點與之對應(yīng) 左上角的坐標設(shè)為 0 0 向右為正 向下為正 一般情況下以 x y 代表屏幕上某個像素的坐標點 其中水平以X坐標值表示 垂直以Y坐標值表示 例如 在圖8 2所示的坐標系統(tǒng)中畫一個點 該點的坐標 x y 是 4 3 5 1圖形圖像繪制基礎(chǔ)知識 5 1 5Paint事件在屏幕上進行繪制的操作稱為 繪畫 窗體和控件都有一個Paint事件 每當(dāng)需要重新繪制窗體和控件 例如 首次顯示窗體或窗體由另一個窗口覆蓋 時就會發(fā)生該事件 用戶所編寫的用于顯示圖形的任何代碼通常都包含在Paint事件處理程序中 5 2繪制基本圖形 5 2 1創(chuàng)建畫筆在GDI 中 可使用畫筆 Pen 對象于繪制具有指定寬度和樣式的線條 曲線以及勾勒形狀輪廓 畫筆Pen類的構(gòu)造函數(shù)有四種 使用方法如下 1 創(chuàng)建某一顏色的Pen對象 PublicSubNew ByValcolorAsColor 2 創(chuàng)建某一刷子樣式的Pen對象 PublicSubNew ByValbrushAsBrush 3 創(chuàng)建某 刷子樣式并具有相應(yīng)寬度的Pen對象 PublicSubNew ByValbrushAsBrush ByValwidthAsSingle 4 創(chuàng)建某一顏色和相應(yīng)寬度的Pen對象 PublicSubNew ByValcolorAsColor ByValwidthAsSingle 5 2 2繪制直線 有兩種繪制直線的方法 DrawLine 方法和DrawLines 方法 DrawLine 用于繪制一條直線 DrawLines 用于繪制多條直線 常用形式有 格式1 OverloadsPublicSubDrawLine ByValpenAsPen ByValx1AsInteger ByValy1AsInteger ByValx2AsInteger ByValy2AsInteger 其中x1 y1為起點坐標 x2 y2為終點坐標 例如 e Graphics DrawLine blackPen 100 100 200 100 格式2 OverloadsPublicSubDrawLine ByValpenAsPen ByValpt1AsPoint ByValpt2AsPoint 其中Pen對象確定線條的顏色 寬度和樣式 Point結(jié)構(gòu)確定起點和終點 5 2 3繪制矩形 使用DrawRectangle 方法可以繪制矩形 常用形式有 格式1 OverloadsPublicSubDrawRectangle ByValpenAsPen ByValrectAsRectangle 其中rect表示要繪制的矩形的Rectangle結(jié)構(gòu) 格式2 OverloadsPublicSubDrawRectangle ByValpenAsPen ByValxAsSingle ByValyAsSingle ByValwidthAsSingle ByValheightAsSingle 其中x y為矩形左上角坐標值 參數(shù)width是要繪制矩形的寬度 參數(shù)height是要繪制矩形的高度 5 2 4繪制多邊形 多邊形分為空心多邊形和填充多邊形 1 繪制空心多邊形PublicSubDrawPolygon ByValpenAsPen ByValpointAsPoint 2 繪制填充多邊形PublicSubFillPolygon ByValbrushAsBrush ByValpointAsPoint 其中Point數(shù)組是由一組Point結(jié)構(gòu)對象定義的多邊形 Pen對象指出畫線的畫筆 注意填充多邊形需用畫刷而不是畫筆 5 2 5繪制曲線 曲線有空心曲線和填充曲線之分 Graphics DrawClosedCurve可以畫出一個平滑封閉的曲線 1 繪制空心閉合曲線PublicSubDrawClosedCurve ByValpenAsPen ByValpointsAsPoint 2 繪制填充閉合曲線PublicSubFillClosedCurve ByValpenAsPen ByValpointsAsPoint points表示曲線經(jīng)過點的數(shù)組 其中必須包含至少4個點 5 2 6繪制橢圓和弧線 橢圓是一種特殊的封閉曲線 Graphics類專門提供了繪制橢圓的兩種方法 DrawEllipse 方法和FillEllipse 方法 常用形式有 格式1 PublicSubDrawEllipse ByValpenAsPen ByValrectAsRectangle 其中rect為Rectangle結(jié)構(gòu) 用于確定橢圓的邊界 格式2 PublicSubDrawEllipse ByValpenAsPen ByValxAsInteger ByValyAsInteger ByValwidthAsInteger ByValheightAsInteger 其中x y為橢圓左上角的坐標 width定義橢圓的邊框的寬度 height定義橢圓的邊框的高度 格式3 PublicSubFillEllipse ByValbrushAsBrush ByValrectAsRectangle 填充橢圓的內(nèi)部區(qū)域 其中rect為Rectangle結(jié)構(gòu) 用于確定橢圓的邊界 5 3創(chuàng)建畫刷填充圖形 畫刷是可與Graphics對象一起使用來創(chuàng)建實心形狀和呈現(xiàn)文本的對象 可以用畫刷填充各種圖形形狀 如矩形 橢圓 扇形 多邊形和封閉路徑等 畫刷 Brush 類是一個抽象類 本身不能實例化 一般使用它的派生類 主要有以下幾種不同類型的畫刷Brush派生類 1 SolidBrush畫刷SolidBrush類用來定義單一顏色的Brush 用純色進行繪制 5 3創(chuàng)建畫刷填充圖形 2 HatchBrush畫刷類似于SolidBrush 但是可以利用該類從大量預(yù)設(shè)的圖案中選擇繪制時要使用的圖案 而不是純色 HatchBrush畫刷具有三個屬性 分別如下 1 HatchStyle屬性 獲取此HatchBrush對象的陰影樣式 2 BackgroundColor屬性 獲取此HatchBrush對象的背景色 3 ForegroundColor屬性 獲取此HatchBrush對象的前景色 5 3創(chuàng)建畫刷填充圖形 3 LinearGradientBrush畫刷使用兩種顏色漸變混合的進行繪制 LinearGradientBrush類的構(gòu)造函數(shù)有多種格式 最常用的格式如下 PublicSubNew ByValpoint1AsPoint ByValpoint2AsPoint ByValcolor1AsColor ByValcolor2AsColor 該構(gòu)造函數(shù)有四個參數(shù) 其中Point1是表示漸變的起始點 Point2是表示漸變的終結(jié)點 Color1表示的漸變的起始色 Color2表示的是漸變的終止色 此處的Point1和Point2是Point結(jié)構(gòu)型的變量 Point結(jié)構(gòu)表示一個點 有兩個成員x和y 分別表示點的橫坐標和縱坐標 5 3創(chuàng)建畫刷填充圖形 4 TextureBrush畫刷使用紋理 如圖像 進行繪制 TextureBrush類允許使用一幅圖像作為填充的樣式 5 4圖像處理 5 4 1顯示圖像可以使用GDI 顯示以文件形式存在的圖像文件 圖像文件可以是BMP JPEG GIF TIFF PNG等 實現(xiàn)步驟為 1 創(chuàng)建一個Bitmap對象 指明要顯示的圖像文件 創(chuàng)建Bitmap對象 Bitmap類有很多重載的構(gòu)造函數(shù) 其中之一是 PublicSubNew ByValfilenameAsString filename是位圖文件的名稱 可以利用該構(gòu)造函數(shù)創(chuàng)建Bitmap對象 例如 DimbitmapAsNewBitmap tu1 jpg 2 創(chuàng)建一個Graphics對象 表示要使用的繪圖平面 DimgAsGraphics 窗體或圖片框控件 CreateGraphics 3 調(diào)用Graphics對象的DrawImage方法顯示圖像 5 4圖像處理 5 4 2圖像的平移 旋轉(zhuǎn)和縮放Graphics類提供了三種對圖像進行幾何變換的方法 分別用于圖形圖像的平移 旋轉(zhuǎn)和縮放 TranslateTransform 方法的形式為 PublicSubTranslateTransform ByValdxAsSingle ByValdyAsSingle 圖形平移指定的尺寸 其中 dx表示平移的x分量 dy表示平移的y分量 RotateTransform 方法的形式為 PublicSubRotateTransform ByValangleAsSingle 圖形旋轉(zhuǎn)指定角度 其中 angle表示旋轉(zhuǎn)角度 ScaleTransform 方法的形式為 PublicSubScaleTransform ByValsxAsSingle ByValsyAsSingle 圖形縮放指定數(shù)量 其中 sx表示x方向的縮放比例 sy表示y方向的縮放比例 5 4圖像處理 5 4 4彩色圖像變換灰度圖像彩色圖像像素的顏色是由三種基本色顏色 即紅 R 綠 G 藍 B 有機組合而成的 稱為三基色 每種基色可取0 255的值 因此由三基色可組合成 256 256 256 1677萬種顏色 每種顏色都有其對應(yīng)的R G B值 1 彩色圖像顏色值的獲取在使用C 系統(tǒng)處理彩色圖像時 使用Bitmap類的GetPixel方法獲取圖像上指定像素的顏色值 5 4圖像處理 2 彩色位圖顏色值分解像素顏色值c是一個長整型的數(shù)值 占4個字節(jié) 最上位字節(jié)的值為 0 其它3個下位字節(jié)依次為B G R 值為0 255 從Color值分解出R G B值可直接使用 DimcAsNewColor c box1 GetPixel i j r c Rg c Gb c B 5 4圖像處理 3 圖像像素顏色的設(shè)定設(shè)置像素顏色可使用SetPixel方法 用法如下 Dimc1AsColor Color FromArgb rr gg bb Box2 SetPixel i j c1 指定圖片框Box2位置 i j 的顏色值為c1 例5 6 彩色圖像生成灰度圖像 5 5文字處理 5 5 1創(chuàng)建字體Font類定義了文字的格式 如字體 大小和樣式等 創(chuàng)建字體對象的語法格式如下 Font字體對象 newFont 字體名 字號 字體樣式 其中 字體樣式 為FontStyle枚舉類型 包括Bold Italic Regular Strikeout 刪除線 和Underline等 表示該字體是否為粗體 斜體 常規(guī) 黑體 刪除線或下劃線 還可以通過or運算符來組合樣式 例如 Fontstyle ItalicOrFontStyle Bold將字體變成傾斜和加粗 例如 以下語句創(chuàng)建一個字體為 宋體 大小為20 樣式為粗體的Font對象f DimfAsFontf NewFont 宋體 20 FontStyle Bold 5 5文字處理 字體常用屬性如表4所示 5 5文字處理 5 5 2繪制文本Graphics對象提供了文本輸出的DrawString方法 其中使用 字體格式 StringFormat對象可以優(yōu)化文本顯示的效果 Graphics DrawString 字符串 Font Brush Point 字體格式 Graphics DrawString 字符串 Font Brush Rectangle 字體格式 其中 各參數(shù)的說明如下 1 字符串 指出要繪制的字符串 也就是要輸出的文本 2 Font為創(chuàng)建的字體對象 用來指出字符串的文本格式 3 Brush為創(chuàng)建的筆刷對象 它確定所繪制文本的顏色和紋理 4 Point表示為Point結(jié)構(gòu)或者為PointF結(jié)構(gòu)的點 這個點表示繪制文本的起始位置 5 6應(yīng)用案例 五子棋游戲設(shè)計 例5 8 單機版的五子棋程序 1 設(shè)計的思路在下棋過程中 為了保存下過的棋子的位置使用了Box數(shù)組 Box數(shù)組初值為枚舉值Chess none 表示此處無棋子 Box數(shù)組可以存儲枚舉值Chess none Chess Black Chess White 分別代表無棋子 黑子 白子 2 設(shè)計步驟 1 設(shè)計應(yīng)用程序界面本程序主要在窗體設(shè)計器中添加一個 重新開始 命令按鈕控件button1 一個顯示棋子和棋盤的圖片框控件pictureBox1 顯示鼠標坐標的標簽label1和提示該那方走棋的標簽label2 5 7人物拼圖游戲設(shè)計 例5 9 拼圖游戲?qū)⒁环鶊D片分割成若干拼塊并將它們隨機打亂順序 當(dāng)將所有拼塊都放回原位置時 就完成了拼圖 游戲結(jié)束 程序設(shè)計的思路 應(yīng)用程序首先顯示以正確順序排列的圖片縮略圖 根據(jù)玩家設(shè)置的分割數(shù)計算出行 列 數(shù)GameSize 將圖片分割成相應(yīng)行列數(shù)的拼塊 并按順序編號 動態(tài)生成一個大小GameSize的數(shù)組Position 存放用0 1 2到GameSize 1的數(shù) 每個數(shù)字代表一個拼塊 游戲開始時 隨機打亂這個數(shù)組 根據(jù)玩家用鼠標點擊任意兩個圖片 來交換該Position數(shù)組對應(yīng)元素 判斷元素排列順序來判斷是否已經(jīng)完成游戲