フォームへの図形の描画

[アーティクル]
09/30/2008

更新 : 2007 年 11 月

このレッスンでは、四角形や円などの図形をフォームに描画する方法について説明します。

前のレッスンでは、DrawLine グラフィックスメソッドおよび Pen オブジェクトを使用してフォームに線を描画する方法について説明しました。Visual Basic には、DrawLine メソッドに加えて、図形を描画するためのグラフィックスメソッドと、図形を塗りつぶすためのブラシと呼ばれるグラフィックスオブジェクトがあります。

単純な図形の描画

図形の描画は、線の描画に似ています。描画に使用する座標と色を定義する必要があります。線では、座標で開始点と終了点を定義しましたが、正方形や四角形などの図形では、座標で左上隅、幅、および高さを表します。

円および楕円には左上隅はないため、座標は外接する四角形の左上隅を表します。これは、円または楕円と同じ幅および高さを持つ架空の四角形です。

やってみよう

図形を描画するには

[ファイル] メニューの [新規作成] をポイントし、[プロジェクト] をクリックします。
[新しいプロジェクト] ダイアログボックスの [テンプレート] ペインで、[Windows アプリケーション] をクリックします。
[プロジェクト名] ボックスに「Shapes」と入力し、[OK] をクリックします。

新しい Windows フォームプロジェクトが開きます。
フォームをダブルクリックしてコードエディタを開き、[イベント] ボックスの一覧の [描画] をクリックします。

Form1_Paint イベントハンドラに次のコードを追加します。

' Draw a 200 by 150 pixel green rectangle.
e.Graphics.DrawRectangle(Pens.Green, 10, 10, 200, 150)
' Draw a blue square
e.Graphics.DrawRectangle(Pens.Blue, 30, 30, 150, 150)
' Draw a 150 pixel diameter red circle.
e.Graphics.DrawEllipse(Pens.Red, 0, 0, 150, 150)
' Draw a 250 by 125 pixel yellow oval.
e.Graphics.DrawEllipse(Pens.Yellow, 20, 20, 250, 125)

F5 キーを押してプログラムを実行します。フォームに 4 つの図形が表示されます。

プロジェクトは開いたままにしておいてください。次の手順でプロジェクトに追加します。

塗りつぶされた図形の描画

描画した図形は外枠だけです。純色を使用して図形を描画するには、FillRectangle や FillEllipse などの塗りつぶしメソッドの 1 つを使用する必要があります。塗りつぶしメソッドは、別の種類の塗りつぶしグラフィックスオブジェクトである Brush オブジェクトを使用します。

別の色を使用して図形を塗りつぶす場合、図形より小さい座標を定義する必要があります。図形より小さくしておかないと、境界線まで塗りつぶされます。たとえば、座標 0, 0, 150, 150 の正方形を塗りつぶすには、座標 1, 1, 148, 148 で塗りつぶしを指定します。こうすると、境界線の太さが 1 ピクセルになります。

塗りつぶされた図形を描画するには

Form1_Paint イベントハンドラで、以前に入力したコードの下に次のコードを追加します。

' Fill the circle with the same color as its border.
e.Graphics.FillEllipse(Brushes.Red, 0, 0, 150, 150)
' Fill the square with a different color.
e.Graphics.FillRectangle(Brushes.Aquamarine, 31, 31, 148, 148)

F5 キーを押してプログラムを実行します。

塗りつぶされた正方形が塗りつぶされた円の上に表示されますが、重なった境界線の部分が見えなくなっています。グラフィックスメソッドを呼び出す順序によって、図形が描画される順序が決まります。この場合、塗りつぶされた円は境界線が青い四角形の後に描画されました。

メソッドの順序を変更して、どのような結果になるか確認してください。