2015年11月18日 星期三

Lazarus 系列–3. Canvas 的使用

這一集用一個小程式來示範 Canvas 的使用,這個程式很簡單,就是用來模擬一種玩具「萬花尺

基本上,就是依據不同的參數畫出以下函數的圖形:

x := r1 * cos(θ * t1) + r2 * cos(θ * t2)
y := r1 * sin(θ * t1) + r2 * sin(θ * t2)

r1 = 大圓半徑,r2 = 小圓半徑
t1 = 大圓轉圈的速度,r2 = 小圓轉圈的速度

底下是幾個輸出的範例圖形

001

002

原始程式碼 在這裡下載,請大家自己研究一下囉

2015年11月4日 星期三

Lazarus 系列–2. 視窗畫面的佈局

Lazarus LCL 元件組的佈局,跟 VCL 很相似。為什麼說「很相似」呢?是 Lazarus 的 LCL 元件提供比 VCL 還要多,可以更方便的做好畫面的佈局。

 

一、Align 屬性:這個屬性指定了元件在 parent 中「怎麼靠邊」有以下幾種:

  • alTop:往上靠
  • alBottom:往下靠
  • alLeft: 往左靠
  • alRight:往右靠
  • alClient:填滿中間
  • alNone:都不靠
  • alCustom:這個不明白他怎麼靠,反正不是靠北靠木就是了 (VCL 沒有這個)

  來張圖就更清楚了 (為了方便看清楚 panel 的邊界,把每一個 panel 的 BevelWidth 屬性設定為 5)
2015-11-04_075758

  善用 Align 屬性可以很方便的給畫面佈局「切版」。

 

二、Anchors 屬性:Anchor 就是船錨,這個屬性用來指定元件在 parent 中「哪幾個邊要與 parent 同方向的邊保持固定距離」(以下稱為設定錨點),有以下幾種,均可以分別開啟與關閉:

  • akTop:上方保持固定距離,預設開啟
  • akBottom:下方保持固定距離
  • akLeft:左方保持固定距離,預設開啟
  • akRight:右方保持固定距離

來兩張圖示範一下效果

Panel1 把四個 Anchors 屬性都打開了,然後把 form 拉大,Panel1 的四個邊界依然與 form 的邊界保持固定距離。

2015-11-04_082421

2015-11-04_082852

Lazarus 的 Anchors 屬性除了把錨點設定在 parent 上以外,還可以把錨點設定在不是 parent 的元件上,還可以設定錨定時如何對齊,錨定時要留多少距離

2015-11-04_203829

這是 LCL 的錨點設定視窗,可以看到每一個方向都有 4 個設定項目:

  • Enabled:是否開啟這個方向的錨點
  • Sibling:我的兄弟是誰,就是我要跟誰錨定
  • 三個按鈕:如何對齊,有「對齊邊界」「依序排列」「對齊中線」三種
  • Border space:對齊邊界或是依序排列時要空出多少寬度

打個比方,將 Edit1 做如下的錨點設定之後,移動 Label1 時,Edit1 就會跟著移動:

2015-11-04_204701

Edit1 的上邊界與 Label1 錨定,對齊中線,同時左方也與 Lable1 錨定,依序排列,中間間隔 5px,這樣設定的結果如下圖:

2015-11-04_204911

把 Label1 抓著移動時,Edit1 會跟著移動,但是 Edit1 就無法被抓著移動了:

2015-11-04_204926

 

三、ChildSizing 屬性,這是容器元件才有的屬性,用來規範自己內部的元件要如何排列

2015-11-04_205231

  • ControlsPerLine:一列要排幾個元件
  • EnlargeHorizontal:自己被拉寬時,內部元件的寬度要如何變化
  • EnlargeVertival:自己被拉高時,內部元件的高度要如何變化
  • HorizontalSpacing:內部元件的水平間距
  • Layout:要怎麼排列內部元件
  • LeftRightSpacing:排列時,左右要空多少不拿來排列內部元件,就相當於 CSS 的 padding-left 與 padding-right
  • ShrinkHorizontal:自己被拉窄時,內部元件的寬度要如何變化
  • ShrinkVertival:自己被拉矮時,內部元件的高度要如何變化
  • TopBottomSpacing:排列時,上下要空多少不拿來排列內部元件,就相當於 CSS 的 padding-top 與 padding-bottom
  • HorizontalSpacing:內部元件的垂直間距

拿兩張圖來示範一下排列前與排列後,隨意擺放幾個元件,準備來排列

2015-11-04_205845

接下來,設定 Form1 的 ChilldSizing 屬性以及這些元件的 Z-Order 如下:
(設定 Z-Order 可以在 form 上選擇一個元件,然後使用 Ctrl-PgUp 與 Ctrl-PgDn 這兩個熱鍵來調整)

2015-11-04_210238

2015-11-04_210252

然後,這些元件就排列好了:

2015-11-04_210629

將 form 改變大小試試:

2015-11-04_210733

2015-11-04_210741

很方便,對吧!
可惜有一點,一個元件固定佔用一個「格子」,沒辦法跨列、跨欄,不過已經非常方便了!

這一篇就講到這裡,我們下期再見!

2015年11月1日 星期日

Lazarus 系列–1. 環境簡介

Lazarus 是一個 Open Source、跨平台的 Free Pascal 整合開發環境,可以稱得上是 Delphi 的 open source 替代品。詳細的歷程就請大家自行前往 Wiki官網 收看,這裡就不再多說了。

這一篇是介紹 Lazarus 的安裝與開發環境的巡覽

 

一、安裝

官網的下載頁 依據您的環境下載適當的版本,在 Windows 上安裝很簡單,就是下一步下一步而已,Linux 的使用者可能就稍微複雜一點,不同的發行版的安裝方式可能會有些不同。

安裝完成之後,首次執行會檢查必要的組件是否安裝,Windows 版本就不用煩惱,一定是全部都安裝好的,Linux 版本就要看一下了,可能要補安裝一些必要組件

 

二、開發環境巡覽

2015-11-01_214911

看到這個畫面,用過老版本 Delphi (D7及以前) 的人一定感到很親切,幾乎是一模一樣的嘛!接下來一個個視窗來說明

  1. 主功能表、工具列與元件盤
  2. 物件檢視器 Object Inspector
    顯示及修改目前選取到的物件的屬性、事件
  3. 專案檢視器 Project Inspector
    顯示專案的結構
  4. 程式碼編輯器 Source Editor
    這裡當然就是編輯程式碼的地方
  5. 訊息視窗 Messages
    顯示編譯輸出、錯誤訊息的地方
  6. 畫面設計視窗
    用拖拉方式來設計畫面的地方

看起來跟老版本 Delphi 幾乎都一樣,是吧!接下來說說跟 Delphi 不一樣的地方

  1. 可以編譯出 x86 與 x64 的應用程式,不過得安裝兩套,而且必須安裝在不同的目錄
  2. 原生支援 Unicode
  3. 程式碼編輯器採用的是 SynEdit 元件,比起 Delphi 的程式碼編輯器有蠻大的進步
  4. 程式碼的副檔名不同 dpr –> lpr、dfm –> lfm,故無法直接開 Delphi 的程式來編譯,必須經過轉換
  5. 熱鍵可以更改,也就是 Ctrl-Space 這個最常用的熱鍵可以改成別的,我個人是改成 Alt-Right (與 Visual Studio 相同)
  6. VCL 元件不是 100% 對應過來的,有些元件在 Lazarus 沒有,反之亦然
  7. 資料庫存取相關元件方面,沒有 BDE、ADO、dbExpress、FireDAC,也沒有 DataSnap,Lazarus 有一套自己的,叫做 SQLdb,支援的資料庫有 MSSQL、Sybase、MySQL、PostgreSQL、Firebird (Interbase)、Oracle、ODBC 和 SQLite,市面上常見的可以說都支援了。
  8. 對於檔案型資料庫的支援有 DBF、CSV、SDF(沒用過這個)、以及固定長度格式
  9. 安裝 package 必須重新編譯 Lazarus 開發環境
  10. 市面上的 3rd party 元件組,通常在 Lazarus 上不可用
  11. 其他還有很多,就請大家自己去發現了!

總之,要拿 Lazarus 來寫一些自己用的小程式,是完全可行的。如果要拿來寫商用軟體,則需要很大的努力,如果抱著「為什麼 Delphi 可以 Lazarus 不行」這樣的心態來對待 Lazarus,那就直接用 Delphi 就好了,不是嗎?

 

附記一:程式碼編輯器在 Linux 環境無法輸入中文的臨時解決方法

程式碼編輯器在 Linux 環境無法輸入中文,有一個勉強還可以接受的方法是按 Ctrl-Alt-T 熱鍵插入「ToDo」,輸入完之後再把
{ TODO : } 刪除掉
2015-11-01_220005

按下 OK 之後,就成了這樣
2015-11-01_220042