第十三章 繪　圖 13-1 繪圖方法 13-2 繪圖屬性 13-3 綜合範例

相信很多人都有使用PhotoImpact、PhotoShop或Windows小畫家的經驗， 您要繪製直線、圓、扇形、多邊形、或輸入文字等，都是線上操作完成，這些操作的背後都由許多函式堆積而成。其次，由於軟體技術的進步，這些函式也陸陸續續物件化，而以屬性、方法或事件的方式公開，程式設計者可以經由簡單的設定而完成類似小畫家的簡單繪圖程式。請看本章介紹即可完成一個小畫家程式。

13-1 繪圖方法 Delphi所提供的繪圖方法如下，這些方法都隸屬於Canvas物件，而Form、Image、BitMap及PaintBox等元件均可使用Canvas物件 方　　法 說　　明 語　　　法 TextOut 顯示字串 TextOut（x, y, str） MoveTo 移動位置 MoveTo（x, y） LineTo 線段 LineTo（x, y） Rectangle 矩形 Rectangle（x1, y1, x2, y2） RoundRect 圓角矩形 RoudRect（x1, y1, x2, y2, x3, y3） Ellipse 橢圓 Ellipse（x1, y1, x2, y2） Arc 弧形 Arc（x1, y1, x2, y2, x3, y3, x4, y4） Chord 繪製圓弧與弦線 Chord（x1, y1, x2, y2, x3, y3, x4, y4） Pie 扇形 Pie（x1, y1, x2, y2, x3, y3, x4, y4） Polyline 多邊形 Polyline（p, n） Polygon 封閉多邊形 Polygon（p, n） PolyBezier 貝茲曲線 PolyBezier（Slice(p, 4)） FloodFill 填滿 FloodFill（x, y, color, FillStyle）

例如，以下程式片段可於Image1物件的（10, 10）與（100, 100）之間繪一條直線。 x1 = 10; y1 = 10; x2 = 100; y2 = 100; Image1.Canvas.MoveTo（x1, y1）; Image1.Canvas.LineTo（x2, y2）; 以下程式片段可於（10, 10）與（100, 100）之間繪一矩形。 Image1.Canvas.Rectangle（10, 10, 100, 100）; 以下程式片段可於（10, 10）與（100, 100）之間繪一圓，圓心在（55, 55）。 Image1.Canvas.Ellipse（10, 10, 100, 100）;

範例13-1a 請參考小畫家繪製直線的操作方式，並寫程式完成。 小畫家繪製直線的方法如下： 1 按一下“直線”圖項。 2 移滑鼠至直線起點。 3 拖曳直線的位置，電腦亦全程展示拖曳的過程。 4 放開滑鼠左鍵時，即可完成直線的繪製。 5 若要繼續本條直線的繪製，則繼續往直線的第3點拖曳即可。 程式說明: 1. 本例使用兩個旗號，分別是md與mm。md用於記錄滑鼠左鍵是否按下，mm用於記錄按下之後是否繼續移動。 2. 按一下“開始”鍵時，md、mm分別設為0。 3. 按下左鍵時，代表當時的左鍵位置為繪圖起點，可於MouseDown事件設定md = 1，及記錄繪圖起點於x1，y1。 4. 按住左鍵移動滑鼠時，開始繪製直線，此直線從（x1, y1）到（X, Y），並設定mm = 1，xOld = X，yOld = Y。 5. 在使用者尚未放開左鍵時，每一點的移動都要先刪除剛剛的一條直線（x1, y1）到（xOld, yOld），且畫上一條新線（x1, y1）到（X, Y）。 6. 放開左鍵時，代表完成一條直線的繪製，並設定md = 0，mm = 0，x1 = X，y1 = Y，繼續下一條直線的繪製。

範例13-1b 示範矩形的繪製。

範例13-1c 同上範例，分別安排三個按鈕，可分別繪製矩形、橢圓或圓角矩形。

範例13-1d 示範弧形的繪製。 弧形、弦線及扇形的繪製，均是先拖曳一個矩形，如下圖左。接著，分別點一下（x3, y3）及（x4, y4）的位置，電腦即會以圓心與（x3, y3）的直線與矩形的交點為弧起點逆時針繪弧，弧終點為圓心與（x4, y4）的直線與矩形的交點，如下圖右。

範例13-1e 示範弦線與扇形的繪製。 弦線與扇形的操作同弧形，均是先拖曳一個矩形，再點選（x3, y3）及（x4, y4），下圖左是弦線，下圖右是扇形。

範例13-1f 示範多邊形（Polyline）與實心多邊形（Polygon）的繪製。

範例13-1g 示範貝茲曲線的基本繪製。

範例13-1h 示範貝茲曲線的繪製。

13-2 繪圖屬性 上一節都是介紹繪圖的方法，你已經可以繪製直線、矩形、貝茲曲線或輸出字串，本節則要介紹如何設定構成幾何圖形的線條樣式、線條顏色、寬度、如何填滿封閉多邊形、及如何設定輸出字串的字型。

下表是Canvas物件的常用屬性，設定以下屬性即可解決以上問題。 子屬性 說 明 Pen Width 線條寬度。例如，以下敘述可設定線條寬度為2。 Canvas.Pen.Width := 2 ; Color 線條顏色。例如，以下敘述可設定線條顏色為藍色。 Canvas.Pen.Color: = ClBlue ; Style 線條樣式。共有以下6種樣式： psSolid psClear psDash psDot psDashDot psDashDotDot 以下敘述可設定線條樣式為點線 Canvas.Pen.Style: = psDot;

Brush Style 設定封閉區域的彩繪樣式，共有以下8種樣式： bsSolid bsClear bsHorizontal bsVertical bsFDiagonal bsBDiagonal bsCross bsDiaCross 以下敘述可以設定以垂直線填滿封閉區域。 Canvas.Brush.Style := bsVertical;

Pixels 傳回或設定某點的顏色。例如，以下敘述可設定座標（x, y）的顏色為紫色。 Canvas.Pixel[x][y]: = clPurple ; Font Name 字型名稱。例如，以下敘述可設定使用標楷體。 Canvas.Fon.Name: =“標楷體”; Size 字型大小。例如，以下敘述可設定字型大小為12。 Canvas.Fon.Size := 12; Color 字型顏色。例如，以下敘述可設定字型顏色為海藍色。 Canvas.Font.Color := ClNavy;

範例13-2a 線條寬度、樣式及顏色示範。

13-3 綜合範例

範例13-3a 試設計一個動畫，其軌跡為圓。 題目分析: 1. 圓的參數方程式為： x = r cosθ y = r sinθ 1. 圓的參數方程式為： x = r cosθ y = r sinθ 2. Delphi中任何可繪圖的物件，原點（0, 0）均在物件的左上角，x座標向右為正，y座標向下為正。所以，若要將原點平移至表單的中心，應加一個平移量（x0, y0）。而本例（x0, y0）分別為表單寬與高的一半。

範例13-3b 同上範例，但軌跡方程式為極座標的r=5θ。

範例13-3c 示範圖形的旋轉。

範例13-3d 示範圖形的比對。 補充說明: 本例亦適用印章、指紋的比對，但以上圖形都不是蓋得很正，所以應適當的平移與旋轉後再繼續比對。

習題 請參考小畫家，逐一完成其功能。