WinFormsで実装するシンプルなお絵描きアプリ

2025年8月27日

～マウスドラッグで線を描く基本実装～

1. はじめに
2. 実装の全体像
3. コード例
- 3.1. Form1.cs
4. 実装のポイント
5. 応用アイデア
6. まとめ

はじめに

C# の Windows Forms (WinForms) を使うと、比較的簡単に「線を描くアプリ」を作成できます。この記事では PictureBox + Bitmap を使い、マウスをドラッグした軌跡に線を描画するシンプルな実装を紹介します。

実装の全体像

今回のサンプルは次のような機能を持ちます：

左ドラッグで線を描画
右クリックでキャンバスをクリア
ウィンドウサイズ変更に追従（縮小時は切れる場合あり）

フォームには PictureBox を 1 つ配置するだけで十分です。(実際はコード中で作成しています）

コード例

Form1.cs

using System.Drawing;
using System.Drawing.Drawing2D;
using System.Windows.Forms;

namespace SimplePaint
{
    public class partial Form1 : Form
    {
        private readonly PictureBox _view = new() { Dock = DockStyle.Fill, BackColor = Color.White };
        private Bitmap _canvas;
        private bool _drawing;
        private Point _last;

        private Color _penColor = Color.Black;
        private float _penWidth = 3f;

        public Form1()
        {
            Text = "Simple Paint (Drag to draw / Right-click to clear)";
            ClientSize = new Size(800, 600);
            DoubleBuffered = true;
            Controls.Add(_view);

            Load += (_, __) => CreateCanvas();
            _view.Resize += (_, __) => CreateCanvas(preserve: true);

            // マウス操作
            _view.MouseDown += (s, e) =>
            {
                if (e.Button == MouseButtons.Left)
                {
                    _drawing = true;
                    _last = e.Location;
                }
                else if (e.Button == MouseButtons.Right)
                {
                    ClearCanvas();
                }
            };

            _view.MouseMove += (s, e) =>
            {
                if (!_drawing) return;

                using (var g = Graphics.FromImage(_canvas))
                using (var pen = new Pen(_penColor, _penWidth)
                {
                    StartCap = LineCap.Round,
                    EndCap = LineCap.Round,
                    LineJoin = LineJoin.Round
                })
                {
                    g.SmoothingMode = SmoothingMode.AntiAlias;
                    g.DrawLine(pen, _last, e.Location);
                }

                _last = e.Location;
                _view.Invalidate();
            };

            _view.MouseUp += (s, e) => _drawing = false;

            // 再描画
            _view.Paint += (s, e) =>
            {
                if (_canvas != null)
                {
                    e.Graphics.DrawImageUnscaled(_canvas, Point.Empty);
                }
            };
        }

        private void CreateCanvas(bool preserve = false)
        {
            if (_view.Width <= 0 || _view.Height <= 0) return;

            var newBmp = new Bitmap(_view.Width, _view.Height);
            using (var g = Graphics.FromImage(newBmp))
            {
                g.Clear(Color.White);

                if (preserve && _canvas != null)
                    g.DrawImageUnscaled(_canvas, Point.Empty);
            }

            _canvas?.Dispose();
            _canvas = newBmp;
            _view.Invalidate();
        }

        private void ClearCanvas()
        {
            if (_canvas == null) return;
            using (var g = Graphics.FromImage(_canvas))
                g.Clear(Color.White);

            _view.Invalidate();
        }
    }
}