C++ Builder 程式設計基礎

影像處理Sep. 28, 2016

銘傳資工李遠坤副教授編撰

大綱

1. C++ Builder簡介

2. 物件導向程式設計(Object-Oriented Programming, OOP)

3. 視覺化元件與視覺化元件函式庫 ( Visual Components

and Library, VCL )

4. 視窗 (Windows) 程式設計與 C++ Builder 程式設計

5. C++ Builder 整合開發環境 (IDE)

2

C++ Builder簡介

3

C++ Builder簡介

• 1997年 Borland 公司針對 C++ 程式語言所開發的快速應用

程式開發工具 ( Rapid Application Development, RAD )。

• C++ Builder 為一整合開發環境 ( Integrated Development

Environment, IDE ), 整合了包含程式編輯器(Editor)、編譯

器(Compiler)、連結器(Linker)、偵錯器(Debugger)…等開發

應用程式所需的所有工具, 因此可以加速應用程式的開發

時程。

4

C++ Builder簡介 (續)

• 為方便開發視窗應用程式, Borland加入了許多的視覺化

元件(Visual Component), 方便使用者運用在所開發的視窗

程式畫面之中。

• Borland 也為每個元件寫好各種常用的函式, 以方便使用

者呼叫使用。這些函式集合起來, 便稱之為『視覺化元件

函式庫 (Visual Component Library)』。

5

C++ Builder簡介 (續)

• 2006年 8月Borland 公司宣布將分割 IDE部門, 包括 C++

Builder, Delphi, Jbuilder, InterBase等四個產品。

• 2006年 11月Borland 公司成立全資子公司 CodeGear, 並將

IDE部門業務轉移到 CodeGear。

• CodeGear在 2008年又為 embarcadero公司所收購。

• 本教材所使用的範例程式則是使用 C++ Builder XE2 教育

版所撰寫。

6

物件導向程式設計

(Object-Oriented Programming, OOP)

7

物件導向程式設計

• 傳統應用程式執行方式是從頭一行指令接著一行指令地

執行。物件導向程式設計 (Object-Oriented Programming,

OOP) 則是將物件 (Object)視為程式的基本單元。

• 程式物件中包含了資料的定義,稱為屬性(Property)與可

執行之特定函式, 稱為方法 (Method)。

• 為方便程式設計師建立程式物件, 物件導向程式設計便發

展出類別 (Class)的概念。只要將某物件宣告為某個類別,

該物件便擁有該類別所定義的屬性與方法。

8

物件導向程式設計 (續)

• 物件導向程式設計的另一項特性是一個程式物件中, 可以

包含另外一個程式物件。

• 概念如同汽車是一個物件,輪胎是一個物件, 方向盤也是

一個物件。一輛汽車中包含了四個輪胎,一個方向盤和其

他物件。所以一個大物件可以由多個不同的小物件所組

成的概念一般。

• 小物件被包含在大物件之中, 因此屬於小物件的所有資料

定義與可使用的函式, 大物件也同樣可以使用, 這就是繼

承(Inheritance)的概念。

9

物件導向程式設計 (續)

• 繼承(Inheritance)的概念, 可以從類別的角度來看, 在類別

之中, 可以包含子類別。子類別是父類別的具體化, 表示

子類別包含更多屬性來描述物件的更多性質。

• 因此, 從汽車的例子來看, 汽車類別是輪胎類別的子類別。

輪胎類別的所有屬性, 汽車類別都繼承了。除此, 汽車類

別還包括其他屬性, 或定義於方向盤類別中的屬性。

• 因為汽車是由輪胎與其他物件所組成的, 所以輪胎類別是

父類別, 汽車類別是子類別。

10

視覺化元件與視覺化元件函式庫

( Visual Components and Library, VCL )

11

視覺化元件

12

• C++ Builder 提供許多視覺化元件 ( Visual Component ) 可

供使用者運用於開發視窗應用程式。

• 這些元件就如同物件導向程式設計 (OOP)概念中的物件

一樣, 每個元件都有定義一些特定的屬性 (Properties), 用

來描述元件的基本性質。

• 除此, 針對各個元件型態 (就是 OOP中的類別 ), C++

Builder 也準備了一些功能強大的函式 (Functions) 方便使

用者呼叫。

視覺化元件函式庫

13

• 所有元件型態所定義的函式的集合, 稱為視覺化元件函式

庫 ( Visual Component Library, VCL )。

• 這些函式在早期被稱為方法(Method), 與 OOP所使用的名

稱一致。但在最新版本的 Help 文章中, 則是直接用函式

(Function) 稱呼。

• 要檢視各個元件型態有什麼函式可以使用, 只要在 Help

中搜尋該元件型態, 即可看到所有 Functions的列表。

例如: 搜尋 TPicture元件型態, 可以看到共 18個可使用函

式。

14

vcl.h標頭檔涵蓋了所有 VCL函式庫的宣告,

檢視在 Unit1.cpp 檔案的第一行指令, 可以發現

#include <vcl.h>

因此, 編譯器(Compiler)就可以認得所有 VCL的函式呼叫了。

視窗 (Windows) 程式設計

與 C++ Builder 程式設計

15

視窗 (Windows) 程式設計

• 傳統應用程式執行方式是從頭一行指令接著一行指令地

執行。

• 視窗應用程式則是採用事件驅動程式設計 (Event-driven

programming)的模式進行開發。程式的執行流程是由使

用者所觸發的事件來驅動對應程式碼之執行, 執行完畢之

後, 又繼續等待使用者觸發下一個事件。

• 每個事件所對應的程式碼, 稱為事件處理程序(Event

Handler)。

16

視窗 (Windows) 程式設計 (續)

• 視窗應用程式的開發, 可分成下列兩項主要的工作:

– 設計執行畫面 (Form Design):

規劃執行畫面需要放入那些視覺化元件

– 撰寫事件處理程序 (Event handler Programming):

針對不同元件, 使用者所觸發的不同事件, 撰寫不同的處理程式

17

C++ Builder 程式設計

• C++ Builder 兩項主要工作的環境如下:

– 設計執行畫面 (Form Design):

1. 視覺化元件分門別類地存放於工具盤 (Tool Palette)之中,

使用者可將所需的元件直接拖曳到畫面之中,

再透過元件檢視器(Object Inspector) 修改屬性(Properties)與

設定事件處理程序(Event Handler)。

2. 畫面設計內容則會儲存於 Unit1.dfm檔案之中,

元件宣告指令會自動產生, 並儲存於 Unit1.h檔案之中。

18

C++ Builder 程式設計 (續)

• C++ Builder 兩項主要工作的環境如下 (續) :

– 撰寫事件處理程序 (Event Handler)

1. 從元件檢視器選擇特定的元件後, 進入事件分頁中, 透過雙擊特

定事件, C++ Builder 會轉換成事件處理程序撰寫模式, 使用者即

可進入所對應的事件處理程序中撰寫程式碼。

2. 所撰寫的程式碼會儲存於 Unit1.cpp檔案之中。

3. 事件處理程序的宣告、名稱與、傳遞參數宣告..等, 均由 C++

Builder 自動產生, 使用者只需在 { }中寫入程式碼即可。若不需

要自動產生的內容, 使用者不可以自行刪去, 否則會產生連結錯

誤 (Link Error)。

19

C++ Builder 整合開發環境 (IDE)

20

C++ Builder 整合開發環境

1. 開啟一個 VCL Form 應用專案

2. 元件檢視器 (Object Inspector)

3. 工具盤 (Tool Palette)

4. 撰寫事件處理程序 (Event Handler Programming)

5. 儲存單元 (Save Unit)

6. 儲存專案 (Save Project)

21

開啟一個 VCL Form 應用專案進入 C++ Builder XE2 的整合開發環境 (IDE)後,

要開始寫一個全新的應用程式,

可以從功能列中選擇 File | New | VCL Forms Application,

開啟一個 VCL Form 應用開發專案(Project)

22

畫面 (Form)

23

當你新開啟了一個開發專案 (Project) 後,

C++ Builder 就會幫你產生一個名稱暫定為 Form1 的一個畫面元件,

Form1 也是未來程式執行時, 使用者會看到的畫面。

使用者便可以開始進行執行畫面的設計工作。

畫面 (Form) (續)

24

一個專案可以由許多畫面組成。

應用程式執行時, 何時該顯示哪一個畫面, 都可以透過指令來控制。

一個專案之中, 至少需要有一個畫面。

畫面 (Form) (續)

25

基本上, Form1 也是一個元件 (Object),

其屬性 (Property)除了名稱 (Name) 之外,

還有寬 (Width)、高 (Height)…等相關屬性可以供使用者設定。

使用者可以直接拖曳 Form1 外圍的小點來改變 Form1 的大小,

也可以透過元件檢視器 (Object Inspector) 來更改大小。

小點

元件檢視器 (Object Inspector)元件檢視器可以針對所選定的元件, 檢視該元件的相關內容。

元件檢視器通常會被放置於

C++ Builder 開發環境的右下方,

使用者也可以自行更改位置。

當使用者找不到元件檢視器時,

可以用滑鼠點選功能列

View | Object Inspector

或直接按功能鍵 F11,

即可呼叫出右圖的元件檢視器。

26

元件檢視器 (Object Inspector) (續)元件檢視器的內容分成以下兩個分頁:

• 屬性 (Properties)

列出該物件的各項屬性, 使用者可

以直接在此設定或修改屬性值，

修改完成後，該元件在畫面 (Form)

上的外觀也會直接跟著修正。

• 事件 (Events)

記錄該元件可能發生的所有事件

與其對應的事件處理程序 (Event Handler)

27

元件檢視器 (Object Inspector) (續)

28

選擇欲檢視的元件

屬性(Properties)分頁

事件(Events)分頁

色彩屬性(Properties Color)

29

在元件檢視器中,

將 Form1的 Color Property設定為淺綠色 (A2FFA2),

可以發現 Form1的顏色修改為淺綠色。

執行畫面

30

Form1 的 Color Property 設定為淺綠色後,

雖然目前畫面沒有加入任何元件, 也沒有撰寫任何的程式,

依然可以使用功能列 Run | Run without Debugging 來執行程式。

下圖為執行畫面, 也變成綠色的畫面了。

畫面左上角的文字為 Form1 元件 Caption Property 的內容,

使用者也可以透過元件檢視器更改顯示的內容。

31

在元件檢視器的 Events分頁中,

雙擊 OnClick 右邊的欄位, C++ Builder 會自動

切換到 Unit1.cpp 檔案的事件處理程序之撰寫

模式, 程序的名稱與傳入參數的宣告已經自動

設定完成,使用者無需自己設定,相當方便。

我們在程序中輸入一行指令

ShowMessage(“You Click the Form1!”);

然後就可以試著執行程式!

32

在專案執行所顯示的綠色畫面上用滑鼠點擊一下,

就會顯示一個小視窗,內含一段訊息 “You Click the Form1!”,

按下 OK按鈕,訊息視窗就會消失!

工具盤 Tool Palette

33

使用者在設計執行畫面時, 可以從右下角的工具盤 (Tool Palette)

中選擇各種元件, 將其拖曳進入畫面中。

C++ Builder XE2 的工具盤 (Tool Palette),

其實是從之前版本中的

元件盤 (Component Palette)改名而來。

由於工具盤上的元件非常多,

為方便使用者尋找,

所有的元件都特別經過分類,

右圖顯示各個分類。

工具盤 Tool Palette (續)

34

點擊各個分類, 就可以將該分類展開, 使用者就可以檢視該分類

所有的元件型態, 例如:

TMainMenu為主功能表元件型態。

當使用者找到所需的元件型態之後,

就可以直接將該元件型態拖曳到畫面上,

C++ Builder 就會在畫面上建立該元件。

右圖是將 Standard類別點擊展開,

所看到的元件型態。

35

在工具盤中的 Standard 分類中,

拖曳 TMainMenu元件型態到 Form1 之中。

C++ Builder 就會在 Form1 上產生一個名稱暫定

為MainMenu1 的 TMainMenu元件。

雙擊MainMenu1 元件就會出現主功能表設定視窗,

使用者就可以開始設定功能表上要有哪些項目。

36

同時, 在元件檢視器中也會自動新增一個未命名的

TMenuItem元件, 只要在 TMenuItem的Caption

Property 中輸入文字, 該文字就會出現在功能表項

目上顯示出來, Name Property也會自動完成設定。37

Caption 輸入 File

Name 自動設定為 File1

接著, 選定 File 功能列下層方塊, 元件檢視器也會再度自動新增一個

未命名的 TMenuItem元件, 同樣在Caption Property 中輸入文字 Open,

該文字就會出現在 File 功能列的下層, Name Property也會自動設定

為 Open1。38

如果想要在某個功能表項目(TMenuItem)下建立子功能項目,

可以在選定該功能表項目時 (如上圖呈藍色狀態下)按下滑鼠右鍵,

就會出現該功能表項目的快捷功能表單,

只要選擇 Create Submenu 即可建立子功能表項目。39

40

同樣地, 用滑鼠選擇所建立的子功能項目,並在其所對應之 TMenuItem

的 Caption Property輸入 Image 文字, 就會建立名稱為 Image1 的功能項

目 TMenuItem。如上圖所顯示已經完成建立子功能表項目了。

接著來, 就可以試著執行程式, 檢查所建立的功能表項目是否正確 !

執行畫面

41

Form1 上已經建立一個主功能元件,

主功能表只有一個 File 功能列,

File 功能列中只有一個 Open 功能項目,

Open 功能項目下, 有建立一個 Image 子功能項目。

撰寫事件處理程序

42

範例

在Form1 放置一個影像元件 TImage,

然後透過開啟影像對話盒元件 TOpenPictureDialog,

讓使用者可以在電腦的檔案夾中選擇要開啟的影像檔案,

並將影像顯示在Form1 上。

(缺執行結果圖)

撰寫事件處理程序 (續)

43

撰寫事件處理程序時, 本範例將會呼叫 2 個 VCL函式:

1. TOpenPictureDialog::Execute();

(元件類別 ::函式名稱 (傳入參數宣告 ) )

Execute() 函式會開啟影像選擇對話盒元件 OpenPictureDialog,

讓使用者選擇要開啟的影像檔案。

當使用者選定影像後, 所選之路徑與檔案名稱將會儲存於影像選擇

對話盒元件的 Property Filename之中, 並傳回布林值 true ;

當使用者在對話盒中按下 Cancle,則傳回布林值 false。

撰寫事件處理程序 (續)

44

2. TPicture::LoadFromFile(const System::UnicodeString Filename);

函式 LoadFromFile的傳入參數為所欲開啟的檔案名稱 (Filename),

此函數會將影像內容讀取到 TPicture元件之中。

讀取影像的方式會依照 TPicture元件中相關屬性所設定方式,

並同時將影像的相關性質, 如寬(Width)、高(Height)、影像類型

(PixelFormat)…等, 自動設定到 TPicture元件的相對應屬性之中。

45

首先, 從設計執行畫面開始示範。

在工具盤中點擊 Additional 分類,

找到 TImage元件型態, 並將其拖曳到 Form1。

C++ Builder 會建立一個 TImage影像型態的影像

元件, 並自動命名為 Image2。

(因為名稱 Image1 被 TMenuItem元件用過了! )

46

接著, 在工具盤中點擊 Dialogs 分類,

找到 TOpenPictureDialog元件型態,

並將其拖曳到 Form1。

47

雙擊MainMenu1 主功能表, 開啟主功能表設定

視窗, 從主功能表往下尋找, File | Open | Image,

選取之前所設定過的 TMenuItem元件 Image1,

雙擊該元件即可進入事件處理程序 Image1Click

的程式碼編寫模式。

48

事件處理程序 Image1Click 的名稱是由 C++ Builder 所設定的, 使用

者若是不熟悉命名方式, 建議最好不要自行更改, 否則會引發連結

錯誤(Link Error)。

Image1 是TMenuItem物件的名稱, Click 則是當 Image1 物件發生

Click 事件, 所以事件處理程序 Image1Click名稱所代表的意義就是

當 Image1物件發生 Click 事件所要執行的程式碼。

Image1Click名稱也會同時出現在 Unit1.h 標頭檔的宣告之中及物

件檢視器的 Image1 元件的事件分頁之中。

49

事件處理程序 Image1Click 的名稱

50

在事件處理程序 Image1Click的 { }中, 輸入

OpenPictureDialog1->Execute();

所代表的意思是當使用者點擊 Image1 這個功能表選項元件時,

就會執行開啟 OpenPictureDialog1 這個對話盒, 讓使用者選擇所要

使用的影像檔。

51

執行時, 所開啟的 OpenPictureDialog1 對話盒。當使用者選擇一張影像後,

按下 [開啟舊檔(O) ], 檔案的路徑與檔名會被存入 OpenPictureDialog1元

件的 Property Filename , 並傳回布林值 true。

若使用者按下 [取消 ],則傳回布林值 false。

52

由於 OpenPictureDialog1->Execute()會傳回一個布林值,

因此, 可以將其放進 if 指令的條件式之中,

讓程式可以自動判斷使用者是否已經選擇檔案,

若是傳回 true, 代表路徑與檔名已經存在 OpenPictureDialog1的

Property Filename 之中, 就可以使用 TPicture元件型態的

函式 LoadFromFile將影像讀進來。

Execute() 函式若傳回 false, 則不需執行 LoadFromFile函式。

53

影像內容已經顯示在影像元件 Image2 之中了。

觀察影像內容, 似乎只有顯示出影像的左上角部分影像而已。

因為影像檔案中的影像大小比影像元件的大小還要大,

導致只能顯示出部分影像。

54

從物件檢視器中, 將影像元件 Image2 的 Property

AutoSize設定為 True 後, Image2 元件的寬

( Property Width ) 與高 ( Property Height ) 兩項屬

性, 就會自動隨著所要讀取的影像的寬高值調整。

如此, 影像就可以完整顯示出來。

55

影像元件 Image2 的 Property AutoSize設定為 True 之後,

在執行時, 影像內容已經可以完整地顯示在Form1 之中了。

影像元件型態 TImage

• Property Picture是 TImage影像元件中最重要的一個屬性。

Picture 本身就是一個物件, 就是用來存放影像內容的物件。

• TPicture物件包含一個 Bitmap物件, 影像像素的色彩值就

是一個像素(Pixel) 接著一個像素存放在 Bitmap物件之中。

• TBitmap元件屬性包含一個 Property ScanLine的陣列資料。

ScanLine[j] 之中所存放的資料, 就是指向第 j 橫列像素色彩

資料的記憶體起始位址。

• 透過存在 Property ScanLine陣列中的記憶體指標就可以直

接從記憶體中存取影像元件的色彩值。

56

57

接下來, 請同學依照前面所提的方法,

建立上圖MainMenu中 Image |Adjustments | Inverse 功能列。

然後, 雙擊 Inverse 功能項目, 進入事件處理程序的撰寫模式。

58

在 Inverse1 功能項目的Click事件處理程序中撰寫上述程式碼,

雙層迴圈的離開判斷分別為影像的高與寬。影像被載入之後,

先將其值放於兩個變數 iImageHeight與 iImageWidth, 方便使用。

59

影像處理程式常需要由上而下、由左而右地,

把影像中每一個像素都用同樣的方式處理,

因此, 可用雙層迴圈來控制。

外層迴圈控制由上而下每一橫列都會被處理,

透過 ScanLine[j] 就可以取得每一橫列的起始位址。

60

內層迴圈控制由左而右每一像素都會被處理,

由於每一個像素都用 3個位元組來分別表示藍、綠、紅的色彩值,

因此, 可以再用一個 for 迴圈來分別處理三個色彩值。

因為 Inverse是要將影像做成底片模樣, 只要將色彩值改成互補的

顏色值再存回即可, 如下程式:

bPtrImageRow[3*i+k] = 255 - bPtrImageRow[3*i+k];

61

由於記憶體中的色彩值已經被修改了,

必須重新請電腦依照記憶體的狀況繪製 Image ,

所以使用 TImage的函式 Refresh() 重繪影像外觀。

最後, 程式中所使用的變數, 都必須再 Unit1.h 中宣告,

請切換到 Unit1. h 分頁中宣告公用變數。

62

切換到 Unit1.h 分頁上宣告變數

用來宣告在Unit1.cpp中

會使用到的變數之區域

Form1中所有的元件與

使用到的函式都會自動

在此區域宣告

宣告在其他程式中會使

用到的公共變數之區域

63

Inverse功能是將影像做成底片模樣!

儲存單元 (Save Unit)

• 完成畫面的設計與事件處理程式的撰寫之後,使用者可以將

所完成的開發內容暫時儲存起來。儲存之前, 使用者必須

了解 C++ Builder 將如何儲存自己所完成的開發內容, 否則

很容易發生自己的心血付諸東流的慘事。

• 使用者所開發的內容被 C++ Builder 儲存在三個不同的檔案

之中, 分別是 Unit1.dfm、 Unit1.h、Unit1.cpp。

• 因此, 每一個單元(Unit)均包含上述三個檔案。

• 一個專案最少需要一個單元。當然, 也可以有多個單元。

64

Unit1.dfm

• 副檔名為 dfm, 內容為所設計的

Form1及在 Form上的所有元件

之描述。

• 用記事本開啟 Unit1.dfm, 即可看

到 C++ Builder 是如何描述的。

• 當我們開啟一個舊的專案時,

C++ Builder 就是根據此描述內容,

然後將 Form 顯示出來。

65物件(Object) 之內容描述

Unit1.h

• 副檔名為 h, 表示為一個 C 語言的標頭檔(header file)。

• 每一個 Form 都會搭配一個標頭檔。

• Unit1.h 的內容涵蓋:

– 在 Form1 上所出現的元件的宣告相關指令、

– 各個元件所使用到的事件處理程序的宣告、

– 使用者自行宣告, 在 Form1 中使用的變數、

– 使用者自行宣告, 準備給其他 Form也可以使用的公用變數。

• 在 Unit1.cpp中, 可以找到一行 #include "Unit1.h" 的指令。

• 在程式撰寫模式下, 切換到 Unit1.h 分頁, 即可直接編輯。

66

Unit1.cpp

• 副檔名 cpp即為 C++之意, 類型為 C++ Source File,

即所撰寫的程式原始碼。

• 檔案內容就是所有撰寫的事件處理程序。

• 在程式撰寫模式下, 切換到 Unit1.cpp 分頁,

即可直接編輯。

67

68

Save 與 Save As… 都是針對單元的儲存

每次儲存都會同時儲存單元的三個檔案:

Unit1.dfm、Unit1.cpp 與 Unit1.h。

儲存專案(Save Project)

• 除了單元必須儲存之外, 應用程式專案也要儲存。

• 專案內容被 C++ Builder 儲存在三個不同的檔案之中, 分別

是 Project1.cbproj、Project1.cbproj.local 、 Project1.cpp 。

• 從功能表中選取 File | Save Project As… 就可以將專案的內

容儲存起來。

69

儲存專案(Save Project) (續)

• Project1.cbproj

副檔名cbproj是 C++ Builder 的 Project File,

內容是關於整個專案內容的描述。

• Project1.cbproj.local

副檔名是 cbproj的後面加加上 .local, 用記事本打開看,

可以看到專案儲存在這台電腦 (local) 的相關目錄。

• Project1.cpp

副檔名是 cpp, 也是整個專案能夠在視窗環境下執行

C++ 語言指令的相關部分。

70

71

Save Project As… 是針對專案的儲存

每次儲存都會同時儲存專案的

Project1.cbproj、Project1.cbproj.local 與

Project1.cpp等三個檔案。