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

前回の記事で、マウスの動きに合わせて黒丸を動かすことが出来るようになりました。しかしながら、これは単純なFormの上での話です。

次は、これを輪切り描画プログラムに移植します。

前回の記事では、Paintイベントのイベントハンドラとして自前のメソッドを準備して、その中に描画処理を記述し、メソッド黒丸を描く座標を指定した後に、Invalidateメソッドを呼び出してPaintイベントを発生させ、描画するという流れの処理を書きました。

最初は、これを単純に今まで作ってきた輪切り画像描画プログラムに持っていくことを考えました。

当初からあるMouseMoveイベントのイベントハンドラの中に、黒丸を描く座標を計算し、再描画のためのInvalidate()メソッドを呼び出すコードを入れます。

なお、リスト中のマウス座標を取得するメソッドgetMousePosition()は、以前のCursor.Positionプロパティを読んで座標変換する処理方法から、MouseMoveイベントの引数として与えられるウインドウ内座標系のマウス座標を、描画データの座標系に変換する処理に変更しました。

        
  リスト1 MouseMoveイベントのイベントハンドラ
        private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
        {
            // イベントが発生したときのマウス座標を取得
            Point point = new Point( e.X, e.Y ); 
            // この処理で、ウィンドウ座標で入手したマウス座標を、データ座標系に変換
            getMousePosition( point );           
            //黒丸を描く座標を算出
            this.pt = new Point(e.X - (size.Width / 2), e.Y - (size.Height / 2));
 　　　　　　　　　　// 描画処理で使う座標をグローバル変数に設定、
　　　　　　　　　　　// 新たにインスタンスを作る必要がないと思うので、pointをそのまま代入
            this.pt2 = point;     

            this.Invalidate();       // 再描画
        }

さらに、前回のプログラムと同様にOnPaint()メソッドをオーバーライドして丸を描くコードを入れます。なお、pictureBox1は背景が黒なので、丸の色を白に変更しています。

リスト2 描画メソッド
        protected  override void OnPaint(PaintEventArgs e)
        {
            base.OnPaint(e);
            Brush brush = new SolidBrush(Color.White);

            e.Graphics.FillEllipse(brush, pt.X, pt.Y, size.Width, size.Height);
        }

ところが、この方法はうまくいきません。白い丸がForm1の上で動いているのを黒いpictureBoxが隠してしまっているように見えます。試しにthis.Invalidate();を、this.pictureBox1.Invalidate();に変更すると、丸は動かなくなります。どういうことでしょうか？

ここからは私の推理ですが、リスト1におけるthis.Invalidate();のthisはpictureBox1ではなくて、Form1を指しています。また、リスト2におけるOnPaint()の基底クラスはForm1.OnPaint()になるんだと思います。

つまり、再描画要求はあくまでもForm1に対する再描画要求であり、描画処理もForm1に対するOnPaint()メソッドのオーバーライドになります。つまりpictureBox1は蚊帳の外でなのです。

this.Invalidate();をthis.pictureBox1.Invalidate();に変更した場合は、再描画要求は出るものの、pictureBox1には何も描画されていない状況であるのに加えて、再描画処理は何も手を加えていないpictureBox1の再描画処理が走るだけ。

そしてForm1のOnPaintは起動しないので、Form1内に描画をするコードが動かず、何も起こらない、丸は動かない、ということになるのだと思います。

pictureBox1にも再描画の為のOnPaintメソッドはあるのですが、これはPictureBoxクラスの中のメソッドなので、Form1からオーバーライドして使ったりすることはできません。

色々調べ回って試行錯誤した結果、PaintイベントのイベントハンドラをOnPaintメソッドのオーバーライドとして記述するのではなく、Visual StudioのpictureBox1のプロパティから、明示的にイベントハンドラを定義すればよいのではないか、ということになりました。

これに加えて、再描画要求をthis.pictureBox1.Invalidate();と記述し、要求先をpictureBox1に、明示的に指示することにしました。

これによって、動作の流れは、MouseMoveイベント→描く丸の座標を計算→pictureBox1再描画要求→pictureBox1のPaintイベント発生→pictureBox1への描画処理、という流れに明確化します。

描画処理のコードは以下のようにしました。

リスト3　再描画メソッド
        private void pictureBox1_Paint(object sender, PaintEventArgs e)
        {
            Brush brush = new SolidBrush(Color.White);

            //ここに図形を描く処理を追加すると、マウスの動きに合わせてその図形が動いてくれるようになる。
            e.Graphics.FillEllipse(brush, pt.X, pt.Y, size.Width, size.Height);
        }

このような動作になります。

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

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

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

ここからさらに進化させて、マウスカーソルの動きに合わせて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の中でマウスの動きに合わせて直線を動かす処理を次回入れたいと思います。

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

マウスカーソルを変える 〜 使いやすさを求めて

前回で、輪切り画像の描画処理は一通り開発を終わりました。

ただ、輪切りをする場所を指定する画面の使いやすさを、もう少し向上したいと思ったんです。要するに、どこで切るのかを操作している人がわかりやすい仕掛けを入れたいと思った、ということです。

一番簡単な方法は、必要なときにマウスカーソルの形状を縦棒もしくは横棒に変えると言うものだと思います。マウスカーソルのライブラリーにはVSplit、HSplitという名前のカーソルがあるので、これを使います。

プログラムの中に、輪切り画像作成モードを設定する処理、checkBox1_CheckedChanged()、checkBox2_CheckedChanged()という2つのメソッドがあります。輪切り画像作成モードに入る為のボタンを押したときに呼び出されるイベントハンドラです。この中で、マウスカーソルの切替をします。

         /* X軸に垂直な平面で輪切りにする場合の処理 */
        private void checkBox1_CheckedChanged(object sender, EventArgs e)
        {
            if (checkBox2.Checked && !event_by_inner1)
            {
                event_by_inner1 = true;
                checkBox2.Checked = false;
            }

            event_by_inner1 = false;

            if (checkBox1.Checked)
            {
                checkBox1.Text = "Push Button to stop getting mouse position X-axis";
                button1_on = true;
                mouse_x = mouse_y = 0; // マウス座標データ初期化
                // マウスカーソルを、縦向きに分割するようなものに変更
                this.pictureBox1.Cursor = System.Windows.Forms.Cursors.VSplit;
                // マウスイベント有効
                ctrlEvent(true);
            }
            else
            {
                checkBox1.Text = "Push Button to start getting mouse position X-axis";
                button1_on = false;
                // マウスカーソルを元に戻す
                this.pictureBox1.Cursor = System.Windows.Forms.Cursors.Default;
                // マウスイベント削除
                ctrlEvent(false);
            }
        }

X軸に垂直な平面で輪切りにするモードに遷移したら、pictureBox1.CursorプロパティをSystem.Windows.Forms.Cursors.VSplitに書き換えて縦向きの直線に変更し、輪切りモードから通常モードに遷移したらSystem.Windows.Forms.Cursors.Defaultに書き換えてデフォルトのマウスカーソルに戻します。

         /* Y軸に垂直な平面で輪切りにする場合の処理 */
        private void checkBox2_CheckedChanged(object sender, EventArgs e)
        {
            if (checkBox1.Checked && !event_by_inner1)
            {
                event_by_inner1 = true;
                checkBox1.Checked = false;
            }

            event_by_inner1 = false;

            if (checkBox2.Checked)
            {
                checkBox2.Text = "Push Button to stop getting mouse position Y-axis";
                button2_on = true;
                mouse_x = mouse_y = 0; // マウス座標データ初期化
                // マウスイベント有効
                // マウスカーソルを水平の向きに分割するものに変更
                this.pictureBox1.Cursor = System.Windows.Forms.Cursors.HSplit; 
                ctrlEvent(true);
            }
            else
            {
                checkBox2.Text = "Push Button to start getting mouse position Y-axis";
                button2_on = false;
                // マウスカーソルを元に戻す
                this.pictureBox1.Cursor = System.Windows.Forms.Cursors.Default; 
                // マウスイベント削除
                ctrlEvent(false);
            }
        }

Y軸に垂直な平面で輪切りにするモードに遷移したら、pictureBox1.CursorプロパティをSystem.Windows.Forms.Cursors.HSplitに書き換えて横向きの直線に変更し、輪切りモードから通常モードに遷移したらSystem.Windows.Forms.Cursors.Defaultに書き換えてデフォルトのマウスカーソルに戻します。

動作の様子をアニメーションgifにしてみました。下に貼り付けます。

今回はここまでです。