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オブジェクトのリソースを開放する必要があるようです。

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

続グラフィック・描画とPaintイベントの関係について

前回のエントリーで、Graphicメソッドを使った描画処理は、Paintイベントのイベントハンドラーの中で実施するのが、一般的な方法、ということを書きました。

インターネットで色々なコードの記述例を見ると、ほとんどの場合そのような記述になっています。

なぜそうなのか、ということを少し調べてみました。

前回のエントリーで絵が出たプログラムを書き換えて、MyFormのコンストラクタで描画処理を行うようにしてみたリストが下記リストです。Graphicsオブジェクトは、MyFormオブジェクトのCreateGraphicsメソッドを使って取得しています。

注意）
このリストは、MyFormクラスを呼び出すMainメソッドを割愛しています。実際に動かす場合にはApplication.Run( new MyForm() );が入ったMainメソッドを別ファイルで追加する必要があります。

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

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

namespace MyFrmApp
{
    public class MyForm : Form
    {
        public MyForm()
          {
            this.Width = 300;
            this.Height = 200;
            Graphics g = this.CreateGraphics();
            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);
            g.Dispose();
          }
    }
}

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

どうでしょう？中身がありません。これは、おそらくウインドウが表示された後にPaintイベントが発生し、そのイベントによってウインドウの中が消去されてしまっていると考えられます

ここで、MyFormのコンストラクタに1行コードを追加します。

        public MyForm()
        {
            this.Width = 300;
            this.Height = 200;
            this.Show();  // 追加
            Graphics g = this.CreateGraphics();
            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);
            g.Dispose();
        }

追加したthis.Show()メソッドは、自分自身を明示的に表示するメソッドです。すると、

図形が現れます。ところが、このウインドウを一度最小化（ウインドウの上にあるーマークを押す）してから再び表示させると、ウインドウの中の図形は消えてしまいます。

最小化してから再表示させると、Paintイベントが発生して、ウインドウの中を消してしまうからです。

これらの結果をまとめると、

• 描画処理のコードが実行された後、ウインドウが表示される前にPaintイベントが発生してウインドウ内の図形が消えてしまう。
• ウインドウを明示的に表示させるメソッドを実行した後に描画処理をすると、ウインドウ内の図形は消えないことから、上記現象は、ウインドウが表示される前に描画処理がなされ、ウインドウが表示される瞬間にPaintイベントが発生している（らしい）
• ウインドウの最小化、最大化を実施すると、ウインドウ内の図形は消えてしまう。

このことから考えると、Graphicsオブジェクトを使ってウインドウに何かを描く処理をする場合は、Paintイベントが発生するたびにプログラムから再描画するような構造にしないといけないことになります。

そして、PaintEventArgsから取得したGraphicsオブジェクトを使って描画を行うよう描画処理を書くと、それはそのままPaintイベント発生時に再描画するプログラムになるのです。

これは、OSの仕組みと.NET Frameworkのライブラリの仕組みから、こうやって書くべき、というところでしょうね。特に、Paintイベントは自分以外の、システム全体の動作の都合で発生することもあるようですから、これ以外に方法はない、というところ。

Visual Basic用の記事ではありますが、このページのPaintイベントの項に詳しい説明があります。

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

参考文献：
Visual Basic 中学校 初級講座 第2回 絵を描く

いよいよ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#プログラミング入門】グラフィックの描画