マウスに合わせて図形を動かす（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);
        }

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

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

いよいよC#でグラフィックの描画を始めるよ

今回はいよいよグラフィックを扱います。

WindowsでFormにグラフィックを描画する方法は何種類かあるんだそうです。今回やるのは、Graphicクラスに用意されているメソッドを使って描画する方法です。具体的には四角を描くメソッドのFillRectangleと楕円を描くメソッドのDrawEllipseです。

描画を実際に行うコードは、myframe_paint()メソッドの中のg.FillRectangle()とg.DrawEllipse()ですが、そもそもこのmyframe_paint()メソッドはMyFormのPaintイベントのイベントハンドラとして定義されていて、どこかから直接呼び出される記述にはなっていません。

また、描画操作を行う対象のGraphicsオブジェクトは、MyFormクラスのPaintイベントが発生したときにイベントハンドラに渡される引数の中の、PaintEventArgsオブジェクトのメンバーとして与えられています。

この、PaintEventArgsオブジェクトのメンバーであるGraphicsオブジェクトを使って描画するという手法は、あちこちで見かけるので、どうやらWindowsでFormに絵を描くときに使う定番の処理なんでしょう。

なお、Paintイベントというのは、何らかの理由でウインドウの再描画が必要になったときに発生するイベントだそうで、これを使って描画することによって、ウインドウのサイズを変えたり、上に別のオブジェクトが重なった後でも、Paintイベントの発生によって再描画をしてくれる、という仕掛けだそうです。

この辺のメカニズムがどうなっているのか、調べてみたいところですが、今日の所は図形が描けるようになってよかった、というところです。

今回学習に使用したリストは以下です。Mainメソッドは言うままでと同じなので割愛します。

/*
 * ようやくグラフィックの描画に入る
 */

using System;
using System.Drawing;
using System.Windows.Forms;

namespace MyFrmApp
{
    public class MyForm : Form
    {
        public MyForm()
        {
            this.Width = 300;
            this.Height = 200;
            this.Paint += myframe_paint;  // イベントハンドラの登録
        }

        private void myframe_paint( object sender, PaintEventArgs e )  // イベントハンドラ
        {
            Graphics g = e.Graphics;    // Graphics型の変数gを定義し、PaintEventArgsのGraphicsの参照を保持
            Pen p = new Pen(Color.Red);  // ペンの設定
            Brush b = new SolidBrush(Color.Blue);  // ブラシの設定
            g.FillRectangle(b, 50, 50, 50, 50);  // 四角形描画
            g.DrawEllipse(p, 75, 75, 50, 50);    // 楕円を描画
        }
    }
}

上記プログラムをコンパイル、実行すると、このようなウインドウが現れます。

今回はこれで終わりにします。

参考文献：
【初心者のためのC#プログラミング入門】グラフィックの描画