05 グラフィックの描画

GO BACK

C# (with C#Builder) 教室　その５

「グラフィックの描画」

■.NETの描画システムについて

　.NETの描画は、従来のWindowsプログラミングとはかなり違っています。従来は「図形を描く命令を実行してはいおしまい」という感じでしたが、.NETでは違います。何が違うかというと、「描画もすべてオブジェクトを使って行なうようになっている」という点です。

　昔は「WindowsのAPIにある描画命令を呼び出す」のが描画の基本でしたが、オブジェクト指向の言語でそんなことやるわけにはいきません。そこで、「描画用のオブジェクト」というものを用意し、そこに描画関係の命令をきれいにラップしたメソッドを用意することにしました。――ウインドウやボタンなどといったコントロール類には、すべて「そのコントロールの描画用」に描画用オブジェクトが組み込まれています。あるコントロールに描画を行ないたければ、そのコントロールの描画用オブジェクトを取得し、その中にある描画メソッドを呼び出せばコントロールに描画がされる、というわけです。

　では、この「画面への描画」はどういうタイミングで行なえばいいでしょうか。いろいろと考えられますが、基本は「再描画の要求イベント」を利用するというものです。――コントロールでは、さまざまなイベントが用意されています。その中に「このコントロールを再描画する必要が生じた場合」に呼び出されるイベントというのもあるのです。これを利用すれば、表示を行なう必要があると常に指定したメソッドを実行するようにできますから、そこに描画の処理を用意しておけば、常にそれを実行した状態が表示されるようになる、というわけです。

　では、簡単な例を挙げておきましょう。――適当なプロジェクトで、フォームを選択し、インスペクタの「イベント」タブから「paint」を探して値を割り付けて下さい。このpaintというイベントが、再描画のイベントです。

　では、このイベントに設定されたメソッドに描画の処理を記述してみましょう。ざっと以下のようなものを記述してみて下さい。これを実行すると、青い四角形と赤い円が表示された状態でウインドウが現れます。
private void WinForm_Paint(object sender, System.Windows.Forms.PaintEventArgs e)
{
	Graphics g = e.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);
}
　

■描画の基本となる３つのオブジェクト

　ここでは、描画を行なう上で重要なオブジェクトが３つ登場しています。１つは「Graphics」です。これが、先ほどの「描画を行なうオブジェクト」なんですね。――このpaintメソッドを見ると、引数に「PaintEventArgs」というオブジェクトが渡されていますね？　これは、描画イベントの情報クラスのインスタンスです。この中に、発生した描画イベントに関する必要な情報がまとめられています。ここでは「e.Graphics」としていますが、このPaintEventArgsインスタンスのGraphicsプロパティを得ることで、そのイベントが発生したコントロールの描画用Graphicsを得ることができるのです。

　残る２つは、「Pen」と「Brush」ですね。これは、それぞれ「線分描画の情報」「塗りつぶしの情報」に関するクラスです。線を描画するときには、Penインスタンスを使って線分に関する情報を指定します。また内部を塗りつぶした図形を描くときには、Brushインスタンスを用意して塗りつぶしに関する情報を指定するわけです。

　ここでは、まず「new Pen」として新たなPenインスタンスを作成していますね。これは引数に使用する色を示すColorを指定し、以下のように呼び出します。

Pen 変数 = new Pen(《Colorインスタンス》);

　このPenインスタンスには、線分に関する様々な情報がまとめられています。例えば、線の太さを変えたいときは「Width」というプロパティを設定すればよいのです。「線の設定を変えたければPenをチェックする」というのは非常にわかりやすいですね。

　もう１つのBrushですが、これは少々複雑です。なぜなら、Brushには複数の種類があるからです。ここで使われているのは「SolidBrush」というものです。これは単色での塗りつぶしを行なうためのBrushです。

Brush 変数 = new SolidBrush(《Colorインスタンス》);

　SolidBrushなのになんでBrushの変数に設定しているんだ？と思うでしょうが、SolidBrushはBrushのサブクラス（Brushを継承して作られたクラス）なのです。――オブジェクト指向の世界では、「あるクラスをもとにして新しいクラスを作る」ということが行なわれます。これを「継承」といいます。継承を使うと、あるクラスの機能を拡張し、新しいクラスを定義できるんです。このSolidBrushもそうで、 Brushという「Brushの基本クラス」を拡張して作られています。このあたりはもう少しオブジェクト指向の考え方がわかってこないとよくわからないでしょうが、とりあえずここでは「SolidBrushは、その元になっているクラスBrushとして使える」とだけ覚えておくと良いでしょう。
（もちろん、SolidBrush 変数 = new SolidBrush(・・);としても問題ないです）

　さて、これで基本となるオブジェクト類が用意されました。後は、これらを使ってコントロールに描画を行なうだけです。描画は、先にもいったように、Graphicsインスタンス内の描画用メソッドを呼び出すことで行ないます。主なものとしては、以下のようなメソッドがあります。

・線分の四角形を描く
《Graphics》.DrawRectangle(《Pen》, 横位置 , 縦位置 , 横幅 , 縦幅 );

・塗りつぶした四角形を描く
《Graphics》.FillRectangle(《Brush》, 横位置 , 縦位置 , 横幅 , 縦幅 );

・線分の円を描く
《Graphics》.DrawEllipse(《Pen》, 横位置 , 縦位置 , 横幅 , 縦幅 );

・塗りつぶした円を描く
《Graphics》.FillEllipse(《Brush》, 横位置 , 縦位置 , 横幅 , 縦幅 );

・直線を描く
《Graphics》. DrawLine(《Pen》, 横位置1, 縦位置1 , 横位置2 , 縦位置2 );

　とりあえず、このぐらい覚えておけば、簡単な図形の描画ぐらいはできるようになるでしょう。この他にも描画用のメソッドは多数ありますが、まずは上の基本メソッドで「描画の基本」をマスターすると良いでしょう。

■イメージの表示について
　では、グラフィックソフトなどを使って描いたイメージを表示するにはどうすればいいでしょうか。これは、実は簡単です。「PictureBox」というコントロールを使えばいいのです。このコントロールをフォームに配置し、「Image」というプロパティ右側の「…」ボタンをクリックして表示するグラフィックファイルを選択すると、コントロールにそのグラフィックが表示されるようになります。

　実をいえばPictureBox以外のコントロールでも、「BackgroundImage」というプロパティで同様にグラフィックファイルを指定すれば表示できるのですが、PictureBoxの場合は「SizeMode」というプロパティを設定することで、イメージをコントロール全体に拡大表示したり、イメージのサイズにコントロールの大きさを自動調整したりといったことができるので、イメージの扱いがとても楽なのです。ですので、「イメージの表示はPictureBoxを使うのが基本」と考えた方がいいように思います。

　では、コード内からイメージを描画させるにはどうすればいいか？　これにはGraphicsクラスの「DrawImage」というメソッドを用います。 ――では、PictureBoxのImageにグラフィックファイルを設定し、これを使ってフォームにイメージを描画する処理を考えてみましょう。
private void WinForm_Paint(object sender, System.Windows.Forms.PaintEventArgs e)
{
	Graphics g = e.Graphics;
	Image im = pictureBox1.Image;
	g.DrawImage(im,20,20,100,100);
}
　これを実行すると、フォームに縦横80ドットの大きさでpictureBox1のImageに設定したイメージが描画されます。（図の左上の大きいものが描画されたもの、右下の小さいものがPictureBox）

　DrawImageメソッドは、引数の異なるものがいく通りか用意されています。とりあえず、以下のような書き方だけ覚えておけば描画はできるようになるでしょう。

《Graphics》. DrawImage(《Image》, 横位置 , 縦位置 );
《Graphics》. DrawImage(《Image》, 横位置 , 縦位置 , 横幅 , 縦幅 );

　問題は「描画するイメージをどうやって得るか」です。.NETでは、イメージというのは「Image」クラスのインスタンスとして扱われます。DrawImageメソッドでも、このImageインスタンスとして描画するイメージを指定します。

　このImageインスタンスはどうやって得ればいいか。もっとも簡単なのは、PictureBoxのImageプロパティから取り出す方法でしょう。このImageプロパティの値は、指定したグラフィックファイルを読み込んで、表示するイメージをImageインスタンスとして設定されたものです。これを使えば、簡単にImageが得られますね。

　他にも、ファイルからイメージを読み込んでImageを得ることなども可能ですが、とりあえずここでは「PictureBoxを使えばイメージを自由に利用できる」ということだけ覚えておきましょう。PictureBoxはVisibleプロパティをFalseにすれば画面に表示しないようにできます。またImageに設定したグラフィックファイルはビルド時にプログラムの内部に取り込まれるため、ファイル不要でイメージを表示できます。別途ファイルを用意して読み込み処理をするより簡単で便利なのです。

GO NEXT

GO HOME

GO BACK

C# (with C#Builder) 教室 その５

■.NETの描画システムについて

■描画の基本となる３つのオブジェクト

■イメージの表示について

GO HOME

C# (with C#Builder) 教室　その５