C#でpictureBoxの上に編集用の枠を描画したい

Question

pictureBoxの上に画像にあるような編集用の枠（移動・スケールあり）を作りたいと思っていますが、このような描画を作ったことがないのでどのように作るのかお教えいただければと思います。

画像のグレーの部分がpictureBoxに表示される画像です。
そして破線の枠が今回作りたいと思っている編集用の枠です。

一応自分でやってみた方法は、pictureBoxの上にもうひとつ編集枠用のpictureBoxを表示してみました。

しかし、編集枠の上下左右にある□をどうやって作るのかがわかりません。
ネットで検索しているのですが、そもそもこのような描画をなんていうのかわからず行き詰まりましたのでこちらで質問させていただきました。

なお、この編集枠は画像を表示するpictureBoxに描画はしない方法がよいです。マウスで移動したりスケールしたりしますので、pictureBoxの上に重ねるようにして配置したいです。
今は、
pictureBox_child.Parent = pictureBox_parent;
のようにしています。

どうぞ宜しくお願いします。

開発環境：
windows10 + VisualStudio 2015 C# FrameWork4 (or 4.5)

---

追加情報

右と下のラインをドラッグするとラインが残ってしまいます（上と左のラインは問題ありません）。

Answer 1

言われてみれば、私もその部分の正式名称を知りませんでした。なんて言うのですかね（サイズ変更つまみ？）。さすがに名前がわからないと検索難しいですね。

ちょっと判りづらいのですが、要するに、マウスのドラッグでサイズ変更できるような編集枠をPictureBoxで作りたいということでよろしいでしょうか。
それなら、ウィンドウメッセージのWM_NCHITTESTに反応して然るべき値を返せば、移動させたり端をドラッグしてサイズ変更したりできるようになります。

仮想メソッドをオーバーライドするので、PictureBoxを派生させる必要がありますが、このような感じでマウスによるサイズ変更と移動が可能なPictureBoxを作ることができます。

class SizablePictureBox : PictureBox
{
	protected override void WndProc(ref Message m)
	{
		const int WM_NCHITTEST = 0x0084;
		const int HTCAPTION = 2;
		const int HTLEFT = 10;
		const int HTRIGHT = 11;
		const int HTTOP = 12;
		const int HTTOPLEFT = 13;
		const int HTTOPRIGHT = 14;
		const int HTBOTTOM = 15;
		const int HTBOTTOMLEFT = 16;
		const int HTBOTTOMRIGHT = 17;
		if(m.Msg == WM_NCHITTEST)
		{
			var pos = new Point((int)m.LParam & 0xFFFF, ((int)m.LParam >> 16) & 0xFFFF);
			pos = this.PointToClient(pos);
			if(pos.Y <= 20)
			{
				if(pos.X <= 20)
				{
					m.Result = (IntPtr)HTTOPLEFT;
				}
				else if(pos.X > this.Width - 20)
				{
					m.Result = (IntPtr)HTTOPRIGHT;
				}
				else
				{
					m.Result = (IntPtr)HTTOP;
				}
			}
			else if(pos.Y > this.Height - 20)
			{
				if(pos.X <= 20)
				{
					m.Result = (IntPtr)HTBOTTOMLEFT;
				}
				else if(pos.X > this.Width - 20)
				{
					m.Result = (IntPtr)HTBOTTOMRIGHT;
				}
				else
				{
					m.Result = (IntPtr)HTBOTTOM;
				}
			}
			else if(pos.X <= 20)
			{
				m.Result = (IntPtr)HTLEFT;
			}
			else if(pos.X > this.Width - 20)
			{
				m.Result = (IntPtr)HTRIGHT;
			}
			else
			{
				m.Result = (IntPtr)HTCAPTION;
			}
			return;
		}
		base.WndProc(ref m);
	}
}

この例では端のドラッグでサイズ変更、それより内側で移動となります。

Comments

[退会済みユーザー]

ありがとうございます！
まず、WndProcというのを初めて知りました・・・。
ウインドウメッセージを受け取って処理するメソッドなのですね。
ちょっと調べてみましたがなかなか難しい・・・。
catsforepawさんが示していただいたコードの処理、なぜこのようなことがわかるのかも今の私には到底及ばないものでした・・・。
なんとなくマウスの位置を取得して処理しているのはわかります。

あと、枠の上と左のライン（辺）をドラッグすると問題なくサイズ変更できるのですが、右と下のラインをドラッグすると描画がおかしくなります。
これはなぜそうなるのかわかりますでしょうか・・・？
（※質問の追加情報に画像を追加しました。）

また、枠の上下左右と四隅に□を描画することは可能でしょうか？
（編集用枠としてpictureBoxを使わなくてもよいのですが・・・）
お手数ですがどうぞ宜しくお願いします。

[catsforepaw]

ウィンドウメッセージはWindowsのウィンドウ制御の仕組みを理解しないと難しいかもしれませんね。イベント駆動の一種ですが、そのメカニズムにメッセージ通信を利用するようなイメージで、各種機能を割り当てたメッセージをやりとりすることで様々な制御を行っています。

余計なラインが残るのは、たぶん、サイズが変わってラインを描き直す際に、前のを消さずに残しているからだと思います。
まず透明色(ARGB=0)でクリア（Clearメソッド）してからラインを描くようにすると余分なラインは残らないと思います。

□の描画は単純に`DrawRectangle`で良いのではないでしょうか。小さな正方形の左上と右下の座標を計算してDrawRectangleに渡せば四角を描いてくれます。

[退会済みユーザー]

すみません、枠の上下左右の四隅の□は、PanelをpictuewBox_childの子にすることでとりあえず解決しました。
しかしせっかくお教えいただいたのでDrawRectangleでもやってみようと思います。

あと余計なラインの部分も修正してみます。
ご親切にありがとうございます！

次の質問なのですが、ドラッグ中にイベントを発行できるようにしたいのです。
ドラッグしてサイズや位置が変更されたらLabelにその数値を表示させようと思っています。

[退会済みユーザー]

何度もすみません・・・。
上記の

>ドラッグ中にイベントを発行できるようにしたいのです。
>ドラッグしてサイズや位置が変更されたらLabelにその数値を表示させようと思っています。

これは単純にMoveイベントを追加するだけで実現できました。
protected override void WndProc(ref Message m)メソッドの中にイベントを書かないといけないかと思っていました。

[catsforepaw]

> これは単純にMoveイベントを追加するだけで実現できました。

はい。WndProcメソッドの最後で基底クラスのメソッドを呼んでいるので、WM_NCHITTEST以外は従来のままで問題ありません。

> PanelをpictuewBox_childの子にすることでとりあえず解決しました。

□部分を別のコントロールで表示するという発想は思いつきませんでした。確かにそれでもいけそうですね。
ただ、フォームアプリでは透過処理をさせると描画がかなり重くなるので、いくつもコントロールを重ねると、ドラッグで動かしたときに表示が乱れるかもしれません。

グラフィカルなアプリを作るときは`WPF`(Windows Presentation Foundation)が具合が良いですよ。描画処理にDirect3Dを使っているのでフォームアプリと違って透過処理は本物ですし、描画処理が軽いのでコントロールを何枚重ねても平気です。編集枠を例に挙げると、フォームアプリではビットマップに絵を描くというやり方ですが、WPFでは絵の構成要素を配置する、というアプローチが有効なのでクリアして描き直す必要がなくなります。結果、負荷も軽くできます。
フォームアプリとは仕組みが違うのですぐに移行できるものではありませんが、興味がおありならいろいろいじってみると面白いかもしれませんよ。

[退会済みユーザー]

いろいろとありがとうございます！

>ただ、フォームアプリでは透過処理をさせると描画がかなり重くなるので、いくつもコントロールを重ねると、ドラッグで動かしたときに表示が乱れるかもしれません。

はい・・・すでにPictureBoxの上にpictureBoxを重ねているので下のほうのpictureBoxに表示している画像が移動などで乱れてしまっています・・・。
なのでDrawRectangleで描画してみようと思います。

>グラフィカルなアプリを作るときは`WPF`(Windows Presentation Foundation)が具合が良いですよ。

そうなのですね。WPFもいろいろやってみたのですがかんり勉強しないと作れそうになかったので今回見送りました。また次の機会に挑戦してみようと思います。

また、以下の

>まず透明色(ARGB=0)でクリア（Clearメソッド）してからラインを描くようにすると余分なラインは残らないと思います。

はPictureBox_child.Reflesh()を実行することで再描画されました。
いろいろとありがとうございました！
かなり実現できそうな感じです！