画像表示後にドラッグ＆ドロップで四角形選択時に画像が消えてしまう。

Question

前提・実現したいこと

C#Windowsformデスクトップアプリ内に、ローカル画像をドラッグ＆ドロップ(以下D&D)で運んで表示したあとに、その表示された画像の上でD&Dで四角を任意選択して画像を切り取り保存をしたいです。

環境：windows10 64bit
開発ツール：Visual Studio 2017 community
言語：C#（windows Forms visual C#)

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

画像をローカルからD&Dでアプリ側で表示し、その上でD&Dをした際に四角形は出現して枠組みまではできますが、その際に下の表示されている画像が消えてしまいます。

###コード
わかりづらくなってしまうので当初のpicturebox２つ使おうとしていたコードは削除しました。

試したこと

paintイベントの中にgraphics含め描画のメソッドを入れていくことも行いましたが、paintの外側にあるマウスダウンイベントなどの中でメソッド呼び込みをどうしたらよいかわからず、そもそもpaintイベントの中にマウスイベントじたいも入れ込まなければいけないのかいろいろなサイトや書籍（C＃）を見てますが、解決できませんでした。
参考サイト：
PictureBoxに線が描けません。
ラバーランドでのドラッグ範囲の切り抜き
基本描画画像が消える
イメージプロパティによくある勘違い

pictureboxを２つ重ねて上側を透過trancerateをbackcolorを選択しても四角形描画が始まるとはじめの画像表示は消えてしまいました。
あと試していない（できなかった）のはpictureboxを２つ作り、親子の関係にして上のを透過させる方法です。
最終的には四角形で切り抜き保存までを行いたいだけです。
かなり苦戦しております。どなたかご教授頂けないでしょうか。

###その後試したこと
親子関係を作りpicturebox2の方を透過で四角を描けるようにしました。

        public Form1()
        {
            InitializeComponent();
            //プロパティの設定変更
            pictureBox1.AllowDrop = true;
            //描画先とするImageオブジェクトを作成する
            bmp = new Bitmap(pictureBox1.Width, pictureBox1.Height);

            pictureBox2.BackColor = Color.Transparent;
            pictureBox2.Parent = pictureBox1;
            pictureBox2.Location = new Point(0, 0);

        }

それでも画像の方は四角指定の際のD&Dで消えてしまいました。

###現状（令和元年6月6日）
デザイン…picture1の上にあえてpicture2をずらして上に置いています。テストのため。

ドラッグ中…はじめに置いた画像picture1がpicture2が出てきたことで上半分欠ける（子の透過ができていない）

ドロップ後…四角形は最終的に目当てと違う場所に残ったが意図しない場所（picuture2だが座標がおかしい）

###6月6日16時の時点での現状
・なんとか元画像の上に四角枠を表示することができました。ありがとうございます。
・残りの課題は、四角の表示される位置が非常にずれています。

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Drawing.Imaging;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;


namespace WindowsFormsApp_20190604
{
    public partial class Form1 : Form
    {
        Point MD = new Point();
        Point MU = new Point();
        Bitmap bmp;
        Bitmap backgroundBitmap;//20190605
        Bitmap offscreenBitmap;
        bool view = false;


        public Form1()
        {
            InitializeComponent();
            //プロパティの設定変更
            pictureBox1.AllowDrop = true;
            //描画先とするImageオブジェクトを作成する
            bmp = new Bitmap(pictureBox1.Width, pictureBox1.Height);
        }
        private void pictureBox1_DragDrop(object sender, DragEventArgs e)
        {
            string[] files = (string[])e.Data.GetData(DataFormats.FileDrop, false);
            for (int i = 0; i < files.Length; i++)
            {
                string fileName = files[i];

                string filename = ((string[])e.Data.GetData(DataFormats.FileDrop))[0];
                backgroundBitmap = new Bitmap(filename);
                offscreenBitmap = new Bitmap(backgroundBitmap);//tuika15


                Console.WriteLine("offscreenBitmap:" + offscreenBitmap);
                
                //表示方法をzoomにする
                pictureBox1.SizeMode = PictureBoxSizeMode.Zoom;

                pictureBox1.Image = offscreenBitmap;
            }
        }

        private void pictureBox1_DragEnter(object sender, DragEventArgs e)
        {
            if (e.Data.GetDataPresent(DataFormats.FileDrop))
                e.Effect = DragDropEffects.Copy;
        }

        private void GetRegion(Point p1, Point p2, ref Point start, ref Point end)
        {
            start.X = Math.Min(p1.X, p2.X);
            start.Y = Math.Min(p1.Y, p2.Y);

            end.X = Math.Max(p1.X, p2.X);
            end.Y = Math.Max(p1.Y, p2.Y);
        }

        private int GetLength(int start, int end)
        {
            return Math.Abs(start - end);
        }

        private void DrawRegion(Point start, Point end)
        {
            Pen blackPen = new Pen(Color.Black);
            Console.WriteLine(bmp);
            Console.WriteLine(offscreenBitmap);

            Graphics g = Graphics.FromImage(offscreenBitmap);

                // 描画する線を点線に設定
                blackPen.DashStyle = System.Drawing.Drawing2D.DashStyle.Dash;

                // 画面を消去
                g.Clear(SystemColors.Control);

                g.DrawRectangle(blackPen, start.X, start.Y, GetLength(start.X, end.X), GetLength(start.Y, end.Y));
                
                g.Dispose();
        }

        private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
        {
            // 描画フラグON
            view = true;

            // Mouseを押した座標を記録
            MD.X = e.X;
            MD.Y = e.Y;
        }

        private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
        {

            Point p = new Point();
            Point start = new Point();
            Point end = new Point();

            // 描画フラグcheck
            if (view == false)
            {
                return;
            }

            // カーソルが示している場所の座標を取得
            p.X = e.X;
            p.Y = e.Y;

            // 座標から(X,Y)座標を計算
            GetRegion(MD, p, ref start, ref end);

            // 領域を描画
            DrawRegion(start, end);

            //backの画像表示方法指定
            pictureBox1.BackgroundImageLayout = ImageLayout.Zoom;
            //初めにとっておいた背景bitmapを表示
            pictureBox1.BackgroundImage = backgroundBitmap;
            //bitmapの透過
            offscreenBitmap.MakeTransparent();

            //Imageを表示
            pictureBox1.Image = offscreenBitmap;
        }

        private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
        {

            Point start = new Point();
            Point end = new Point();


            // Mouseを離し た座標を記録
            MU.X = e.X;
            MU.Y = e.Y;

            // 座標から(X,Y)座標を計算
            GetRegion(MD, MU, ref start, ref end);

            // 領域を描画
            DrawRegion(start, end);

            //PictureBox1に表示する

            // 描画フラグOFF
            view = false;
        }
    }
}

Comments

[Q71]

本文に書かれていることが非常にわかりにくいです。やったことは、短文で書く様にして見てください。
pictureBox2は、なんのためにありますか？

[dendenmushi]

すいません。今現在の状態を再アップします。pictureboxは下記アドバイスによりひとつにまとめました。

Answer 1

こんにちは。
検証していないのでいい加減な内容になってしまいますが参考までに。

ドラッグ＆ドロップした画像のBitmapは未加工のままメンバに取っておいてください（orgBitmap等）。
それとは別にpictureboxと同じサイズのBitmapを用意しておきます(canvasBitmap等)。

で、pitureboxには何かある度に

①canvasBitmapをクリア
②canvasBitmapにorgBitmapを描画
③canvasBitmapにトリミング用の枠を描画（なければ何もしない）
④pitureboxにcanvasBitmapを表示

・・・というようにしてみてください。

②のときアスペクト比や表示倍率の計算をしっかりやらないと、いざトリミングするときのピクセル座標がわけわからないことになりますので、その点だけご注意ください。

Comments

[dendenmushi]

回答頂き感謝します。これはpictureboxはひとつで完結しているお話でしょうか。その中にBitmapをGraphic表示するというものを２つ作り、１つは元々の、２つ目は描画する際に１つ目を描画してから四角形を描画という認識で間違えないでしょうか。

[takabosoft]

そんな認識で合ってます。

[dendenmushi]

string filename = "～ディレクトリパス";
backgroundBitmap = new Bitmap(filename);
Bitmap offscreenBitmap = new Bitmap(backgroundBitmap);
pictureBox1.Image = offscreenBitmap;

Graphics g = Graphics.FromImage(offscreenBitmap);

このようにbackgroundBitmapとして保存しつつ、offscreenBitmapを表示してから、そこにGraphicで四角形を書くように変えたのですが、画像を置いた後に中でダブルクリックすると透過されていないbitmapで上書きされて画像が見えなくなってしまうようです…

[takabosoft]

それをやるなら、何か画面を更新するときには
g.Clear()
gにoffscreenBitmapを描画
gにラバーバンドを描画
pictureBox1更新
という手順を踏んでください。

[dendenmushi]

ありがとうございます。なんとか上に四角枠を描画することができました。…がしかしめちゃくちゃ座標がずれています…pictureにD&Dした際に、そのImage幅でbitmapの大きさを指定しているためだと今のところは思っています。なんとか合わせないとですね…。今最新のコードアップします。

[dendenmushi]

＞②のときアスペクト比や表示倍率の計算をしっかりやらない
takabosoftさんのおっしゃるとおりその倍率の関係でしょうか。表示されている四角が異様にずれて表示されています…

[takabosoft]

今の作りだと、PictureBoxが画像の位置を勝手にレイアウトしたり縮小したりすると思うので（？）、その位置＆倍率とマウスでクリックした座標がさっぱり一致しないと思います。

なので、私のおすすめとしては回答欄にあるとおり、offscreenBitmapをpictureboxと同じサイズで作って、乗っかる画像の位置倍率を自分で計算して描画する方法です。
それであれば、マウスカーソルとの辻褄合わせも制御しやすいです（自分で倍率決めて描画しているので当然倍率は判っていることになりますよね）。

ちなみにそうなってくるとpictureboxを使わなくても、PanelやUserControlから派生クラスを作ってOnPaintで自前で描画コードを書いた方が手っ取り早い、という話になってきます。

[dendenmushi]

＞offscreenBitmapをpictureboxと同じサイズで作って
おそらくこちらは、offscreenBitmap = new Bitmap(pictureBox1.Width, pictureBox.Height);
と思い実装したのですが、結局そのあとに
offscreenBitmap = new Bitmap(backgroundBitmap);
をするのでダメでした。

＞乗っかる画像の位置倍率を自分で計算して描画する方法
この方法の詳細ご教授頂けないでしょうか。イメージがさっぱりわかないです。
今のpictureboxの画像から取得して表示される方法はzoomを使っております。

最終目標はただ切り取りをしたいだけになります。（言い換えれば範囲指定以外は白塗り？）その他は真っ白同じ大きさで構わないと思っております。元ある画像倍率のまま、ただ切り抜きしたいだけになります。どうかアドバイスよろしくお願い致します。

[takabosoft]

> をするのでダメでした。
そりゃそうです。
offscreenBitmap = new Bitmap(pictureBox1.Width, pictureBox.Height);
で作ったインスタンスをnew Bitmap(backgroundBitmap)という新しいインスタンスで上書きしてしまっているのですから、最初に作ったインスタンスは無かったことになります。
そうではなく、
Graphics.DrawImage（だっけ？）でoffscreenBitmapに対してbackgroundBitmapを描画先の位置・サイズを指定して描画してやります。

> この方法の詳細ご教授頂けないでしょうか。イメージがさっぱりわかないです。

表示倍率は縮小のみであれば、たぶん

float scale = Math.Min(ピクチャーボックスの幅 / 画像の幅, ピクチャーボックスの高さ / 画像の高さ);
scale = Math.Min(scale, 1);

で出ますので、検証してみてください（違ったらごめんなさい）。

[takabosoft]

あ、zoomであれば、scale = Math.Min(scale, 1);は不要です。

[dendenmushi]

素晴らしい回答ありがとうございました。非常に助かりました。またぜひ勉強させて下さい。

[dendenmushi]

すみません。もしまたこちら見られていましたら…画像をAutosizeでやり過ごしていたのですが、やはりzoomで全体をD＆Dしていく必要がありまして…その画像表示時をzoomにしてからD&D範囲指定の座標合わせについて、何か参考になるサイトなどないでしょうか。具体的に画像のzoomの倍率をしってその分、マウスにもどのように反映させるのかご教授頂けないでしょうか。よろしくお願い致します。

[dendenmushi]

ごめんなさい。上の方法でした。まず試してみます。

[dendenmushi]

//アプリ内画像の範囲指定の際のD&Dをし始めた座標取得
private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
{
// 描画フラグON
view = true;

//縮小された長さと元の長さの差分をstar.XやYに足せばよい
int eX = e.X - (e.X * (int)scale - pictureBox1.Width / 2);
int eY = e.Y - (e.Y * (int)scale - pictureBox1.Height / 2);

// Mouseを押した座標を記録
MD.X = e.X;//e.X →eX
MD.Y = e.Y;//e.Y →eY

}
//縮小された長さと元の長さの差分をstar.XやYに足せばよい
start.X = start.X - (start.X * (int)scale - pictureBox1.Width / 2);
start.Y = start.Y - (start.Y * (int)scale - pictureBox1.Height / 2);
end.X = end.X - (end.X * (int)scale - pictureBox1.Width / 2);
end.Y = end.Y - (end.Y * (int)scale - pictureBox1.Height / 2);

g.DrawRectangle(blackPen, start.X, start.Y, GetLength(start.X, end.X), GetLength(start.Y, end.Y));

zoomにしてから点線の表示もずれて、切り取られる場所もずれて、かなり四苦八苦しています。
何か参考にあるサイトなどご存知ないでしょうか。とても難しいです…。別のスレッド立てようかと思っております。本件と違いますので…

[dendenmushi]

なぜかzoomの倍率が求められていないため、pictureBoxのzoomを使わずに自分で指定倍率で縮小してみるアプローチも今考えています。おそらく使われる対象の画像はだいたい同じ大きさですのでそれで一回チャレンジしてみたいと思っています。