WinFormsお絵描きアプリ応用編

2025年8月27日

～色・線幅変更と保存機能を追加する～

1. 追加機能
2. コード例
- 2.1. Form1.cs
3. 実行イメージ
4. まとめ

追加機能

ペン色の変更（Button + ColorDialog）
線の太さ変更（TrackBar）
描いた画像をPNG保存（SaveFileDialog）

コード例

Form1.cs

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

namespace SimplePaintAdvanced
{
    public partial class Form1 : Form
    {
        private readonly PictureBox _view = new() { Dock = DockStyle.Fill, BackColor = Color.White };
        private readonly Button _btnColor = new() { Text = "色変更", Dock = DockStyle.Left, Width = 80 };
        private readonly TrackBar _trackWidth = new() { Dock = DockStyle.Left, Minimum = 1, Maximum = 20, Value = 3, TickFrequency = 1, Width = 120 };
        private readonly Button _btnSave = new() { Text = "保存", Dock = DockStyle.Left, Width = 80 };

        private Bitmap _canvas;
        private bool _drawing;
        private Point _last;

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

        public Form1()
        {
            Text = "Simple Paint Advanced";
            ClientSize = new Size(900, 600);
            DoubleBuffered = true;

            var panel = new FlowLayoutPanel { Dock = DockStyle.Top, Height = 40 };
            panel.Controls.AddRange(new Control[] { _btnColor, _trackWidth, _btnSave });

            Controls.Add(_view);
            Controls.Add(panel);

            // 起動時とリサイズ時にキャンバス確保
            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);
            };

            // 色変更ボタン
            _btnColor.Click += (_, __) =>
            {
                using var cd = new ColorDialog();
                if (cd.ShowDialog() == DialogResult.OK)
                {
                    _penColor = cd.Color;
                }
            };

            // 線幅変更トラックバー
            _trackWidth.Scroll += (_, __) =>
            {
                _penWidth = _trackWidth.Value;
            };

            // 保存ボタン
            _btnSave.Click += (_, __) =>
            {
                using var sfd = new SaveFileDialog
                {
                    Filter = "PNGファイル|*.png",
                    FileName = "drawing.png"
                };
                if (sfd.ShowDialog() == DialogResult.OK)
                {
                    _canvas.Save(sfd.FileName, System.Drawing.Imaging.ImageFormat.Png);
                    MessageBox.Show("保存しました: " + sfd.FileName);
                }
            };
        }

        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();
        }
    }
}