マウスに合わせて図形を動かす 〜 使いやすさを求めて

前回、輪切り画像作成に於いて、どこで切るのかを指示するときに、切る場所をわかりやすく見せるために、マウスカーソルの形状を変えてみました。

ここからさらに進化させて、マウスカーソルの動きに合わせてpictureBoxの中を縦に又は横に貫く直線を動かし、輪切りする場所をよりわかりやすく表示、指定できるようにしたいと思います。そのための準備として、マウスに合わせて図形を動かす方法を研究します。

マウスの動きに合わせて連続的に物体を動かす

世の中、インターネットを検索すると、マウスの動きに合わせて何かを動かす、というプログラムの例は沢山出て来ます。需要が多いのでしょう。

以下は、Formを表示させ、その中で黒丸をマウスの動きに合わせて動かす、というプログラムです。色々なWebで勉強させていただき、Wisdom Soft様で学ばせていただいたプログラムです。

リスト1 マウスの動きに合わせて黒丸がうごく
（名前空間参照の為のusingは省略）

namespace mousetest
{
    public partial class Form1 : Form
    {
        private Point pt;  // 黒丸の座標を保持
        private Size size = new Size(40, 40);  // 黒丸のサイズを保持

        private void Test_MouseMove( object sender, MouseEventArgs e )
        {
            // Point構造体に、これから黒丸を描く座標を設定
            this.pt = new Point(e.X - (size.Width / 2), e.Y - (size.Height / 2));
            // Form1のコントロール領域を無効にして、描画メッセージを送る
            this.Invalidate();
        }

　　　　　　　// OnPaintメソッドをオーバーライド
        protected override void OnPaint(PaintEventArgs e) 
        {
            base.OnPaint(e);  // 継承元クラスの再描画処理を実施
            Brush brush = new SolidBrush(ForeColor);  // これから黒丸を描くのに使うブラシを設定
            e.Graphics.FillEllipse(brush, pt.X, pt.Y, size.Width, size.Height);  // 黒丸を描画
        }

        
        public Form1()
        {
            InitializeComponent();
            // MouseMoveイベントのイベントハンドラとしてTest_MouseMoveを登録
            this.MouseMove += new MouseEventHandler(Test_MouseMove);
        }
    }
}

上記リストにおいて、MouseMoveイベントのイベントハンドラとしてTest_MouseMoveメソッドを記述しています。

この中では、これから描く黒丸の中心の座標を、MouseMoveイベントへの引数の中にあるマウスマーソルの座標と黒丸の大きさから計算し、Point構造体ptに設定した後、再描画要求の為にthis.Invalidate()メソッドを呼び出しています。これによってOnPaintイベントが発生します。

一方、通常のOnPaint()メソッドをオーバーライドして定義している、このプログラムのOnPaint()メソッドでは、通常のOnPaintイベントで実行されるはずの再描画処理をbase.OnPaint(e);で実行した後、黒丸を描くための描画ブラシの設定と描画処理を実施します。

base.OnPaint(e);の呼び出しで、黒丸を描く前のウインドウの中の絵柄が描画されるので、移動前の黒丸は消えて、移動後の黒丸が描かれる、という仕組みです。

この方式を活用して、PictureBoxの中でマウスの動きに合わせて直線を動かす処理を次回入れたいと思います。

今日はここまでにします。