影像處理 實作 (1)

2008/02/27

視窗程式運作模式• 視窗程式可以想像成一個執行無窮迴圈的程式，不斷地監看並接

收著從外界進入的訊息。

控制項一控制項二

控制項三

控制項

訊息（滑鼠點擊、拖曳、鍵盤輸入

等）

藉由「事件處理函式」負責對某訊息做出反應來

訊息

視窗程式

Windows Form 程式編輯模式

1. 由工具箱把想要的控制項放到表單

上

2. 修改控制項的屬性

3. 點選此按鈕為該控制項加入要處理的事件處理函

式

建立事件處理函式

左邊表示該控制項所有可以接受的訊息名

稱

右邊點兩下可以為該訊息建立事件處理函式。 點選後直接跳至程式編

輯畫面，讓使用者輸入對應的動作。

建立事件處理函式•控制項常見事件

▫TextBox Click TextChanged

▫Button Click

▫Label 註：大部分的事件的命名都會和其內容有所關聯，因

此可以從名稱中去推敲該事件的功能。

程式碼撰寫• 程式碼架構

▫ 一個表單被視為一整個大的類別，所有在此表單當中的控制項和他們的事件處理皆被視為該類別的成員。 其他使用者自訂的成員變數可以宣告在該類別的

一開頭。

練習• 請建立一個專案（檔案→新增→專案）。• 請選擇「 Visual C# 」，選擇「 Windows 應用程式」

請記得變更專案名稱與儲存路徑

• 請在表單上放上兩個「 PictureBox 」、兩個「 Button 」與一個「 OpenFileDialog 」控制項如下：

練習

請修改 Button的Text 屬性

練習•如要增加 OpenFileDialog 的篩選條件，請在其

Filter 當中加入。•例如：在該屬性中填入

Bmp 檔案 |*.bmp|Jpeg 檔案 |*.jpg 代表要對 bmp 圖片與 jpg 圖片來做篩選。

•編譯程式▫按「建置→建置方案」或「 F6 」▫再按「偵錯→ 啟動但不偵錯」或「 Ctrl+F5 」

註：在偵錯模式下執行影像處理程式速度較慢

像素灰階與色彩模型 通常影像的灰階以一個位元組，即 8 位元，來表現一組灰階。

故共有 28=256 種組合，代表 256 個灰度。 常見的色彩模型為 RGB 模型，代表一種顏色可分成三個紅、

綠、藍三種 channnel 。每一種 channel 用一個 byte 表示，故一種 channel 可表現 256 種程度的色階。

一張全彩的點矩陣影像（ *.bmp ），像素最少會用三個位元組表示（ 24 位元），故共可表現出 (256)3 種顏色。

有關此類資訊一般都稱作像素格式（ Pixel Format ）。

所謂的灰色，又稱中性色彩，不含顏色資訊，僅可代表亮度。 RGB 三個channel 的值相同。

載入二維圖片• 請在其一 Button的 Click 事件中加入： if (openFileDialog1.ShowDialog() == DialogResult.OK)

//開啟開檔對話盒，回傳 DialogResult.OK代表使用者按下開啟檔案按鈕 { Bitmap source = new Bitmap(openFileDialog1.FileName); //MessageBox.Show(source.PixelFormat.ToString()); pictureBox1.Image = source; //Image是一個 PictureBox的公開屬性，用來指定顯示的圖片 }Bitmap 類別中的 PixelFormat 用來記載該圖形像素的相關資訊；最常用來判斷該影像中每個像素是由幾個位元所組成的。

範例：

if (source.PixelFormat != PixelFormat.Format8bppIndexed) { MessageBox.Show("Please use 8-bit grau scale image!"); return; }

注意事項•PictureBox 控制項不具 scroll 的功能，欲自動

產生 scroll bar ，請先放置 Panel 控制項，並把PictureBox 放入其中。記得設定以下屬性：▫Panel的 AutoScroll 必須為 true▫PictureBox的 SizeMode 設定為 AutoSize

讀取與寫入像素值 呼叫圖形類別 Bitmap 中的 GetPixel 方法可以讀

取某一座標點 (x, y) 的顏色值 :▫ 語法： Color c = pic.GetPixel(x, y);▫ 注意：這裡的 x 是水平軸的座標， y 是垂直軸的座標

呼叫圖形類別 Bitmap 中的 SetPixel 方法可以寫入某一座標點 (x, y) 的顏色值 :

▫ 語法： pic.SetPixel(x, y, c); c 的型態為 Color ，可以用 Color 類別的 FromArgb 來設定

RGB 的值以產生顏色，如：pic.SetPixel(x, y, Color.Argb(255, 255, 0));

在下頁的範例裡，我們將像素的顏色讀出之後，複製到三個二維的陣列（分別代表 RGB ），再由這個二維的陣列讀出值，再組合成顏色寫入另一個圖形物件中。

讀取像素值，寫入像素值 讀取影像的像素時，一般常用兩層迴圈，先讀列，再讀行。

請將以下程式碼加入 button2的 Click 事件處理函式中：

練習•試圖將像素逐一複製到另外一張影像中並顯示出

來。•試圖改變像素的 RGB 值，觀察其結果。例如：

▫將每一個 R 、 G 、 B 分別加上一個數值 ( 最大不超過 255) 後，再行複製。

▫將每一個 R 、 G 、 B用 255 來減。