フォームへの図形の描画

更新 : 2007 年 11 月

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

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

単純な図形の描画

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

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

やってみよう

図形を描画するには

  1. [ファイル] メニューの [新規作成] をポイントし、[プロジェクト] をクリックします。

  2. [新しいプロジェクト] ダイアログ ボックスの [テンプレート] ペインで、[Windows アプリケーション] をクリックします。

  3. [プロジェクト名] ボックスに「Shapes」と入力し、[OK] をクリックします。

    新しい Windows フォーム プロジェクトが開きます。

  4. フォームをダブルクリックしてコード エディタを開き、[イベント] ボックスの一覧の [描画] をクリックします。

  5. 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)
    
  6. F5 キーを押してプログラムを実行します。フォームに 4 つの図形が表示されます。

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

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

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

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

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

  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)
    
  2. F5 キーを押してプログラムを実行します。

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

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

次の手順

このレッスンでは、図形を描画して塗りつぶす方法について説明しました。次のレッスンでは、グラフィックス メソッドを使用してテキストを描画する方法について説明します。

次のレッスン : 「フォームへのテキストの描画

参照

処理手順

グラフィックスの表示

その他の技術情報

ピクチャの描画 : グラフィックスを使用する

Visual Basic ガイド ツアー