C# 2つのpictureBoxを一つに重ねるやり方について

###前提・実現したいこと
C#,visual studioを使ってお絵かきソフトを作成しています。
直線描画（クリック中は軌跡が表示される）が出来るようにしたいのですが、１本目は問題なく描画できるのですが、２本目を描画しようとすると（マウスムーブ時）にpictureBoxをリフレッシュするため前回描画した線が消えてしまいます。そこで透明なpictureBoxを上に重ねて描画後に合成したいと思っていますがどのようにすればわからずにつまずいております。この方法が可能であればやり方を、もっと良いやり方があればそちらも併せて教えていただけると助かります。どうぞよろしくお願いいたします。

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace 直線描画
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();

    }
    private void Form1_Load(object sender, System.EventArgs e)
    {
        // Graphics オブジェクトの取得
        _bitmap = new Bitmap(Screen.PrimaryScreen.WorkingArea.Width,
                                       Screen.PrimaryScreen.WorkingArea.Height);
        pictureBox1.Parent = pictureBox2;


    }
    Graphics grfx;  // Graphics オブジェクト
    int start = 0;  // 1 = 始点 確定
    int startX;     // Line X 始点
    int startY;     // Line Y 始点
    int end = 0;    // 1 = 終点 確定
    int endX;       // Line X 終点
    int endY;       // Line Y 終点
    Bitmap _bitmap = null;

    private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
    {
        grfx = Graphics.FromImage(_bitmap);
        start = 1;
        startX = e.X;
        startY = e.Y;

    }

    private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
    {
        if (start == 0) return;
        end = 1;
        endX = e.X;
        endY = e.Y;
        pictureBox1.Refresh();  // マウスのドラッグ中の直線表示を要求
    }

    private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
    {
        start = 0;
        if (end == 0) return;
        end = 0;

        grfx.DrawLine(Pens.Magenta, startX, startY, endX, endY);
        //pictureBox1.Refresh();
        grfx.Dispose();
    }

     private void pictureBox1_Paint(object sender, PaintEventArgs e)
    {
        // マウスのドラッグ中の直線表示
        if (end == 0) return;
        e.Graphics.DrawLine(Pens.Magenta, startX, startY, endX, endY);
    }
    
}

}

行動規範の内容に同意します

回答1件

ベストアンサー

PictureBoxはImageプロパティに設定したビットマップを表示するためのコントロールです。ビットマップを表示するには、Paintイベントで何か描くのではなく、Imageプロパティに設定したビットマップに描画してください。そうすれば、Paintイベントで自動的に表示されます。
Imageを設定せずにPaintイベントで何か描いたとしても、それはどこにも残らないので、次のPaintイベント実行時に消されてしまいます。

とりあえず、各メソッドをこのようにすれば線が描かれると思います（意図通りかは判りませんが）。
※Paintイベントは削除して、MouseUpイベントを追加してください。

C#
1private void Form1_Load(object sender, System.EventArgs e)
2{
3	pictureBox1.Image = new Bitmap(pictureBox1.ClientRectangle.Width, pictureBox1.ClientRectangle.Height);
4	grfx = Graphics.FromImage(pictureBox1.Image);
5}
6
7private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
8{
9	start = 1;
10	startX = e.X;
11	startY = e.Y;
12}
13
14private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
15{
16	if(start == 0)
17		return;
18	grfx.DrawLine(Pens.Magenta, startX, startY, e.X, e.Y);
19	startX = e.X;
20	startY = e.Y;
21	pictureBox1.Invalidate();
22}
23
24private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
25{
26	start = 0;
27}

もしかしてこういうことかと思い、ちょっとプログラムを手直ししてみました。
マウスボタンを押した位置から離した位置を直線で結ぶような感じです。2枚の絵を合成する方法で描いています。

C#
1private void Form1_Load(object sender, EventArgs e)
2{
3	int width = pictureBox1.ClientRectangle.Width;
4	int height = pictureBox1.ClientRectangle.Height;
5	pictureBox1.Image = new Bitmap(width, height);
6	imageBg = new Bitmap(width, height);
7	imageFg = new Bitmap(width, height);
8	grfx = Graphics.FromImage(pictureBox1.Image);
9	graphBg = Graphics.FromImage(imageBg);
10	graphFg = Graphics.FromImage(imageFg);
11	// とりあえず背景を白でクリア。これをやらないとうまく合成できない
12	graphBg.Clear(Color.White);
13	grfx.DrawImage(imageBg, 0, 0);
14}
15
16Bitmap imageBg;     // 背景となるイメージ
17Bitmap imageFg;     // 手前のイメージ。ドラッグ中はここに線を描画する
18Graphics graphBg;   // 背景描画用
19Graphics graphFg;   // 手前描画用
20
21Graphics grfx;  // Graphics オブジェクト 
22int start = 0;  // 1 = 始点 確定 
23int startX;     // Line X 始点 
24int startY;     // Line Y 始点 
25int end = 0;    // 1 = 終点 確定 
26int endX;       // Line X 終点 
27int endY;       // Line Y 終点 
28
29private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
30{
31	start = 1;
32	startX = e.X;
33	startY = e.Y;
34}
35
36private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
37{
38	if(start == 0)
39		return;
40	endX = e.X;
41	endY = e.Y;
42	// 手前のイメージを透明でクリアしてから線を描画
43	graphFg.Clear(Color.FromArgb(0));
44	graphFg.DrawLine(Pens.Magenta, startX, startY, e.X, e.Y);
45	// 背景と合成してPictureBoxのイメージに描画
46	grfx.DrawImage(imageBg, 0, 0);
47	grfx.DrawImage(imageFg, 0, 0);
48	pictureBox1.Invalidate();
49}
50
51private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
52{
53	start = 0;
54	// 背景のイメージに手前のイメージを合成。線が確定
55	graphBg.DrawImage(imageFg, 0, 0);
56}

PictureBoxが重ねられないと勘違いしていたので、改めてプログラムを手直ししてみました。
PictureBox2枚重ね版です（pictureBox1が手前で2が背景）。前より少しだけコード量が少なくなりますね。

C#
1private void Form1_Load(object sender, EventArgs e)
2{
3	pictureBox1.Parent = pictureBox2;
4	pictureBox1.Size = pictureBox2.Size;
5	pictureBox1.Location = new Point(0, 0);
6	pictureBox1.BackColor = Color.Transparent;
7
8	int width = pictureBox1.ClientRectangle.Width;
9	int height = pictureBox1.ClientRectangle.Height;
10	pictureBox1.Image = new Bitmap(width, height);
11	pictureBox2.Image = new Bitmap(width, height);
12
13	grfxFg = Graphics.FromImage(pictureBox1.Image);
14	grfxBg = Graphics.FromImage(pictureBox2.Image);
15}
16
17Graphics grfxBg;  // Graphics オブジェクト 
18Graphics grfxFg;  // Graphics オブジェクト 
19int start = 0;  // 1 = 始点 確定 
20int startX;     // Line X 始点 
21int startY;     // Line Y 始点 
22int end = 0;    // 1 = 終点 確定 
23int endX;       // Line X 終点 
24int endY;       // Line Y 終点 
25
26private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
27{
28	start = 1;
29	startX = e.X;
30	startY = e.Y;
31}
32
33private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
34{
35	if(start == 0)
36		return;
37	endX = e.X;
38	endY = e.Y;
39	// 手前のイメージを透明でクリアして線を描画
40	grfxFg.Clear(Color.FromArgb(0));
41	grfxFg.DrawLine(Pens.Magenta, startX, startY, e.X, e.Y);
42	pictureBox1.Invalidate();
43}
44
45private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
46{
47	start = 0;
48	// 背景のイメージに手前のイメージを合成。線が確定
49	grfxBg.DrawImage(pictureBox1.Image, 0, 0);
50}