ヘッダー
C# サンプル集
 

Visual Basic 中学校 > C# サンプル集 > C# サンプル集目次 > Windowsフォーム >

マウス操作で図形を描画する

2020/12/20

→ Visual Basic のサンプルに切り替える

目次

 

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

 

マウスをクリックした位置に次々と赤い線を描画する

この例はマウスでPictureBoxをクリックするたびに、その場所から、PiuctureBoxの左上に向けて線を次々と追加します。

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

    public Form1()
    {
        InitializeComponent();

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


    private void pictureBox1_MouseClick(object sender, MouseEventArgs e)
    {
        var point1 = e.Location;
        var point2 = new Point(0, 0);

        var path = new System.Drawing.Drawing2D.GraphicsPath();
        path.AddLine(point1, point2);
        paths.Add(path);

        pictureBox1.Invalidate();
    }


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

 

 

マウスをなぞった軌跡を描画する

この例はマウスでなぞった位置に四角形を描画します。

フォームにPictureBox(PictureBox1)が１つ配置されていることが前提です。

マウスで絵を描く

※動画はVB版のプログラムで採取しています。このサンプルで紹介しているC#版もこれと同じ動作をします。

public partial class Form1 : Form
{
    Stack<List<Point>> Strokes = new Stack<List<Point>>();

    public Form1()
    {
        InitializeComponent();

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

    private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
    {
        Strokes.Push(new List<Point>());
    }

    private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
    {
        //何かしらマウスのボタンが押されている場合
        if (Control.MouseButtons != MouseButtons.None) {
            Strokes.Peek().Add(e.Location); //マウスの位置を最新のストロークに追加
            pictureBox1.Invalidate(); //pictureBox1の再描画を促す
        }
    }


    Pen drawPen = new Pen(Color.FromArgb(140, Color.Red), 12);

    private void pictureBox1_Paint(object sender, PaintEventArgs e)
    {
        foreach (var stroke in Strokes)
        {
            //ストロークに含まれるすべてのPointを線で結んだ図形を生成
            var path = new System.Drawing.Drawing2D.GraphicsPath(stroke.ToArray(), Enumerable..Repeat<byte>(1, stroke.Count).ToArray());
            e.Graphics.DrawPath(drawPen, path); //生成した図形を描画
        }
    }
}

 

 

マウスをなぞった位置にリアルタイムに四角形を描画する

この例はマウスでなぞった位置に四角形を描画します。

フォームにPictureBox(PictureBox1)が１つ配置されていることが前提です。

マウスでなぞった位置に四角形を描画

※動画はVB版のプログラムで採取しています。このサンプルで紹介しているC#版もこれと同じ動作をします。

public partial class Form1 : Form
{

    Point mouseDownPosition; //ドラッグを開始したマウスの位置
    Point mouseDragPosition; //現在ドラッグ中のマウスの位置
    bool isMouseDown; //マウスのボタンが押されているか
    Pen selectPen; //ドラッグ中の四角形の描画に使用するペン

    public Form1()
    {
        InitializeComponent();

        //イベントの結びつけ
        //フォームデザイナーでイベントを結び付けている場合は不要です。
        this.Shown += Form1_Shown;
        pictureBox1.Paint += pictureBox1_Paint;
        pictureBox1.MouseDown += pictureBox1_MouseDown;
        pictureBox1.MouseMove += pictureBox1_MouseMove;
        pictureBox1.MouseUp += pictureBox1_MouseUp;
    }

    private void Form1_Shown(object sender, EventArgs e)
    {
        //ドラッグ中の四角形の描画に使用するペンを作成。青い点線のペンにする。
        selectPen = new Pen(Color.Blue, 1);
        selectPen.DashStyle = System.Drawing.Drawing2D.DashStyle.Dot;
    }

    private void pictureBox1_Paint(object sender, PaintEventArgs e)
    {
        e.Graphics.Clear(Color.White); //背景を白にする

        if (Control.MouseButtons != MouseButtons.Left) {
            //マウスの左ボタンが押されていない場合何もしない
            return;
        }

        //ドラッグを開始したマウスの位置(mouseDownPosition)と現在ドラッグ中のマウスの位置(mouseDragPosition)
        //から、描画すべき四角形の座標を計算する。
        var activeRect = new Rectangle();
        activeRect.X = Math.Min(mouseDownPosition.X, mouseDragPosition.X);
        activeRect.Y = Math.Min(mouseDownPosition.Y, mouseDragPosition.Y);
        activeRect.Width = Math.Abs(mouseDragPosition.X - mouseDownPosition.X);
        activeRect.Height = Math.Abs(mouseDragPosition.Y - mouseDownPosition.Y);

        //ドラッグ中の四角形を描画
        e.Graphics.DrawRectangle(selectPen, activeRect);
    }


    private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
    {
        //マウスのボタンが押された場合、
        mouseDownPosition = e.Location;
        isMouseDown = true;
    }

    private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
    {
        //マウスを移動した場合
        mouseDragPosition = e.Location;
        pictureBox1.Invalidate(); //pictureBoxを強制的に再描画する
    }

    private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
    {
        //マウスを離した場合
        isMouseDown = false;
        pictureBox1.Invalidate(); //pictureBoxを強制的に再描画する
    }
}

 

 

マウスをなぞった位置にリアルタイムに四角形を描画し、マウスを離すとその位置に四角形を追加する

この例は上記の例に加えて、マウスを離すとその位置に四角形が追加します。

フォームにPictureBox(PictureBox1)が１つ配置されていることが前提です。

マウスでなぞった位置に四角形を追加する

※動画はVB版のプログラムで採取しています。このサンプルで紹介しているC#版もこれと同じ動作をします。

public partial class Form1 : Form
{

    List<System.Drawing.Drawing2D.GraphicsPath> paths = new List<System.Drawing.Drawing2D.GraphicsPath>();
    Point mouseDownPosition; //ドラッグを開始したマウスの位置
    Point mouseDragPosition; //現在ドラッグ中のマウスの位置
    bool isMouseDown; //マウスのボタンが押されているか
    Pen selectPen; //ドラッグ中の四角形の描画に使用するペン

    public Form1()
    {
        InitializeComponent();

        //イベントの結びつけ
        //フォームデザイナーでイベントを結び付けている場合は不要です。
        this.Shown += Form1_Shown;
        pictureBox1.Paint += pictureBox1_Paint;
        pictureBox1.MouseDown += pictureBox1_MouseDown;
        pictureBox1.MouseMove += pictureBox1_MouseMove;
        pictureBox1.MouseUp += pictureBox1_MouseUp;
    }

    private void Form1_Shown(object sender, EventArgs e)
    {
        //ドラッグ中の四角形の描画に使用するペンを作成。青い点線のペンにする。
        selectPen = new Pen(Color.Blue, 1);
        selectPen.DashStyle = System.Drawing.Drawing2D.DashStyle.Dot;
    }

    private void pictureBox1_Paint(object sender, PaintEventArgs e)
    {
        e.Graphics.Clear(Color.White); //背景を白にする

        //追加されている図形を描画する。
        foreach (var path in paths)
        {
            e.Graphics.FillPath(Brushes.Cyan, path); //水色で塗りつぶし
            e.Graphics.DrawPath(Pens.Blue, path); //青い枠線
        }

        if (Control.MouseButtons != MouseButtons.Left) {
            //マウスの左ボタンが押されていない場合何もしない
            return;
        }

        //ドラッグを開始したマウスの位置(mouseDownPosition)と現在ドラッグ中のマウスの位置(mouseDragPosition)
        //から、描画すべき四角形の座標を計算する。
        var activeRect = CalcActiveRect(mouseDownPosition, mouseDragPosition);

        //ドラッグ中の四角形を描画
        e.Graphics.DrawRectangle(selectPen, activeRect);
    }

    private Rectangle CalcActiveRect(Point sstartPosition, Point endPosition)
    {
        var activeRect = new Rectangle();
        activeRect.X = Math.Min(mouseDownPosition.X, mouseDragPosition.X);
        activeRect.Y = Math.Min(mouseDownPosition.Y, mouseDragPosition.Y);
        activeRect.Width = Math.Abs(mouseDragPosition.X - mouseDownPosition.X);
        activeRect.Height = Math.Abs(mouseDragPosition.Y - mouseDownPosition.Y);

        return activeRect;
    }

    private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
    {
        //マウスのボタンが押された場合、
        mouseDownPosition = e.Location;
        isMouseDown = true;
    }

    private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
    {
        //マウスを移動した場合
        mouseDragPosition = e.Location;
        pictureBox1.Invalidate(); //pictureBoxを強制的に再描画する
    }

    private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
    {
        //マウスを離した場合
        if (isMouseDown)
        {
            var activeRect = this.CalcActiveRect(mouseDownPosition, mouseDragPosition);
            if (activeRect.Width * activeRect.Height > 0)
            {
                //面積がある場合、この四角形を描画対象に追加する。
                var ppath = new System.Drawing.Drawing2D.GraphicsPath/span>();
                path.AddRectangle(activeRect);
                paths.Add(path);
            }
            isMouseDown = false;
        }
 
        pictureBox1.Invalidate(); //pictureBoxを強制的に再描画する/span>
    }
} }

 

 

マウスをなぞった位置にリアルタイムに四角形を描画し、マウスを離すとその位置に四角形を追加し、後で追加された四角形をクリックすると色が変わる

この例は上記の例に加えて、マウスを離すとその位置に四角形が追加します。>

フフォフフォームにPictureBox(PictureBox1)が１つ配置されていることが前提です。

マウスでクリックした四角形の色が変わる

※動画はVB版のプログラムで採取しています。このサンプルで紹介しているC#版もこれと同じ動作をします。

public partial class Form1 : Form
{

    List<Polygon> polygons = new List<Polygon>();

    Point mouseDownPosition; //ドラッグを開始したマウスの位置
    Point mouseDragPosition; //現在ドラッグ中のマウスの位置
    bool isMouseDown; //マウスのボタンが押されているか
    Pen selectPen; //ドラッグ中の四角形の描画に使用するペン

    public Form1()
    {
        InitializeComponent();

        //イベントの結びつけ
        //フォームデザイナーでイベントを結び付けている場合は不要です。
        this.Shown += Form1_Shown;
        pictureBox1.Paint += pictureBox1_Paint;
        pictureBox1.MouseDown += pictureBox1_MouseDown;
        pictureBox1.MouseMove += pictureBox1_MouseMove;
        pictureBox1.MouseUp += pictureBox1_MouseUp;
    }

    private void Form1_Shown(object sender, EventArgs e)
    {
        //ドラッグ中の四角形の描画に使用するペンを作成。青い点線のペンにする。
        selectPen = new Pen(Color.Blue, 1);
        selectPen.DashStyle = System.Drawing.Drawing2D.DashStyle.Dot;
    }

    private void pictureBox1_Paint(object sender, PaintEventArgs e)
    {
        e.Graphics.Clear(Color.White); //背景を白にする

        //追加されている図形を描画する。
        foreach (var polygon in polygons)
        {
            if (polygon.IsSelected)
            {
                e.Graphics.FillRectangle(Brushes.Yellow, polygon.Rect); //黄色で塗りつぶし
            }
            else
            {
                e.Graphics.FillRectangle(Brushes.Cyan, polygon.Rect); //水色で塗りつぶし
            }
            e.Graphics.DrawRectangle(Pens.Blue, polygon.Rect); //青い枠線
        }

        if (Control.MouseButtons != MouseButtons.Left) {
            //マウスの左ボタンが押されていない場合何もしない
            return;
        }

        //ドラッグを開始したマウスの位置(mouseDownPosition)と現在ドラッグ中のマウスの位置(mouseDragPosition)
        //から、描画すべき四角形の座標を計算する。
        var activeRect = CalcActiveRect(mouseDownPosition, mouseDragPosition);

        //ドラッグ中の四角形を描画
        e.Graphics.DrawRectangle(selectPen, activeRect);
    }

    private Rectangle CalcActiveRect(Point startPosition, Point endPosition)
    {
        var activeRect = new Rectangle();
        activeRect.X = Math.Min(mouseDownPosition.X, mouseDragPosition.X);
        activeRect.Y = Math.Min(mouseDownPosition.Y, mouseDragPosition.Y);
        activeRect.Width = Math.Abs(mouseDragPosition.X - mouseDownPosition.X);
        activeRect.Height = Math.Abs(mouseDragPosition.Y - mouseDownPosition.Y);

        return activeRect;
    }

    private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
    {
        //マウスのボタンが押された場合、
        mouseDownPosition = e.Location;
        isMouseDown = true;
    }

    private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
    {
        //マウスを移動した場合
        mouseDragPosition = e.Location;
        pictureBox1.Invalidate(); //pictureBoxを強制的に再描画する
    }

    private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
    {
        //マウスを離した場合
        if (isMouseDown)
        {
            var activeRect = this.CalcActiveRect(mouseDownPosition, mouseDragPosition);
            if (activeRect.Width * activeRect.Height > 0)
            {
                //面積がある場合、この四角形を描画対象に追加する。
                polygons.Add(new Polygon {Rect = activeRect});
            }
            else
            {
                //面積がない場合、これはクリックである。
                Polygon selectedPolygon = null;

                //クリックされた位置に四角形を存在するか調べる。
                //※同じ位置に複数の四角形がある可能性があるので最後に見つかったものを
                //変数selectedPolygonにセットしておく。
                foreach (var polygon in polygons)
                {
                    polygon.IsSelected = false;
                    if (polygon.Rect.Contains(e.Location))
                    {
                        selectedPolygon = polygon;
                    }
                }
                
                //四角形があった場合、IsSelecteをTrueにしておく。
                //→この目印があることで Paintイベント内で特別扱いする。
                if (selectedPolygon != null)
                {
                    selectedPolygon.IsSelected = true;
                }
            }
            isMouseDown = false;
        }
 
        pictureBox1.Invalidate(); //pictureBoxを強制的に再描画する
    }
}

public class Polygon
{
    public Rectangle Rect;
    public bool IsSelected;
}