c++ builder basic
TRANSCRIPT
![Page 1: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/1.jpg)
C++ Builder 程式設計基礎
互動視訊遊戲製作Feb. 23, 2013
銘傳資工李遠坤副教授編撰
![Page 2: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/2.jpg)
大綱
1. C++ Builder簡介
2. 物件導向程式設計(Object-Oriented Programming, OOP)
3. 視覺化元件與視覺化元件函式庫 ( Visual Components
and Library, VCL )
4. 視窗 (Windows) 程式設計與 C++ Builder 程式設計
5. C++ Builder 整合開發環境 (IDE)
2
![Page 3: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/3.jpg)
C++ Builder簡介
• 1997年 Borland 公司針對 C++ 程式語言所開發的快速應用
程式開發工具 ( Rapid Application Development, RAD )。
• C++ Builder 為一整合開發環境 ( Integrated Development
Environment, IDE ), 整合了包含程式編輯器(Editor)、編譯
器(Compiler)、連結器(Linker)、偵錯器(Debugger)…等開發
應用程式所需的所有工具, 因此可以加速應用程式的開發
時程。
3
![Page 4: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/4.jpg)
C++ Builder簡介 (續)
• 為方便開發視窗應用程式, Borland加入了許多的視覺化
元件(Visual Component), 方便使用者運用在所開發的視窗
程式畫面之中。
• Borland 也為每個元件寫好各種常用的函式, 以方便使用
者呼叫使用。這些函式集合起來, 便稱之為『視覺化元件
函式庫 (Visual Component Library)』。
4
![Page 5: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/5.jpg)
C++ Builder簡介 (續)
• 2006年 8月Borland 公司宣布將分割 IDE部門, 包括 C++
Builder, Delphi, Jbuilder, InterBase等四個產品。
• 2006年 11月Borland 公司成立全資子公司 CodeGear, 並將
IDE部門業務轉移到 CodeGear。
• CodeGear在 2008年又為 embarcadero公司所收購。
• 目前版權是屬於 embarcadero公司, 最新版本則是在2012
年秋天發表的 C++ Builder XE5。
• 本教材所使用的範例程式則是使用 C++ Builder XE2 教育
版所撰寫。
5
![Page 6: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/6.jpg)
物件導向程式設計
• 傳統應用程式執行方式是從頭一行指令接著一行指令地
執行。物件導向程式設計 (Object-Oriented Programming,
OOP) 則是將物件 (Object)視為程式的基本單元。
• 程式物件中包含了資料的定義,稱為屬性(Property)與可
執行之特定函式, 稱為方法 (Method)。
• 為方便程式設計師建立程式物件, 物件導向程式設計便發
展出類別 (Class)的概念。只要將某物件宣告為某個類別,
該物件便擁有該類別所定義的屬性與方法。
6
![Page 7: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/7.jpg)
物件導向程式設計 (續)
• 物件導向程式設計的另一項特性是一個程式物件中, 可以
包含另外一個程式物件。
• 概念如同汽車是一個物件,輪胎是一個物件, 方向盤也是
一個物件。一輛汽車中包含了四個輪胎,一個方向盤和其
他物件。所以一個大物件可以由多個不同的小物件所組
成的概念一般。
• 小物件被包含在大物件之中, 因此屬於小物件的所有資料
定義與可使用的函式, 大物件也同樣可以使用, 這就是繼
承(Inheritance)的概念。
7
![Page 8: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/8.jpg)
物件導向程式設計 (續)
• 繼承(Inheritance)的概念, 可以從類別的角度來看, 在類別
之中, 可以包含子類別。子類別是父類別的具體化, 表示
子類別包含更多屬性來描述物件的更多性質。
• 因此, 從汽車的例子來看, 汽車類別是輪胎類別的子類別。
輪胎類別的所有屬性, 汽車類別都繼承了。除此, 汽車類
別還包括其他屬性, 或定義於方向盤類別中的屬性。
• 因為汽車是由輪胎與其他物件所組成的, 所以輪胎類別是
父類別, 汽車類別是子類別。
8
![Page 9: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/9.jpg)
視覺化元件
9
• C++ Builder 提供許多視覺化元件 ( Visual Component ) 可
供使用者運用於開發視窗應用程式。
• 這些元件就如同物件導向程式設計 (OOP)概念中的物件
一樣, 每個元件都有定義一些特定的屬性 (Properties), 用
來描述元件的基本性質。
• 除此, 針對各個元件型態 (就是 OOP中的類別 ), C++
Builder 也準備了一些功能強大的函式 (Functions) 方便使
用者呼叫。
![Page 10: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/10.jpg)
視覺化元件函式庫
10
• 所有元件型態所定義的函式的集合, 稱為視覺化元件函式
庫 ( Visual Component Library, VCL )。
• 這些函式在早期被稱為方法(Method), 與 OOP所使用的名
稱一致。但在最新版本的 Help 文章中, 則是直接用函式
(Function) 稱呼。
• 要檢視各個元件型態有什麼函式可以使用, 只要在 Help
中搜尋該元件型態, 即可看到所有 Functions的列表。
例如: 搜尋 TPicture元件型態, 可以看到共 18個可使用函
式。
![Page 11: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/11.jpg)
11
vcl.h標頭檔涵蓋了所有 VCL函式庫的宣告,
檢視在 Unit1.cpp 檔案的第一行指令, 可以發現
#include <vcl.h>
因此, 編譯器(Compiler)就可以認得所有 VCL的函式呼叫了。
![Page 12: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/12.jpg)
視窗 (Windows) 程式設計
• 傳統應用程式執行方式是從頭一行指令接著一行指令地
執行。
• 視窗應用程式則是採用事件驅動程式設計 (Event-driven
programming)的模式進行開發。程式的執行流程是由使
用者所觸發的事件來驅動對應程式碼之執行, 執行完畢之
後, 又繼續等待使用者觸發下一個事件。
• 每個事件所對應的程式碼, 稱為事件處理程序(Event
Handler)。
12
![Page 13: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/13.jpg)
視窗 (Windows) 程式設計 (續)
• 視窗應用程式的開發, 可分成下列兩項主要的工作:
– 設計執行畫面 (Form Design):
規劃執行畫面需要放入那些視覺化元件
– 撰寫事件處理程序 (Event handler Programming):
針對不同元件, 使用者所觸發的不同事件, 撰寫不同的處理程式
13
![Page 14: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/14.jpg)
C++ Builder 程式設計
• C++ Builder 兩項主要工作的環境如下:
– 設計執行畫面 (Form Design):
1. 視覺化元件分門別類地存放於工具盤 (Tool Palette)之中,
使用者可將所需的元件直接拖曳到畫面之中,
再透過元件檢視器(Object Inspector) 修改屬性(Properties)與
設定事件處理程序(Event Handler)。
2. 畫面設計內容則會儲存於 Unit1.dfm檔案之中,
元件宣告指令會自動產生, 並儲存於 Unit1.h檔案之中。
14
![Page 15: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/15.jpg)
C++ Builder 程式設計 (續)
• C++ Builder 兩項主要工作的環境如下 (續) :
– 撰寫事件處理程序 (Event Handler)
1. 從元件檢視器選擇特定的元件後, 進入事件分頁中, 透過雙擊特
定事件, C++ Builder 會轉換成事件處理程序撰寫模式, 使用者即
可進入所對應的事件處理程序中撰寫程式碼。
2. 所撰寫的程式碼會儲存於 Unit1.cpp檔案之中。
3. 事件處理程序的宣告、名稱與、傳遞參數宣告..等, 均由 C++
Builder 自動產生, 使用者只需在 { }中寫入程式碼即可。若不需
要自動產生的內容, 使用者不可以自行刪去, 否則會產生連結錯
誤 (Link Error)。
15
![Page 16: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/16.jpg)
C++ Builder 整合開發環境
1. 開啟一個 VCL Form 應用專案
2. 元件檢視器 (Object Inspector)
3. 工具盤 (Tool Palette)
4. 撰寫事件處理程序 (Event Handler Programming)
5. 儲存單元 (Save Unit)
6. 儲存專案 (Save Project)
16
![Page 17: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/17.jpg)
開啟一個 VCL Form 應用專案進入 C++ Builder XE2 的整合開發環境 (IDE)後,
要開始寫一個全新的應用程式,
可以從功能列中選擇 File | New | VCL Forms Application,
開啟一個 VCL Form 應用開發專案(Project)
17
![Page 18: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/18.jpg)
畫面 (Form)
18
當你新開啟了一個開發專案 (Project) 後,
C++ Builder 就會幫你產生一個名稱暫定為 Form1 的一個畫面元件,
Form1 也是未來程式執行時, 使用者會看到的畫面。
使用者便可以開始進行執行畫面的設計工作。
![Page 19: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/19.jpg)
畫面 (Form) (續)
19
一個專案可以由許多畫面組成。
應用程式執行時, 何時該顯示哪一個畫面, 都可以透過指令來控制。
一個專案之中, 至少需要有一個畫面。
![Page 20: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/20.jpg)
畫面 (Form) (續)
20
基本上, Form1 也是一個元件 (Object),
其屬性 (Property)除了名稱 (Name) 之外,
還有寬 (Width)、高 (Height)…等相關屬性可以供使用者設定。
使用者可以直接拖曳 Form1 外圍的小點來改變 Form1 的大小,
也可以透過元件檢視器 (Object Inspector) 來更改大小。
小點
![Page 21: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/21.jpg)
元件檢視器 (Object Inspector)元件檢視器可以針對所選定的元件, 檢視該元件的相關內容。
元件檢視器通常會被放置於
C++ Builder 開發環境的右下方,
使用者也可以自行更改位置。
當使用者找不到元件檢視器時,
可以用滑鼠點選功能列
View | Object Inspector
或直接按功能鍵 F11,
即可呼叫出右圖的元件檢視器。
21
![Page 22: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/22.jpg)
元件檢視器 (Object Inspector) (續)元件檢視器的內容分成以下兩個分頁:
• 屬性 (Properties)
列出該物件的各項屬性, 使用者可
以直接在此設定或修改屬性值,
修改完成後,該元件在畫面 (Form)
上的外觀也會直接跟著修正。
• 事件 (Events)
記錄該元件可能發生的所有事件
與其對應的事件處理程序 (Event Handler)
22
![Page 23: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/23.jpg)
元件檢視器 (Object Inspector) (續)
23
選擇欲檢視的元件
屬性(Properties)分頁
事件(Events)分頁
色彩屬性(Properties Color)
![Page 24: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/24.jpg)
24
在元件檢視器中,
將 Form1的 Color Property設定為淺綠色 (A2FFA2),
可以發現 Form1的顏色修改為淺綠色。
![Page 25: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/25.jpg)
執行畫面
25
Form1 的 Color Property 設定為淺綠色後,
雖然目前畫面沒有加入任何元件, 也沒有撰寫任何的程式,
依然可以使用功能列 Run | Run without Debugging 來執行程式。
下圖為執行畫面, 也變成綠色的畫面了。
畫面左上角的文字為 Form1 元件 Caption Property 的內容,
使用者也可以透過元件檢視器更改顯示的內容。
![Page 26: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/26.jpg)
26
在元件檢視器的 Events分頁中,
雙擊 OnClick 右邊的欄位, C++ Builder 會自動
切換到 Unit1.cpp 檔案的事件處理程序之撰寫
模式, 程序的名稱與傳入參數的宣告已經自動
設定完成,使用者無需自己設定,相當方便。
我們在程序中輸入一行指令
ShowMessage(“You Click the Form1!”);
然後就可以試著執行程式!
![Page 27: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/27.jpg)
27
在專案執行所顯示的綠色畫面上用滑鼠點擊一下,
就會顯示一個小視窗,內含一段訊息 “You Click the Form1!”,
按下 OK按鈕,訊息視窗就會消失!
![Page 28: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/28.jpg)
工具盤 Tool Palette
28
使用者在設計執行畫面時, 可以從右下角的工具盤 (Tool Palette)
中選擇各種元件, 將其拖曳進入畫面中。
C++ Builder XE2 的工具盤 (Tool Palette),
其實是從之前版本中的
元件盤 (Component Palette)改名而來。
由於工具盤上的元件非常多,
為方便使用者尋找,
所有的元件都特別經過分類,
右圖顯示各個分類。
![Page 29: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/29.jpg)
工具盤 Tool Palette (續)
29
點擊各個分類, 就可以將該分類展開, 使用者就可以檢視該分類
所有的元件型態, 例如:
TMainMenu為主功能表元件型態。
當使用者找到所需的元件型態之後,
就可以直接將該元件型態拖曳到畫面上,
C++ Builder 就會在畫面上建立該元件。
右圖是將 Standard類別點擊展開,
所看到的元件型態。
![Page 30: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/30.jpg)
30
在工具盤中的 Standard 分類中,
拖曳 TMainMenu元件型態到 Form1 之中。
C++ Builder 就會在 Form1 上產生一個名稱暫定
為MainMenu1 的 TMainMenu元件。
![Page 31: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/31.jpg)
雙擊MainMenu1 元件就會出現主功能表設定視窗,
使用者就可以開始設定功能表上要有哪些項目。
31
![Page 32: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/32.jpg)
同時, 在元件檢視器中也會自動新增一個未命名的
TMenuItem元件, 只要在 TMenuItem的Caption
Property 中輸入文字, 該文字就會出現在功能表項
目上顯示出來, Name Property也會自動完成設定。32
Caption 輸入 File
Name 自動設定為 File1
![Page 33: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/33.jpg)
接著, 選定 File 功能列下層方塊, 元件檢視器也會再度自動新增一個
未命名的 TMenuItem元件, 同樣在Caption Property 中輸入文字 Open,
該文字就會出現在 File 功能列的下層, Name Property也會自動設定
為 Open1。33
![Page 34: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/34.jpg)
如果想要在某個功能表項目(TMenuItem)下建立子功能項目,
可以在選定該功能表項目時 (如上圖呈藍色狀態下)按下滑鼠右鍵,
就會出現該功能表項目的快捷功能表單,
只要選擇 Create Submenu 即可建立子功能表項目。34
![Page 35: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/35.jpg)
35
同樣地, 用滑鼠選擇所建立的子功能項目,並在其所對應之 TMenuItem
的 Caption Property輸入 Image 文字, 就會建立名稱為 Image1 的功能項
目 TMenuItem。如上圖所顯示已經完成建立子功能表項目了。
接著來, 就可以試著執行程式, 檢查所建立的功能表項目是否正確 !
![Page 36: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/36.jpg)
執行畫面
36
Form1 上已經建立一個主功能元件,
主功能表只有一個 File 功能列,
File 功能列中只有一個 Open 功能項目,
Open 功能項目下, 有建立一個 Image 子功能項目。
![Page 37: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/37.jpg)
撰寫事件處理程序
37
範例
在Form1 放置一個影像元件 TImage,
然後透過開啟影像對話盒元件 TOpenPictureDialog,
讓使用者可以在電腦的檔案夾中選擇要開啟的影像檔案,
並將影像顯示在Form1 上。
(缺執行結果圖)
![Page 38: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/38.jpg)
撰寫事件處理程序 (續)
38
撰寫事件處理程序時, 本範例將會呼叫 2 個 VCL函式:
1. TOpenPictureDialog::Execute();
(元件類別 ::函式名稱 (傳入參數宣告 ) )
Execute() 函式會開啟影像選擇對話盒元件 OpenPictureDialog,
讓使用者選擇要開啟的影像檔案。
當使用者選定影像後, 所選之路徑與檔案名稱將會儲存於影像選擇
對話盒元件的 Property Filename之中, 並傳回布林值 true ;
當使用者在對話盒中按下 Cancle,則傳回布林值 false。
![Page 39: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/39.jpg)
撰寫事件處理程序 (續)
39
2. TPicture::LoadFromFile(const System::UnicodeString Filename);
函式 LoadFromFile的傳入參數為所欲開啟的檔案名稱 (Filename),
此函數會將影像內容讀取到 TPicture元件之中。
讀取影像的方式會依照 TPicture元件中相關屬性所設定方式,
並同時將影像的相關性質, 如寬(Width)、高(Height)、影像類型
(PixelFormat)…等, 自動設定到 TPicture元件的相對應屬性之中。
![Page 40: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/40.jpg)
40
首先, 從設計執行畫面開始示範。
在工具盤中點擊 Additional 分類,
找到 TImage元件型態, 並將其拖曳到 Form1。
C++ Builder 會建立一個 TImage影像型態的影像
元件, 並自動命名為 Image2。
(因為名稱 Image1 被 TMenuItem元件用過了! )
![Page 41: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/41.jpg)
41
接著, 在工具盤中點擊 Dialogs 分類,
找到 TOpenPictureDialog元件型態,
並將其拖曳到 Form1。
![Page 42: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/42.jpg)
42
雙擊MainMenu1 主功能表, 開啟主功能表設定
視窗, 從主功能表往下尋找, File | Open | Image,
選取之前所設定過的 TMenuItem元件 Image1,
雙擊該元件即可進入事件處理程序 Image1Click
的程式碼編寫模式。
![Page 43: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/43.jpg)
43
事件處理程序 Image1Click 的名稱是由 C++ Builder 所設定的, 使用
者若是不熟悉命名方式, 建議最好不要自行更改, 否則會引發連結
錯誤(Link Error)。
Image1 是TMenuItem物件的名稱, Click 則是當 Image1 物件發生
Click 事件, 所以事件處理程序 Image1Click名稱所代表的意義就是
當 Image1物件發生 Click 事件所要執行的程式碼。
Image1Click名稱也會同時出現在 Unit1.h 標頭檔的宣告之中及物
件檢視器的 Image1 元件的事件分頁之中。
![Page 44: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/44.jpg)
44
事件處理程序 Image1Click 的名稱
![Page 45: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/45.jpg)
45
在事件處理程序 Image1Click的 { }中, 輸入
OpenPictureDialog1->Execute();
所代表的意思是當使用者點擊 Image1 這個功能表選項元件時,
就會執行開啟 OpenPictureDialog1 這個對話盒, 讓使用者選擇所要
使用的影像檔。
![Page 46: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/46.jpg)
46
執行時, 所開啟的 OpenPictureDialog1 對話盒。當使用者選擇一張影像後,
按下 [開啟舊檔(O) ], 檔案的路徑與檔名會被存入 OpenPictureDialog1元
件的 Property Filename , 並傳回布林值 true。
若使用者按下 [取消 ],則傳回布林值 false。
![Page 47: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/47.jpg)
47
由於 OpenPictureDialog1->Execute()會傳回一個布林值,
因此, 可以將其放進 if 指令的條件式之中,
讓程式可以自動判斷使用者是否已經選擇檔案,
若是傳回 true, 代表路徑與檔名已經存在 OpenPictureDialog1的
Property Filename 之中, 就可以使用 TPicture元件型態的
函式 LoadFromFile將影像讀進來。
Execute() 函式若傳回 false, 則不需執行 LoadFromFile函式。
注意! C++ Builder 教育版 LoadFromFile只支援讀取 bmp 影像檔!
![Page 48: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/48.jpg)
48
影像內容已經顯示在影像元件 Image2 之中了。
觀察影像內容, 似乎只有顯示出影像的左上角部分影像而已。
因為影像檔案中的影像大小比影像元件的大小還要大,
導致只能顯示出部分影像。
![Page 49: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/49.jpg)
49
從物件檢視器中, 將影像元件 Image2 的 Property
AutoSize設定為 True 後, Image2 元件的寬
( Property Width ) 與高 ( Property Height ) 兩項屬
性, 就會自動隨著所要讀取的影像的寬高值調整。
如此, 影像就可以完整顯示出來。
![Page 50: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/50.jpg)
50
影像元件 Image2 的 Property AutoSize設定為 True 之後,
在執行時, 影像內容已經可以完整地顯示在Form1 之中了。
![Page 51: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/51.jpg)
影像元件型態 TImage
• Property Picture是 TImage影像元件中最重要的一個屬性。
Picture 本身就是一個物件, 就是用來存放影像內容的物件。
• TPicture物件包含一個 Bitmap物件, 影像像素的色彩值就
是一個像素(Pixel) 接著一個像素存放在 Bitmap物件之中。
• TBitmap元件屬性包含一個 Property ScanLine的陣列資料。
ScanLine[j] 之中所存放的資料, 就是指向第 j 橫列像素色彩
資料的記憶體起始位址。
• 透過存在 Property ScanLine陣列中的記憶體指標就可以直
接從記憶體中存取影像元件的色彩值。
51
![Page 52: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/52.jpg)
52
接下來, 請同學依照前面所提的方法,
建立上圖MainMenu中 Image |Adjustments | Inverse 功能列。
然後, 雙擊 Inverse 功能項目, 進入事件處理程序的撰寫模式。
![Page 53: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/53.jpg)
53
在 Inverse1 功能項目的Click事件處理程序中撰寫上述程式碼,
雙層迴圈的離開判斷分別為影像的高與寬。影像被載入之後,
先將其值放於兩個變數 iImageHeight與 iImageWidth, 方便使用。
![Page 54: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/54.jpg)
54
影像處理程式常需要由上而下、由左而右地,
把影像中每一個像素都用同樣的方式處理,
因此, 可用雙層迴圈來控制。
外層迴圈控制由上而下每一橫列都會被處理,
透過 ScanLine[j] 就可以取得每一橫列的起始位址。
![Page 55: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/55.jpg)
55
內層迴圈控制由左而右每一像素都會被處理,
由於每一個像素都用 3個位元組來分別表示藍、綠、紅的色彩值,
因此, 可以再用一個 for 迴圈來分別處理三個色彩值。
因為 Inverse是要將影像做成底片模樣, 只要將色彩值改成互補的
顏色值再存回即可, 如下程式:
bPtrImageRow[3*i+k] = 255 - bPtrImageRow[3*i+k];
![Page 56: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/56.jpg)
56
由於記憶體中的色彩值已經被修改了,
必須重新請電腦依照記憶體的狀況繪製 Image ,
所以使用 TImage的函式 Refresh() 重繪影像外觀。
最後, 程式中所使用的變數, 都必須再 Unit1.h 中宣告,
請切換到 Unit1. h 分頁中宣告公用變數。
![Page 57: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/57.jpg)
57
切換到 Unit1.h 分頁上宣告變數
用來宣告在Unit1.cpp中
會使用到的變數之區域
Form1中所有的元件與
使用到的函式都會自動
在此區域宣告
宣告在其他程式中會使
用到的公共變數之區域
![Page 58: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/58.jpg)
58
Inverse功能是將影像做成底片模樣!
![Page 59: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/59.jpg)
儲存單元 (Save Unit)
• 完成畫面的設計與事件處理程式的撰寫之後,使用者可以將
所完成的開發內容暫時儲存起來。儲存之前, 使用者必須
了解 C++ Builder 將如何儲存自己所完成的開發內容, 否則
很容易發生自己的心血付諸東流的慘事。
• 使用者所開發的內容被 C++ Builder 儲存在三個不同的檔案
之中, 分別是 Unit1.dfm、 Unit1.h、Unit1.cpp。
• 因此, 每一個單元(Unit)均包含上述三個檔案。
• 一個專案最少需要一個單元。當然, 也可以有多個單元。
59
![Page 60: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/60.jpg)
Unit1.dfm
• 副檔名為 dfm, 內容為所設計的
Form1及在 Form上的所有元件
之描述。
• 用記事本開啟 Unit1.dfm, 即可看
到 C++ Builder 是如何描述的。
• 當我們開啟一個舊的專案時,
C++ Builder 就是根據此描述內容,
然後將 Form 顯示出來。
60物件(Object) 之內容描述
![Page 61: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/61.jpg)
Unit1.h
• 副檔名為 h, 表示為一個 C 語言的標頭檔(header file)。
• 每一個 Form 都會搭配一個標頭檔。
• Unit1.h 的內容涵蓋:
– 在 Form1 上所出現的元件的宣告相關指令、
– 各個元件所使用到的事件處理程序的宣告、
– 使用者自行宣告, 在 Form1 中使用的變數、
– 使用者自行宣告, 準備給其他 Form也可以使用的公用變數。
• 在 Unit1.cpp中, 可以找到一行 #include "Unit1.h" 的指令。
• 在程式撰寫模式下, 切換到 Unit1.h 分頁, 即可直接編輯。
61
![Page 62: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/62.jpg)
Unit1.cpp
• 副檔名 cpp即為 C++之意, 類型為 C++ Source File,
即所撰寫的程式原始碼。
• 檔案內容就是所有撰寫的事件處理程序。
• 在程式撰寫模式下, 切換到 Unit1.cpp 分頁,
即可直接編輯。
62
![Page 63: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/63.jpg)
63
Save 與 Save As… 都是針對單元的儲存
每次儲存都會同時儲存單元的三個檔案:
Unit1.dfm、Unit1.cpp 與 Unit1.h。
![Page 64: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/64.jpg)
儲存專案(Save Project)
• 除了單元必須儲存之外, 應用程式專案也要儲存。
• 專案內容被 C++ Builder 儲存在三個不同的檔案之中, 分別
是 Project1.cbproj、Project1.cbproj.local 、 Project1.cpp 。
• 從功能表中選取 File | Save Project As… 就可以將專案的內
容儲存起來。
64
![Page 65: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/65.jpg)
儲存專案(Save Project) (續)
• Project1.cbproj
副檔名cbproj是 C++ Builder 的 Project File,
內容是關於整個專案內容的描述。
• Project1.cbproj.local
副檔名是 cbproj的後面加加上 .local, 用記事本打開看,
可以看到專案儲存在這台電腦 (local) 的相關目錄。
• Project1.cpp
副檔名是 cpp, 也是整個專案能夠在視窗環境下執行
C++ 語言指令的相關部分。
65
![Page 66: C++ Builder Basic](https://reader031.vdocuments.mx/reader031/viewer/2022020106/55ac80021a28ab97258b4599/html5/thumbnails/66.jpg)
66
Save Project As… 是針對專案的儲存
每次儲存都會同時儲存專案的
Project1.cbproj、Project1.cbproj.local 與
Project1.cpp等三個檔案。