C# サンプル集

ボタンをクリックしたら図形を描画する

2020/12/20

ボタンをクリックしたら、赤い線を描画する
Button1をクリックすると四角を追加し、Button2をクリックすると円を追加する
ボタンをクリックすると四角形が右に移動する

このページで紹介するサンプルは Windowsフォームアプリケーションを前提にしています。

ボタンをクリックしたら、赤い線を描画する

実行するにはフォームにボタンを１つ(button1)とPictureBoxを１つ(pictureBox1)を配置します。

public partial class Form1 : Form
{
    bool isDraw = false;

    public Form1()
    {
        InitializeComponent();

        //イベントの結びつけ
        //フォームデザイナーでイベントを結び付けている場合は不要です。
        button1.Click += button1_Click;
        pictureBox1.Paint += pictureBox1_Paint;
    }

    private void button1_Click(object sender, EventArgs e)
    {
        isDraw = true;
        pictureBox1.Invalidate();
    }

    private void pictureBox1_Paint(object sender, PaintEventArgs e)
    {

        if (!isDraw){
            return;
        }

        var point1 = new Point(10, 20);
        var point2 = new Point(200, 150);

        e.Graphics.DrawLine(Pens.Red, point1, point2);
    }
}

メモ：描画時点で描画内容が決まっている場合、この例が便利です。お絵かきアプリのように描画後に描画内容が追加・変更される可能性がある場合、次の例の方が便利です。

Button1をクリックすると四角を追加し、Button2をクリックすると円を追加する

実行するにはフォームにボタンを２つ(button1, button2)とPictureBoxを１つ(pictureBox1)を配置します。

ボタンはどちらを先にクリックしてもOKです。両方クリックすると四角と円の両方が描画されます。

public partial class Form1 : Form
{
    List<System.Drawing.Drawing2D.GraphicsPath> paths = new List<System.Drawing.Drawing2D.GraphicsPath>();

    public Form1()
    {
        InitializeComponent();

        //イベントの結びつけ
        //フォームデザイナーでイベントを結び付けている場合は不要です。
        button1.Click += button1_Click;
        button2.Click += button2_Click;
        pictureBox1.Paint += pictureBox1_Paint;
    }

    private void button1_Click(object sender, EventArgs e)
    {
        var path = new System.Drawing.Drawing2D.GraphicsPath();
        path.AddEllipse(10, 20, 200, 150);
        paths.Add(path);
        pictureBox1.Invalidate();
    }

    private void button2_Click(object sender, EventArgs e)
    {
        var path = new System.Drawing.Drawing2D.GraphicsPath();
        path.AddRectangle(new Rectangle(10, 20, 200, 150));
        paths.Add(path);
        pictureBox1.Invalidate();
    }

    private void pictureBox1_Paint(object sender, PaintEventArgs e)
    {
        foreach (var path in paths)
        {
            e.Graphics.DrawPath(Pens.Red, path);
        }

    }
}

メモ：お絵かきアプリのように描画後に描画内容が追加・変更される可能性がある場合、この例が便利です。描画時点で描画内容が決まっている場合、前の例の方が便利です。

ボタンをクリックすると四角形が右に移動する

実行するにはフォームにボタンを１つ(button1)とPictureBoxを１つ(pictureBox1)を配置します。

public partial class Form1 : Form
{
    int x;

    public Form1()
    {
        InitializeComponent();

        //イベントの結びつけ
        //フォームデザイナーでイベントを結び付けている場合は不要です。
        button1.Click += button1_Click;
        pictureBox1.Paint += pictureBox1_Paint;
    }

    private void button1_Click(object sender, EventArgs e)
    {
        x += 2;
        pictureBox1.Invalidate();
    }

    private void pictureBox1_Paint(object sender, PaintEventArgs e)
    {
        e.Graphics.DrawRectangle(Pens.Red, x, 20, 200, 150);
    }
}