[C#]取得画像表示上でマウス座標がずれる。（PictureBoxSizeMode.Zoomの倍率を取得し、マウス座標に合わせたい。）

Question

###エラー内容、解決したい内容が異なります。[以前の質問]

前提・実現したいこと

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

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

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

画像をローカルからD&Dでアプリ側で表示し、その上でD&Dをした際に点線の四角形は出現して枠組みまではできますが、その枠がマウスポインターとずれる。

###コード

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 OCR_Application : Form
    {
        Point MD = new Point();
        Point MU = new Point();
        Bitmap backgroundBitmap;//20190605
        Bitmap offscreenBitmap;
        Bitmap cut_change_canvas;
        bool view = false;
        float scale;

        public OCR_Application()
        {
            InitializeComponent();
            //プロパティの設定変更
            pictureBox1.AllowDrop = true;
            pictureBox1.Parent = panel1;

        }

        //画像をローカルからD&Dしアプリ内に置くメソッド1
        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];
                //textBox1.Text += fileName + "\r\n";

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

                //offscreenBitmap = new Bitmap(pictureBox1.Width, pictureBox1.Height);

                offscreenBitmap = new Bitmap(backgroundBitmap);

                //表示方法
                pictureBox1.SizeMode = PictureBoxSizeMode.Zoom;

　　　　　　　　　//α

                pictureBox1.Image = offscreenBitmap;

                
            }
        }
        //画像をローカルからD&Dしアプリ内に置くメソッド2
        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);

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

        }


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

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

        }

        //アプリ内画像の範囲指定の際のD&Dをしマウスポインターが動いている最中の座標取得
        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);

            pictureBox1.BackgroundImageLayout = ImageLayout.Zoom;

            //初めにとっておいた背景bitmapを表示
            pictureBox1.BackgroundImage = backgroundBitmap;

            //bitmapの透過
            offscreenBitmap.MakeTransparent();

            //Imageを表示
            pictureBox1.Image = offscreenBitmap;//最後の点線四角形が描画される
        }

        //アプリ内画像の範囲指定の際のD&Dをし終えた最後の座標取得
        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);

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

試したこと

上のコードのαの位置に以下コードを追加しまずpictureBox1のZoomによって元画像が何倍で縮小されているのか表示しようと思いました。

                scale = Math.Min(pictureBox1.Width / offscreenBitmap.HorizontalResolution, pictureBox1.Height / offscreenBitmap.VerticalResolution);

また、上のコードのβの場所に以下コードを記載し、マウスポインターの位置を調整しようと試みました。

            
            //縮小された長さと元の長さの差分を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);
            

次にγの場所に以下コードを追記しました。

            
            //縮小された長さと元の長さの差分を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);
            

でもこのように調整しても座標はずれてしまっていました。
考えられる原因は以下です。
１：そもそも倍率がうまく抽出できていない
２：ただの倍率ではなくpictureのzoomは中心座標などを使い縮小表示している？

###現在の状況
◆アプリにD&Dする画像サイズ（水色塗り）

◆D＆D後の左上の×印から右下の×印に向かってD&Dをしたところ、左角にある点線が表示されます。
（自分で試したαβγを行ったときは点線が現れませんでした。）

参考になるサイト、書籍、ヒント、アドバイスよろしくお願い致します。

Comments

[ikedas]

マウスポインタの位置を画像に×印などで書き込んで下さいますか。あとコードは```で囲んだほうが見やすいです。

[dendenmushi]

ありがとうございます。コードくくれていませんでした。画像も現状のをアップし修正しました。よろしくお願い致します。

Answer 1

試していないので違っていたらすみませんが、

pictureBox1.SizeModeで指定するのはあくまでもビットマップの表示方法であって、pictureBox1上の座標が変換されるわけではないです。またZoomにするとビットマップの縦横比率は保持してピクチャボックスいっぱいになるように表示するので、ビットマップの左上隅がピクチャボックスの左上隅に来るとは限りませんよね。

まずは、Graphics g = pictureBox1.CreateGraphics();として、ピクチャボックス自身に四角形を描画する (縮小率の計算は不要です) ようにし、それがうまくいってから画像のどこを切り取ったかを計算する方法を考えてはどうでしょうか。

---

なおついでに、MouseLeaveが発生したときもviewをリセットして描画をクリアすべきかとも思います。

Comments

[dendenmushi]

回答ありがとうございます。試してみます。いろいろ皆様から回答頂き感謝です。

Answer 2

まず、本質問とは直接関係がありませんが、ラバーバンドの描画方法にかなり無駄な部分があるかと思います。
MouseMoveイベントにていろいろやっていますが、ラバーバンドの座標決定のみを行い、描画はPaintイベントにて行うほうがよろしいかと思います。

Point start;
Point end;


//画像をローカルからD&Dしアプリ内に置くメソッド1
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);

        pictureBox1.Invalidate();
    }
}

//四角形に描くメソッド
private void DrawRegion(Graphics g, Point start, Point end)
{
    using (Pen blackPen = new Pen(Color.Black))
    {
        // 描画する線を点線に設定
        blackPen.DashStyle = System.Drawing.Drawing2D.DashStyle.Dash;
        g.DrawRectangle(blackPen, start.X, start.Y, GetLength(start.X, end.X), GetLength(start.Y, end.Y));
    }

}

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

    // Mouseを押した座標を記録
    MD = e.Location;
    start = e.Location;
    end = e.Location;

}

//アプリ内画像の範囲指定の際のD&Dをしマウスポインターが動いている最中の座標取得
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
    // 描画フラグcheck
    if (view)
    {
        // 座標から(X,Y)座標を計算
        GetRegion(MD, e.Location, ref start, ref end);

        // 領域を描画
        pictureBox1.Invalidate();
    }
}

//アプリ内画像の範囲指定の際のD&Dをし終えた最後の座標取得
private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
{
    // 座標から(X,Y)座標を計算
    GetRegion(MD, e.Location, ref start, ref end);

    // 領域を描画
    pictureBox1.Invalidate();

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

}

private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
    // 画像を表示する。
    // このままではアスペクト比が崩れるのでその辺を考えてください
    if(backgroundBitmap != null) e.Graphics.DrawImage(backgroundBitmap, e.ClipRectangle);

    DrawRegion(e.Graphics,start, end);

}

元のソースからあまり変更せずに書きましたので、細かい部分までは見ていません。
DrawImageのアスペクト比保持に関しては、検索すればいろいろ出てくるかと思います。
この方法の場合、Imageの描画を自前で行っていますのでSizeModeプロパティは関係ありません。

それで、PictureBoxの座標からImageの座標への変換関数を作ってやれば、画像のトリミングを
行えるかと思います。

Comments

[dendenmushi]

Imageの描画を自前で…勉強不足ですぐに理解できませんでした。試してまた報告させて頂きます。本当に感謝です。ありがとうございます。

Answer 3

αの位置なら、pictureBox1.SizeMode は AutoSize なので、拡大縮小率は100パーセントです。
また、拡大縮小率なら、解像度は関係ありません。100ドットのものを90ドットの所に表示したとしたら、拡大縮小率はいくらですか？というような各種の値を知って、「どうあるべき」を事前に組み立て、実際の値を調べて検証してください。
βに書こうとしているコードも、おかしいです。「率」のはずなのに、「足す」ってなんですか？

スクロールバーを出すようにしたPanelの上にAutoSizeにしたPictureBoxを置くのが、何も変換する必要がないので楽です。

Comments

[dendenmushi]

大変申し訳ないです。AutoSizeが間違えでZoomで行ったところ現状の画像のような状態になっております。コードの個所修正しました。
おっしゃるとおりでAutosizeで表示したほうがスクロールバーで表示されて大変楽にできたのですが、指定範囲を切り取るという作業をしていけるようにしたいので、Zoomで全体を見れるようにしたほうがいいと思っていまして、zoomの縮小率を出すやり方を調べているのですが、今わからない状態におります。