C# Windowsフォームアプリケーション開発、描いた直線を残したまま、再度直線を描画したい。

Question

前提・実現したいこと

現在、Windowsフォームアプリケーションを開発しています。
コード記述のプログラミング言語はC#です。
今の時点で実現できていることは直線の始点を左クリックして、もう一度左クリックすることで終点を決め、その二点を結ぶ直線を描くことはできています。
DrawLineメソッドです。
pictureBox内に表示させています。

実装したいこと
直線を一つ描画はできるのですが、線と線をつないで図形を描きたい場合など複数描ける必要があります。
しかし、同記述していけばいいかわからなかったので、どなたか助けていただけないでしょうか？
以下がソースコードです。

発生している問題・エラーメッセージ

using System;
using System.Collections;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Diagnostics;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
using static System.Console;

public partial class Form1 : Form
{

    /// <summary>
    /// 各変数の定義など
    /// </summary>
    

    //描画する線の種類のボタンがクリックされた場合の機能を実装するためのスイッチON/OFFを観察するための変数
    private bool btnSolidWasClicked = false;

　　　　　//左クリックで始点(lsp)と終点(lep)を選択するために変数定義
//MouseButtons.Left
private Point lsp = new Point();
private Point lep = new Point();
//左クリックされたときにtrueかfalseかどうかで始点か終点か判断
private Boolean lsp_flag;

　　　　private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
{
if (btnSolidWasClicked )
{
//描画先とするImageオブジェクトを作成
Bitmap canvas = new Bitmap(pictureBox1.Width, pictureBox1.Height);
//ImageオブジェクトのGraphicsオブジェクトを作成
Graphics g = Graphics.FromImage(canvas);
//線を滑らかにする
g.SmoothingMode = SmoothingMode.AntiAlias;
//Penオブジェクトの作成
Pen GreenPen = new Pen(Color.White, 3);

            //直線の種類は実線
            GreenPen.DashStyle = DashStyle.Solid;

            //座標の表示
            label1.Text = string.Format("Screen Position : {0:d}, {1:d}",
                                        Cursor.Position.X, Cursor.Position.Y);

            if (lsp_flag) //終点の処理
            {
                lep = e.Location;
                g.DrawLine(GreenPen, lsp, lep);
                //リソースを開放
                GreenPen.Dispose();
                g.Dispose();
                lsp_flag = false;
                //Picture1に表示
                pictureBox1.Image = canvas;
            }
            else //始点の処理
            {
                lsp = e.Location;
                g.DrawRectangle(GreenPen, lsp.X, lsp.Y, 0.1f, 0.1f);
                //リソースを開放
                GreenPen.Dispose();
                g.Dispose();
                lsp_flag = true;
                //Picture1に表示
                pictureBox1.Image = canvas;
            }
         }

　　　　　}
}

試したこと

始点の処理と終点の処理を分けて書こうと思い、始点をMouseDownイベント、終点の処理をMouseUpイベントで書きましたがうまくいきませんでした。

現在はすべてMouseDownイベント内に書いています。

補足情報（FW/ツールのバージョンなど）

開発環境 Visual studio2019 community edition
C# windows form application

Comments

[YAmaGNZ]

3回クリックしたら、その3点を直線で繋ぐ（直線を2本引く）ということですか？

Answer 1

問題点は

直線を一つ描画はできるのですが、線と線をつないで図形を描きたい場合など複数描ける必要があります。

ということで私が思うに　「線が一度はかけるけど複数回書き足すことができないとうい意味だと理解しました。」

その点に絞って解答させていただきます。

pictureBox1と同じサイズのcanvasを作成し、描画後
pictureBox1.Image = canvas;
でpictureBox1.Imageに反映させていますが、これだと常に新しいキャンバスが生成されそれを
pictureBox1.Imageに代入します。この流れが間違えているのではないでしょうか？

前回の続きで処理をするならば、canvasを新しく生成せず。保持する（引継ぐ）べきですよ。

Comments

[YAmaGNZ]

確かにそうですね。
そこまでソースを見てませんでした。

[kgreenjp]

お気になさらず。質問者の手助けになればＯＫだと私は思っています。
コメントありがとうございます。

Answer 2

いじっていたら跡形がなくなってしまったのですが、何かの参考になれば。

始点をMouseDownイベント、終点の処理をMouseUpイベント

線の引き方にこだわりはなさそうなので「ペイント」のようなドラッグ方式です。

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

namespace Questions240161
{
    public partial class Form1 : Form
    {
        private readonly ToolStripButton[] modeButtons;
        private readonly ToolStripButton[] colorButtons;

        private Point startPoint;
        private Point endPoint;

        private Color penColor = Color.Black;
        private int penSize => (int)toolStripComboBox1.SelectedItem;

        private bool isPencilMode => toolStripButton1.Checked;
        private bool isLineMode => toolStripButton2.Checked;
        private bool isLineDragging;

        public Form1()
        {
            InitializeComponent();

            pictureBox1.Image = new Bitmap(800, 600);

            modeButtons = new[] { toolStripButton1, toolStripButton2, };
            modeButtons[0].Checked = true;

            toolStripComboBox1.ComboBox.DataSource = Enumerable.Range(1, 10).ToList();
            toolStripComboBox1.SelectedIndex = 2;

            colorButtons = new[] { toolStripButton3, toolStripButton4, };
            colorButtons[0].Checked = true;
        }

        private void PictureBox1_Paint(object sender, PaintEventArgs e)
        {
            if(!pictureBox1.Capture) return;
            if(!isLineDragging) return;

            using(var pen = new Pen(penColor, penSize))
            {
                e.Graphics.SmoothingMode = SmoothingMode.AntiAlias;
                e.Graphics.DrawLine(pen, startPoint, endPoint);
            }
        }
        private void PictureBox1_MouseDown(object sender, MouseEventArgs e)
        {
            startPoint = e.Location;
            if(isLineMode) isLineDragging = true;
        }
        private void PictureBox1_MouseMove(object sender, MouseEventArgs e)
        {
            SetMessage($"Position : {e.X}, {e.Y}");
            if(!pictureBox1.Capture) return;

            endPoint = e.Location;
            if(isPencilMode)
            {
                DrawLine(LineCap.Round);
                startPoint = endPoint;
            }

            if(isLineMode) pictureBox1.Invalidate();
        }
        private void PictureBox1_MouseUp(object sender, MouseEventArgs e)
        {
            if(!isLineDragging) return;

            isLineDragging = false;
            if(isLineMode) DrawLine();
        }

        private void DrawLine(LineCap lineCap = LineCap.Flat)
        {
            using(var g = Graphics.FromImage(pictureBox1.Image))
            using(var pen = new Pen(penColor, penSize) { StartCap = lineCap, EndCap = lineCap })
            {
                g.SmoothingMode = SmoothingMode.AntiAlias;
                g.DrawLine(pen, startPoint, endPoint);
                pictureBox1.Image = pictureBox1.Image; // 再割り当てしないと反映されない？？
            }
        }

        private void ToolStripModeButton_Click(object sender, EventArgs e)
        {
            foreach(var b in modeButtons) b.Checked = sender == b;
        }
        private void ToolStripColorButton_Click(object sender, EventArgs e)
        {
            foreach(var b in colorButtons) b.Checked = sender == b;

            penColor = ((ToolStripButton)sender).ForeColor;
        }

        private void SetMessage(string value) => toolStripStatusLabel1.Text = value;
    }
}

namespace Questions240161
{
    partial class Form1
    {
        private System.ComponentModel.IContainer components = null;

        protected override void Dispose(bool disposing)
        {
            if(disposing && (components != null))
            {
                components.Dispose();
            }
            base.Dispose(disposing);
        }

        #region Windows フォーム デザイナーで生成されたコード
        private void InitializeComponent()
        {
            this.pictureBox1 = new System.Windows.Forms.PictureBox();
            this.panel1 = new System.Windows.Forms.Panel();
            this.toolStrip1 = new System.Windows.Forms.ToolStrip();
            this.toolStripButton1 = new System.Windows.Forms.ToolStripButton();
            this.toolStripButton2 = new System.Windows.Forms.ToolStripButton();
            this.toolStripComboBox1 = new System.Windows.Forms.ToolStripComboBox();
            this.toolStripButton3 = new System.Windows.Forms.ToolStripButton();
            this.toolStripButton4 = new System.Windows.Forms.ToolStripButton();
            this.statusStrip1 = new System.Windows.Forms.StatusStrip();
            this.toolStripStatusLabel1 = new System.Windows.Forms.ToolStripStatusLabel();
            ((System.ComponentModel.ISupportInitialize)(this.pictureBox1)).BeginInit();
            this.panel1.SuspendLayout();
            this.toolStrip1.SuspendLayout();
            this.statusStrip1.SuspendLayout();
            this.SuspendLayout();

            this.pictureBox1.BackColor = System.Drawing.Color.White;
            this.pictureBox1.Location = new System.Drawing.Point(0, 0);
            this.pictureBox1.SizeMode = System.Windows.Forms.PictureBoxSizeMode.AutoSize;
            this.pictureBox1.TabStop = false;
            this.pictureBox1.Paint += new System.Windows.Forms.PaintEventHandler(this.PictureBox1_Paint);
            this.pictureBox1.MouseDown += new System.Windows.Forms.MouseEventHandler(this.PictureBox1_MouseDown);
            this.pictureBox1.MouseMove += new System.Windows.Forms.MouseEventHandler(this.PictureBox1_MouseMove);
            this.pictureBox1.MouseUp += new System.Windows.Forms.MouseEventHandler(this.PictureBox1_MouseUp);

            this.panel1.AutoScroll = true;
            this.panel1.Controls.Add(this.pictureBox1);
            this.panel1.Dock = System.Windows.Forms.DockStyle.Fill;

            this.toolStrip1.Items.AddRange(new System.Windows.Forms.ToolStripItem[] {
            this.toolStripButton1,
            this.toolStripButton2,
            this.toolStripComboBox1,
            this.toolStripButton3,
            this.toolStripButton4});

            this.toolStripButton1.DisplayStyle = System.Windows.Forms.ToolStripItemDisplayStyle.Text;
            this.toolStripButton1.Text = "Pen";
            this.toolStripButton1.Click += new System.EventHandler(this.ToolStripModeButton_Click);

            this.toolStripButton2.DisplayStyle = System.Windows.Forms.ToolStripItemDisplayStyle.Text;
            this.toolStripButton2.Text = "Line";
            this.toolStripButton2.Click += new System.EventHandler(this.ToolStripModeButton_Click);

            this.toolStripComboBox1.DropDownStyle = System.Windows.Forms.ComboBoxStyle.DropDownList;

            this.toolStripButton3.DisplayStyle = System.Windows.Forms.ToolStripItemDisplayStyle.Text;
            this.toolStripButton3.Font = new System.Drawing.Font("メイリオ", 12F, System.Drawing.FontStyle.Regular, System.Drawing.GraphicsUnit.Point, ((byte)(128)));
            this.toolStripButton3.ForeColor = System.Drawing.Color.Black;
            this.toolStripButton3.Text = "■";
            this.toolStripButton3.Click += new System.EventHandler(this.ToolStripColorButton_Click);

            this.toolStripButton4.DisplayStyle = System.Windows.Forms.ToolStripItemDisplayStyle.Text;
            this.toolStripButton4.ForeColor = System.Drawing.Color.Red;
            this.toolStripButton4.Text = "■";
            this.toolStripButton4.Click += new System.EventHandler(this.ToolStripColorButton_Click);

            this.statusStrip1.Items.AddRange(new System.Windows.Forms.ToolStripItem[] {
            this.toolStripStatusLabel1});

            this.ClientSize = new System.Drawing.Size(800, 450);
            this.Controls.Add(this.panel1);
            this.Controls.Add(this.statusStrip1);
            this.Controls.Add(this.toolStrip1);
            ((System.ComponentModel.ISupportInitialize)(this.pictureBox1)).EndInit();
            this.panel1.ResumeLayout(false);
            this.panel1.PerformLayout();
            this.toolStrip1.ResumeLayout(false);
            this.toolStrip1.PerformLayout();
            this.statusStrip1.ResumeLayout(false);
            this.statusStrip1.PerformLayout();
            this.ResumeLayout(false);
            this.PerformLayout();

        }
        #endregion

        private System.Windows.Forms.PictureBox pictureBox1;
        private System.Windows.Forms.Panel panel1;
        private System.Windows.Forms.ToolStrip toolStrip1;
        private System.Windows.Forms.ToolStripButton toolStripButton1;
        private System.Windows.Forms.ToolStripButton toolStripButton2;
        private System.Windows.Forms.ToolStripComboBox toolStripComboBox1;
        private System.Windows.Forms.ToolStripButton toolStripButton3;
        private System.Windows.Forms.ToolStripButton toolStripButton4;
        private System.Windows.Forms.StatusStrip statusStrip1;
        private System.Windows.Forms.ToolStripStatusLabel toolStripStatusLabel1;
    }
}

Designer.csを限界まで削ったので何か不具合があるかもしれません^^;

Answer 3

Imageオブジェクトを使わずにGraphicsオブジェクトを採用しました。また、線の描画の後、始点の更新など追加したことで無事複数の線を描画することができました。
下記が修正後のコードを一部抜粋したものです。
ご回答してくださった方々ありがとうございました。

private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
        {




                if (btnSolidWasClicked)
                {
                //Graphicsオブジェクトを作成
                Graphics g = this.pictureBox1.CreateGraphics();
                g.SmoothingMode = SmoothingMode.AntiAlias;
                //Penオブジェクトの作成
                Pen GreenPen = new Pen(Color.White, 3);
                //破線
                GreenPen.DashStyle = DashStyle.Solid;
                //座標の表示
                label1.Text = string.Format("Screen Position : {0:d}, {1:d}",
                Cursor.Position.X, Cursor.Position.Y);

                if (lsp_flag)
                {
                    lep = e.Location;
                    g.DrawLine(GreenPen, lsp, lep);
                    lsp = lep;
                    g.Dispose();
                    GreenPen.Dispose();
                } else
                {
                    lsp = e.Location;
                    g.DrawRectangle(GreenPen, lsp.X, lsp.Y, 0.1f, 0.1f);
                    g.Dispose();
                    GreenPen.Dispose();
                    lsp_flag = true;
                }
                //右クリックで終点判断
                if (e.Button == MouseButtons.Right)
                {
                    lsp_flag = false;
                }


                }
}

Comments

[TN8001]

ウィンドウのリサイズや最小化から戻したときなどで、線が消えてしまいませんか？
それで十分ならすいません。

[YAmaGNZ]

pictureBox1.CreateGraphicsだとPicutreBox自体の描画に使われるGraphicsオブジェクトなのでImageプロパティにセットする画像と関係ない部分での描画となります。
この為、再描画が行われると標準のコントロールの描画が行われて、描いた線が消えます。
Imageプロパティに設定した画像からGraphicsオブジェクトを作成すべきです。

Answer 4

点Aをクリック
点Bをクリック（点A－点Bの直線を描画）
点Cをクリック（点B－点Cの直線を描画）

という動作であれば

・最初のクリック
始点保持のフラグが立っていないので始点としてクリック座標を記憶
始点を保持したとフラグを立てる

・2回目以降のクリック
始点保持のフラグが立っているので始点とクリック座標間で直線を描画
クリック座標を始点として保持

このような処理を行えばいいのではないでしょうか。

もし、この後にUNDO機能など考えているのであれば、クリックされた座標をList<Point>なりで保持しGraphics.DrawLinesメソッドにて描画するなど考えた方がいいかもしれません。