三角形を描画する

C# の DrawLine を繰り返して三角形を描画します。
OnPaint をオーバーライドします。

前田稔(Maeda Minoru)の超初心者のプログラム入門

プロジェクトの設定

  1. 全ソースコードです。
    プロジェクトのフォルダーに格納して下さい。
    プロジェクトの作成は Form を作成する を参照して下さい。
    自動生成を使って Form を作成 の場合も同じ要領です。
    /***********************************/
/*★ 三角形を描画する    前田 稔 ★*/
/***********************************/
using System;
using System.Drawing;
using System.Windows.Forms;

public class MyForm : Form
{
    public MyForm()
    {
    }

    protected override void OnPaint(PaintEventArgs e)
    {   Pen     red,yellow,green,blue;

        base.OnPaint(e);
        Graphics g = e.Graphics;
        red = new Pen(Color.Red);
        yellow = new Pen(Color.Yellow);
        green = new Pen(Color.Green);
        blue = new Pen(Color.Blue);
        for (int i = 0; i < 100; i++)
        {
            g.DrawLine(red, 160, i + 30, i + 160, i + 30);
            g.DrawLine(yellow, 160, i + 130, 259 - i, i + 130);
            g.DrawLine(green, 99 - i + 60, i + 30, 159, i + 30);
            g.DrawLine(blue, 60 + i, i + 130, 159, i + 130);
        }
    }
}

class draw
{
    public static void Main()
    {
        MyForm mf = new MyForm();
        Application.Run(mf);
    }
}
  2. new MyForm() で Form を継承した MyForm Object Class を生成します。
  3. Application.Run(mf) で MyForm に制御を渡し、メッセージループに入ります。
  4. OnPaint() は Form の規定のハンドラ名ですが、これをオーバーライドして三角形を描画します。
    1. OnPaint をオーバーライドします。
      protected override void OnPaint(PaintEventArgs e)
    2. オーバーライドしたメソッドでは、基本クラスのメソッドを一度呼び出しておくことが推奨されています。
      base.OnPaint(e);
    3. パラメータ(PaintEventArgs e)を受け取って、Graphics g を設定します。
    4. 今回のように何度も Pen を使うときは、最初に一度だけ生成する方法がお勧めです。
      表面には現れませんが、毎回 DrawLine() で new を実行すると毎回新しい Object が生成されます。
      使われなくなった Object はガーベッジコレクションで自動的に削除されるので問題は起こりませんが、処理の低下を招きます。
    5. DrawLine() で Line を使って三角形を描画します。

プログラムの説明

  1. ページ先頭の三角形が描画されている矩形範囲は、座標(60,30)から座標(259,229)の範囲です。
    Ｘ座標 60～159 が左半分で、160～259 が右半分です。
    Ｙ座標 30～129 が上半分で、130～229 が下半分です。
  2. 次のソースコードは赤の三角形を描画するコードです。
        for (int i = 0; i < 100; i++)
    {
        g.DrawLine(red, 160, i + 30, i + 160, i + 30);
    }
    1. ｉ＝０から初めてｉ＝９９まで、１００回ループ(１００本の線を描画)します。
    2. ｉの値と線の関係は次のようになります。
      ｉの値 Ｘ始点Ｘ終点Ｙの値横線の長さ
      0 160 160 30 1
      1 160 161 31 2
      2 160 162 32 3
      ... ... ... ... ...
      99 160 259 129 100
  3. 緑の三角形は、座標(60,30)から座標(159,129)の範囲に描画します。
  4. 青の三角形は、座標(60,130)から座標(159,229)の範囲に描画します。
  5. 黄の三角形は、座標(160,130)から座標(259,229)の範囲に描画します。

【演習】

  1. 緑の三角形を描画して下さい。
  2. 青の三角形を描画して下さい。
  3. 黄の三角形を描画して下さい。
  4. 次の図形を描画して下さい。

    上部中央座標：X=160, Y=30
    左中段座標：X=60, Y=130
    中央交点座標：X=160, Y=130
    右中段座標：X=260, Y=130
    下部中央座標：X=160, Y=230
  5. 次の図形を描画して下さい。

超初心者のプログラム入門(C# Frame Work)

※・