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

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

C#でWindows Formのウインドウに点を描画する

三次元データをXY平面に投影した図を描く、という目的を満足する為に必要な要素技術、その中で一番基本的なものは、ウインドウの任意の場所に点を描くことです。

点を描く方法をインターネットで調べると、結構たくさん出て来ます。

まずはこちら、C#ビギナー様がヒットしたので、このサイト様で勉強させていただきました。使用したリストを以下に示します。このコードは、このまま打ち込んでも動きません。下記の手順に従って、フォームを生成し、イベントハンドラーの登録を行った後、イベントハンドラーの中身として記述します。手順を以下に書きます。

	Visual StudioでWindows Formアプリケーションを選択し、Formを一つ用意します。
	図のようなフォームが現れます。
	FormのプロパティからSizeを適切な大きさに設定します。この例では300x300ピクセルにしています。
	フォームの大きさが設定値通りに変わります。
	BackColorをBlackに設定します。
	プロパティ設定ウインドウのイベントボタンを押します。イベントボタンは、稲妻のような形をしています。
	Paintイベントを探して、ダブルクリックします。
	Paintイベントのイベントハンドラー private void From1_Paint( object sender, PaintEventArgs e) のスケルトンが自動生成されます。

コード本体はこちらです。

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 sample22
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void Form1_Paint(object sender, PaintEventArgs e)
        {
            Graphics g = this.CreateGraphics();
            Bitmap p = new Bitmap(1, 1);
            p.SetPixel(0, 0, Color.White);
            g.DrawImageUnscaled(p, 100, 100);
        }
    }
}

コードの中身を見ると、Paintイベントが発生したら、

1. Form1に対してCreateGraphicsメソッドでGraphicsオブジェクトgを生成
2. 大きさ1x1ピクセルのBitmapオブジェクトpを生成
3. オブジェクトpに対して、SetPixelメソッドを使って、座標（0,0）に白い点を打つ
4. オブジェクトpをGraphicsオブジェクトgの座標（100,100）に描画

という処理を行っています。オブジェクトpは、大きさ1x1ピクセルのBitmapオブジェクトなので、座標（0,0）に白い点を打つということは、オブジェクトpは大きさ1x1の白い点、ということになりますね。

このプログラムはMainメソッドがありませんが、F5キーを押してデバッグ動作をさせると動いてくれます。実行結果はは以下のようになります。

点をたくさん格子状に打つようにしたプログラムが下記です。イベントハンドラの中身を差し替えるだけで、実現出来ます。

        private void Form1_Paint(object sender, PaintEventArgs e)
        {
            int x1 = 20;
            int y1 = 20;
            int x = this.Width;
            int y = this.Height;
            Graphics g = this.CreateGraphics();
            Bitmap p = new Bitmap(1, 1);
            p.SetPixel(0, 0, Color.White);
            for( int i = x1; i< x; i += x1 )
            {
                for( int j=y1; j < y; j+= y1 )
                {
                    for( int k=1; k <1000; ++k) { }
                    g.DrawImageUnscaled(p, i, j);
                }
            }
        }

実行結果が下記です。

これらのプログラムはいずれも、Graphicsオブジェクトに、描画がなされた小さなBitmapオブジェクトを、タイルのように貼り付けて描画する、という考え方で書かれています。言ってみれば2段階の動作で描画している構造です。

もう少し直接的な描画動作ができれば、と考えます。それは、次回以降で研究したいと思います。

というわけで、 今回はこれで終わりにします。