ラベル PictureBox の投稿を表示しています。 すべての投稿を表示
ラベル PictureBox の投稿を表示しています。 すべての投稿を表示

2018年5月10日木曜日

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

このような動作になります。
今日はここまでにします。

2018年3月11日日曜日

念のために、PictureBoxのImageプロパティとBitmapで点を描けるか試す

前回のエントリーで、PictureBoxのImageプロパティとBitmapオブジェクトを使って、SetPixel()でピクセル単位での描画ができそう、と書きましたが、次の学習は本当にそれができるのかどうかの確認です。

このプログラムを書いていたときに、今までの流れから、まずはGraphicsオブジェクトを生成するということでGraphicsオブジェクト生成のコードを入れてあったのですが、GraphicsクラスにはSetPixelメソッドがありません。逆にGraphicsオブジェクトを使って点を打とうとすると、「C#でWindows Formのウインドウに点を描画する」のエントリーで書いたような、回りくどい書き方になりそうです。

SetPixelはBitmapオブジェクトに直接するもののようで、Graphicsオブジェクトのメソッドを使う必要がないのであれば、Graphicsオブジェクトを生成する必要はありませんね。

dobon.net様のこのページの「SetPixelメソッドで点を描く」という項に同じお話が出て来ます。

以下のリストは、最初にGraphicsオブジェクトの生成とDisposeするコードをコメントで残してありますが、不要です。

なお、いつもと同じようにMainメソッドは割愛しています。

/*
 * bitmapに点を打つ試み 
 * setPixelを使って、pictureBoxに画を描いてみたつもり。
 * Graphicsオブジェクトのメソッドは使わないので、Graphicsオブジェクトは生成しないで
 * SetPixel()する
 */


using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace sample31
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();

            this.MaximumSize = this.Size;
            this.MinimumSize = this.Size;

            Bitmap img = new Bitmap(600, 720);

            //Graphics g = Graphics.FromImage(img);

            for( int x = 0; x <; 600; x+=2)
            {
                for (int y = 0; y <; 720; y+=2 )
                {
                    img.SetPixel(x, y, Color.Red);
                }
            }

            //g.Dispose();

            pictureBox1.Image = img;
        }
    }
}

このプログラムを実行すると、下記のような結果となります。


描画方法は、どんな図形をどのような形で描くかによって、適切な方法が違ってくるのかもしれません。しかし、ピクセルベースで何かを描いていく今回の目標仕様に対しては、このPictureBoxのImageプロパティとBitmapオブジェクト、そしてSetPixelを使った方法がよさそうです。

今回はこれで終わりです。

2018年3月10日土曜日

PictureBoxのImageプロパティとBitmapオブジェクトで描画

このブログでは今まで何度かグラフィックの描画処理を取り上げました。

最初は、GraphicsオブジェクトのFillRectangle()メソッドとDrawEllipse()メソッドを使った描画処理でした。Paintイベントのイベントハンドラの引数、PaintEventArgs eが持っているGraphicオブジェクトを使って描画する、という方法でした。

次は、Paintイベントのイベントハンドラの中で描画処理を行うのは同じですが、CreateGraphics()メソッドで作ったGraphicsオブジェクトに、小さなBitmapオブジェクトをタイルのように貼り付けて点を描く方法でした。

今度は、PictureBoxとBitmapを使った描画処理をやります。これも、Bitmapから生成したGraphicsオブジェクトに対する描画処理、ということになりますが、今ひとつよくわかりません。

Graphicsオブジェクトは何種類か作り方があって、作り方によって描画速度が違う、という記事もあったりとかして、この辺からしてまずわかりません。

分からないなりにも学習は進めるということで、勉強させていただいたのは、dobon.net様です。

下記が今回のプログラムリストになります。いつものようにMainメソッドは割愛しています。

Visual Studioで新規プロジェクトからWindows Formアプリケーションを選択し、生成されたForm1のプロパティからSizeを400 X 300程度にします。


さらに、ツールボックスからPictureBoxを選び、Form1に配置し、Sizeを370 X 240程度にします。


/*
 * 3Dデータからウィンドウ上にデータをプロットするプログラムに挑む
 */

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace sample28
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();

            this.MaximumSize = this.Size;
            this.MinimumSize = this.Size;

            Bitmap img = new Bitmap(200, 100);
            Graphics g = Graphics.FromImage(img);

            g.FillRectangle(Brushes.Black, g.VisibleClipBounds);
            g.DrawPie(Pens.Yellow, 60, 10, 80, 80, 30, 300);
            g.Dispose();
            pictureBox1.Image = img;
        }

    }
}

実行した結果は、以下のようになります。


ここで注目すべきは、描画処理がPaintイベントのイベントハンドラとして記述されていない点です。PictureBoxのImageプロパティを使って描画する場合、Paintイベントが発生しても描画内容は消えないようです。同じdobon.net様に記載されていますが、Paintイベント発生する直前に、DrawImageメソッドを使って内部的に描画されているのだそうです。

この方法、SetPixel()メソッドを使ったピクセル単位の描画にも使えそうです。PictureBoxを使った方が手軽に記述できて楽です。

本番プログラムでは、この方法を採用しようと思います。

なお、この方法で描画する場合は、描画処理の終わりでDispose()メソッドを使用してGraphicsオブジェクトのリソースを開放する必要があるようです。

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