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

1 4 - 1 繪圖方法 BCB 所提供的繪圖方法如下, 這些方法都隸屬於Canvas 物件, 而Form、Image 、BitMap 及PaintBox 等元件均可使用Canvas 物件。

以下程式片段可於Image1 元件的(10, 10)處, 印出字串"Welcome", 如下圖。 Image1->Canvas->TextOut(10, 10, "Welcome") ;

以下程式片段可於Image1 元件的(10, 10)與(100, 100)之間繪製一條直線(LineTo), 如下圖。 x1 = 10 ; y1 = 10 ; x2 = 100 ; y2 = 100 ; Image1->Canvas->MoveTo(x1, y1) ; Image1->Canvas->LineTo(x2, y2) ;

以下程式片段可於(20, 20)與(200, 100)之間繪製一矩形(Rectangle), 如下圖。 Image1->Canvas->Rectangle(20, 20, 200, 100) ; Image1->Canvas->TextOut(10, 10, "(20, 20)") ; Image1->Canvas->TextOut(200, 100, "(200, 100)") ;

以下程式片段可於(20, 20)與(200, 100)之間繪製一圓角矩形(Round Rect),如下圖。 / / 最後面兩個參數是圓角的長度與寬度 Image1->Canvas->RoundRect(20, 20, 200, 100, 30, 30) ; / / 此矩形純為標示用 Image1->Canvas->Rectangle(20, 20, 200, 100) ; Image1->Canvas->TextOut(10, 10, "(20, 20)") ; Image1->Canvas->TextOut(200, 100, "(200, 100)") ;

以下程式片段可於(20, 20)與(200, 100)之間繪製一橢圓(Ellipse), 如下圖。 / / 此矩形純為標示用 Image1->Canvas->Rectangle(20, 20, 200, 100) ; Image1->Canvas->TextOut(10, 10, "(20, 20)") ; Image1->Canvas->Ellipse(20, 20, 200, 100) ; Image1->Canvas->TextOut(200, 100, "(200, 100)") ;

以下程式片段可於(20, 20)與(200, 100)之間繪製一弧形(Arc), 如下圖。 / / 此矩形純為標示用 Image1->Canvas->Rectangle(20, 20, 200, 100) ; Image1->Canvas->TextOut(10, 10, "(20, 20)") ; Image1->Canvas->TextOut(200, 60, "(200, 60)") ; Image1->Canvas->Arc(20, 20, 200, 100, 200, 60, 110, 100) ; Image1->Canvas->TextOut(200, 100, "(200, 100)") ; Image1->Canvas->TextOut(110, 100, "(110, 100)") ;

以下程式片段可於(20, 20)與(200, 100)之間繪製一圓弧與弦線(Chord), 如下圖。 / / 此矩形純為標示用 Image1->Canvas->Rectangle(20, 20, 200, 100) ; Image1->Canvas->TextOut(10, 10, "(20, 20)") ; Image1->Canvas->TextOut(200, 60, "(200, 60)") ; Image1->Canvas->Chord(20, 20, 200, 100, 200, 60, 110, 100) ; Image1->Canvas->TextOut(200, 100, "(200, 100)") ; Image1->Canvas->TextOut(110, 100, "(110, 100)") ;

以下程式片段可於(20, 20)與(200, 100)之間繪製一扇形(Pie), 如下圖。 / / 此矩形純為標示用 Image1->Canvas->Rectangle(20, 20, 200, 100) ; Image1->Canvas->TextOut(10, 10, "(20, 20)") ; Image1->Canvas->TextOut(200, 60, "(200, 60)") ; Image1->Canvas->Pie(20, 20, 200, 100, 200, 60, 110, 100) ; Image1->Canvas->TextOut(200, 100, "(200, 100)") ; Image1->Canvas->TextOut(110, 100, "(110, 100)") ;

以下程式片段可於Image1 繪製一個開口多邊形, 如下圖。 TPoint p[4] ; p[0] = Point(10, 10) ; p[1] = Point(10, 100) ; p[2] = Point(100, 100) ; p[3] = Point(100, 10) ; Image1->Canvas->Polyline(p, 3) ;

以下程式片段可於Image1 繪製一個封閉多邊形, 如下圖。 TPoint p[3] ; p[0] = Point(100, 10) ; p[1] = Point(50, 100) ; p[2] = Point(200, 100) ; Image1->Canvas->Polygon(p, 2) ;

以下程式片段可於Image1 繪製一條具有一個折點的貝茲曲線, 如下圖。 TPoint p[4] ; Image1->Canvas->TextOut(10, 10, "(10, 10)") ; p[0] = Point(10, 10) ; p[1] = Point(100, 10) ; p[2] = Point(200, 100) ; p[3] = Point(200, 100) ; Image1->Canvas->TextOut(200, 100, "(200, 100)") ; Image1->Canvas->PolyBezier(p, 3) ;

以下程式片段可填滿某區域, 如下圖。 Image1->Canvas->Brush->Color = clBlack ; Image1->Canvas->FloodFill(50, 50, clBlack, fsBorder) ;

範例14-1a 請參考小畫家繪製直線的操作方式, 並寫程式完成。小畫家繪製直線的方法如下: 1. 按一下" 直線" 圖項。 2. 移滑鼠至直線起點。 3. 拖曳直線的位置, 電腦亦全程展示拖曳的過程。 4. 放開滑鼠左鍵時, 即可完成直線的繪製。 5. 若要繼續本條直線的繪製, 則繼續往直線的第3 點拖曳即可。

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

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

範例14-1d 示範弧形的繪製。

範例14-1e 示範弦線與扇形的繪製。

範例14-1f 示範多邊形(Polyline) 與實心多邊形(Polygon) 的繪製。

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

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

1 4 - 2 繪圖屬性 上一節都是介紹繪圖的方法, 你已經可以繪製直線、矩形、貝茲曲線或輸出字串, 本節則要介紹如何設定構成幾何圖形的線條樣式、線條顏色、寬度、如何填滿封閉多邊形、及如何設定輸出字串的字型。 下表是Canvas 物件的常用屬性, 設定以下屬性即可解決以上問題。

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

1 4 - 3 綜合範例

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

範例14-3b 同上範例, 但軌跡方程式為極座標的r =100*COS (5 θ)。

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

範例14-3d 示範圖形的比對。

1 4 - 4 習題 1. 試寫一程式, 模擬十字路口的紅綠燈效果。