タブレットPC開発入門 C#編 第22回 JPEG画像を表示する

このページをDeliciousに追加 このページをはてなブックマークに追加 このページをYahoo!ブックマークに追加

2002年12月24日(火)版

タブレットPC開発入門 C#編 第22回 JPEG画像を表示する

デスクトップ、ノートブックから、第3のスタイルへ


■デジカメで撮った画像を表示する

 今回は次回から始まるデジカメ画像加工ツールの予習として、デジカメで撮影したJPEG画像をFormに表示してみよう。手元にちょうど良い画像がないと言う方は、僕が碓氷峠鉄道文化村で撮影してきたEF63の画像があるので、これを利用していただきたい。

■PictureBoxの利用

 JPEG画像を表示するにはPictureBoxを利用するのが簡単である。FormにPictureBoxを貼り付け、「画像を開く」メニュー等を作成して、そのハンドラでPictureBoxのImageプロパティにBitmapを設定すれば良い。Bitmapは一番簡単なコンストラクタだとJPEG画像のファイル名を指定してnewするだけでインスタンスを作成することができる。


Bitmap bitmap = new Bitmap(openFileDialog.FileName);
pictureBox1.Image = bitmap;

 ところがやってみると分かるが、例えば300*300のPictureBoxに640*480の画像を表示しようとしても、左上の300*300の部分しか表示されない。これは当然といえば当然なのだが、あまり使い勝手は良くない。

■画像のスケーリング

 最近のデジカメは画素数が多いので、画像のサイズも相当なものである。読み込んだ画像はFormにちょうど収まるようにスケーリング(拡大・縮小)して表示したい。ところが、スケーリングが入ってくると途端に話が面倒になるのだ。スケーリングを行うためにはPaintイベントで、引数で渡されたPaintEventArgsのGraphics.DrawImageメソッドを使う必要がある。

 Formに直接画像を表示させることもできるのだが、(Formも実はコントロールなのだ)今回はPictureBoxを使って表示させてみよう。やり方はどちらもほとんど変わらない。まずは「ファイル」→「開く」メニューを作成して、そのハンドラでは以下のように書く。


private void menuItem2_Click(object sender, System.EventArgs e)
{
OpenFileDialog openFileDialog = new OpenFileDialog();
if(openFileDialog.ShowDialog() == DialogResult.OK)
{
// Bitmapのインスタンス作成
bitmap = new Bitmap(openFileDialog.FileName);
Invalidate(true); // 無効化して再描画させる
}
}

 OpenFileDialogについてはもう説明の必要はないだろう。ダイアログがOKボタンで閉じられたときは、得られたファイル名でBitmapのインスタンスを作成して、メンバ変数に格納している。Invalidateメソッドはウィンドウを無効化して画面を再描画させるためのものだが、引数なしのInvalidateメソッドではForm上に貼り付けられたコントロールまでは無効されないので、PictureBoxまで無効化されるようbool引数つきのものを使用している。最終的に無効化したいのはpictureBoxなので、より範囲を狭くして以下のようにpictureBoxのInvalidateイベントを呼んでも良い。


pictureBox1.Invalidate();

■Paintイベント

 ウィンドウが無効化されたとき呼ばれるのがこのPaintイベントである。そのコントロールのInvalidateメソッドをコードで呼んだときだけでなく、例えば、他のウィンドウの裏になっていたウィンドウが前に表示されたとき、Windowsが自動的に呼んでくれる。今回の場合はPaintイベントといってもFormのPaintイベントとPictureBoxのPaintイベントがあるが、PictureBoxに画像を表示するのでPictureBoxのPaintイベントを利用する。


private void pictureBox1_Paint(object sender, System.Windows.Forms.PaintEventArgs e)
{
// 画像が指定されているなら
if(bitmap != null)
{
// 表示させたいサイズ
Rectangle rect = new Rectangle(0,0,pictureBox1.Width,pictureBox1.Height);
// スケーリングして描画
e.Graphics.DrawImage(bitmap,rect);
}
}

 bitmapのインスタンスが作成されていれば、PaintEventArgsのGraphics.DrawImageメソッドが、bitmapをPictureBoxの大きさに自動的に拡大・縮小して表示してくれる。

■Formいっぱいに

 さらにFormに貼り付けたPictureBoxはディジタル時計のときに使ったテクニックで、Formがリサイズされたらそれにあわせてリサイズされるよう、Layoutイベントを書いてみよう。


private void Form1_Layout(object sender, System.Windows.Forms.LayoutEventArgs e)
{
pictureBox1.Width = ClientRectangle.Width;
pictureBox1.Height = ClientRectangle.Height;
Invalidate(true); // 無効化して再描画させる
}

 ここでもやはりPictureBoxの再描画が必要になるので、Formも含めて無効化している。実行してFormをいろいろな大きさに変更して遊んでみよう。

■デジカメ画像を加工しよう

 今回はJPEG画像をスケーリングして表示させてみた。コントロールのPaintイベントで、サイズを指定してDrawImageメソッド呼ぶと、自動的に指定したサイズにスケーリングされて表示された。以上を踏まえて、次回からはデジカメ画像加工ツールを作ってみよう。

 ではまた次回。

JPEGのサンプル



タブレットPC開発入門 C#編 第22回 JPEG画像を表示する

Reported by Allergy


Last-modified: Sun, 24 May 2009 23:45:30 JST (3462d)