GO BACK

Visual Basic .Net教室　その３


「画面に図形を描画しよう！」


■グラフィックのコントロールについて


　とりあえずコントロールのテキストが扱えるようになったので、次はグラフィックについていろいろ試してみましょう。やっぱりビジュアルなもののほうがやってて楽しいですからね。

　Visual Basic .Netでグラフィックを扱う場合は、Windowsフォームにある「PictureBox」というコントロールを利用します。これは、とても簡単にグラフィックイメージを表示させることのできるコントロールなのです。これを配置すると、枠線だけの透明なコントロールが配置されます。

　このコントロールをクリックして選択し、プロパティウィンドウより「Image」という項目を探して下さい。その右端に「…」というマークがあります。このマークをクリックすると画面にファイルを選ぶためのダイアログが現れますので、ここで表示させたいグラフィックファイルを選ぶと、そのイメージがコントロールに表示されます。


　PictureBoxにはこの他に「BackgroundImage」というものもあります。これは文字通りコントロールの背景としてイメージを表示させるものです。とりあえず、単純に表示をしたいならImageに設定すればよいでしょう。

　またイメージの大きさがコントロールの大きさと異なる場合には、「SizeMode」というプロパティを使ってどのように表示するかを調整することができます。これは以下の４つの中から選んで使います。

　ざっとこれらを設定すれば、簡単にイメージを表示できます。ノンプログラミングでグラフィックが利用できるなんて実に楽チンで助かりますね。


■図形を描くには？

　単純に、用意しておいたグラフィックを表示させるだけならこれで一応はできました。では、コードを使って（つまり何かの命令を呼び出すことで）図形を描くにはどうすればいいのでしょう。この方法についても考えてみましょう。これは、少々覚えなければいけないことが多いので、簡単なサンプルを作りながら説明していきます。


１．新しいプロジェクトを作り、そこにPictureBoxを１つとButtonを作成する。

２．PictureBoxは、図形がわかりやすいように背景の色を変えておく。背景色はBackColorというプロパティで用意されている。作成したPictureBoxを選択し、プロパティウィンドウからBackColorを探して選択する。このプロパティの右端には下向き三角形のマークがあるのでここをクリックすると、システムで使う色や主な色がポップアップで表示される。ここで白を選んでおこう。

３．コントロールの輪郭を変更する。これは「BorderStyle」というプロパティとして用意されている。このプロパティを「Fixed3D」にすると立体的なコントロールになる。

３．作成したボタンをダブルクリックしてコードウィンドウを開き、以下のコードを記述する。

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs)_
				Handles Button1.Click
	Dim g As Graphics
	Dim p As Pen
	Dim b As SolidBrush
	Dim r1, r2 As Rectangle
	g = PictureBox1.CreateGraphics
	p = New Pen(Color.Red)
	b = New SolidBrush(Color.Blue)
	r1 = New Rectangle(10, 10, 50, 50)
	g.DrawEllipse(p, r1)
	r2 = New Rectangle(70, 70, 50, 50)
	g.FillRectangle(b, r2)
End Sub


　これで完成です。プロジェクトを実行し、ボタンを押してみましょう。PictureBoxに赤い円と青い四角形が描かれますよ。



　このプログラムでは、グラフィック描画に必要な３つの要素が使われています。それは「Graphics」「Pen」「Brush」です。これらはコードでグラフィックを描く上で必須のものといえます。３つの役割は、それぞれ以下のようになります。
　VB .Netで描画を行なう場合、まず描画するコントロールからGraphicsを作成します。そして描画する図形が線による図形ならばPenを、塗りつぶす図形ならBrushを、それぞれ必要に応じて用意します。これらを使って、Graphics内の描画用メソッドを呼び出せば、そのコントロールに図形が描画される、というわけです。

　これらのものは、.Netフレームワークに用意されている「クラス」です。クラス、覚えてますか？　そう、プログラムを構成する最小単位となるものでしたね。ウィンドウやボタンといったものはクラスという形で用意されていました。が、こうした目に見える部品だけでなく、グラフィックという抽象的なものもクラスとして用意されているんですよ。


■描画の基本手続き

　では、順番にコードを見てみましょう。まず最初に、Dim文でGraphics、Pen、Brushといったものを宣言していますね。その他、Rectangleというのも用意しています。これは「領域」を示すものです。つまり、位置と大きさに関する値を一つにまとめたものなんですね。

　このRectangleは、クラスではなく「構造体」と呼ばれる特別な形の値です。構造体は、内部に複数の値を構造的に組み込むことのできるもので、この領域のように複雑な値を表現するのに用いられます。まぁ、構造体がどういうものかってことは今はおいて、「描画をするときは、Rectangleというもので描く図形の位置や大きさを設定するのだ」ということだけ知っておきましょう。
g = PictureBox1.CreateGraphics
　まず、PictureBox1からGraphicsを取得します。この「CreateGraphics」というのは、その部品への描画用Graphicsを作成するメソッドです。作成されたものは、一般に「オブジェクト」とか「インスタンス」とか呼ばれます。インスタンスっていうのはオブジェクト指向で多用される呼び方です。まぁ、とりあえず「オブジェクト」でも意味は通じますから、これからはそう呼ぶことにしましょう。
p = New Pen(Color.Red)
　次に、線分情報に関するクラスであるPenオブジェクトを作成します。普通、オブジェクトというのは「New クラス」というようにして作成するのです。まぁ、GraphicsのCreateGraphicsのようなものありますから一概に「すべてそうだ」とはいえませんが、一般にクラスを利用するときはNewでオブジェクトを作成するのが基本です。

　ここでは（）内にパラメータとして「Color.Red」というものを指定していますね。PenはNewの際に、使用する色の情報をパラメータで引き渡すことができます。ここでは赤の色を示す「Color.Red」というものを指定しています。

　色の情報は、Colorという構造体の値として用意されます。これは、自分で必要な色を作成することもできますが、主な色についてはColor内にあらかじめ用意されているので、それを利用することができます。ここで使っている「Color.Red」というのもその一つなのです。これは、Colorの中に用意されているプロパティで「Color.《プロパティ名》」というようにして指定します。

　ちなみに、Colorに用意されている主なColorのプロパティとしては、以下のようなものがあります。この他にもたくさんの色があるので、興味のある人は調べてみましょう。
Black, Blue, Brown, Cyan, Gold, Gray, Green, Ivory, Lime, Magenta, Pink, Purple, Red, Silver, Violet, White, Yellow
　さて、次はBrushの作成です。これも基本的にはPenとそう違いはありません。
b = New SolidBrush(Color.Blue)
　ここでは「SolidBrush」というものをNewしていますね。これはBrushの一種で「単色塗りつぶし用ブラシ」を示すクラスです。これもPenと同様に、使用する色を示すColorオブジェクトをパラメータに設定してNewします。実は「Brush」というクラスもあるんですが、これはNewして使うことはできません。さまざまなBrushの基本となるもので、これを継承して実際に利用するBrushがいろいろと準備されているんですね。通常、単色塗りつぶしはSolidBrushを使うと考えて下さい。

　以上で描画のための基本オブジェクトの作成は終わりです。次はいよいよ描画に進みます。——まずは「円を描く」作業です。
	r1 = New Rectangle(10, 10, 50, 50)
	g.DrawEllipse(p, r1)
　最初にNew RectangleというものでRectangleオブジェクトを作成していますね。Rectangleは構造体ですが、やはりクラスと同様に「New 構造体名」という形で値を作成することができます。ここでは４つの値をパラメータに設定していますが、これらはそれぞれ「左位置、上位置、横幅、縦幅」を示す値になります。Rectangleは、このように領域を「そのコンポーネントの左から何ドット離れているか、上から何ドット離れているか、横幅と縦幅は何ドットあるか」といった形で設定するのです。

　そして、Graphicsオブジェクト内にある円の描画メソッド「DrawEllipse」を呼び出すことで、このGraphicsオブジェクト（つまりPictureBox1から作成したGraphics）に円を描きます。これは２つパラメータがあり、１つ目にPenオブジェクト、２つ目に描画領機を示すRectangle値を指定します。

　この基本がわかれば、四角形の描画もすぐにわかります。まず描画領域となるRectangleを作成し、Graphicsの描画用メソッドを呼び出します。
g.FillRectangle(b, r2)
　このFillRectangleは、パラメータの１つ目に塗りつぶしに使うBrushオブジェクトを、２つ目に描画領域のRectangle値を指定して呼び出します。

　だいたい、図形の描画メソッドは「Draw○○」「Fill○○」という名前で用意されています。前者は線分の図形で、後者は中を塗りつぶした図形です。そして前者はPenを、後者はBrushを指定して描かせます。両者の違いがよくわかりますね？　ここでは「DrawEllipse」「FillRectangle」というものを使いましたが、まったく同様に「FillEllipse」「DrawRectangle」といったものもあります。また、ここではPen/BrushとRectangleをパラメータに指定しましたが、Rectangleを使わず、「DrawEllipse(p, 横位置 , 縦位置 , 横幅 , 縦幅 )」というようにして、領域の情報をすべて引数で指定して利用することもできます。


■表示更新のイベントを使う

　さて、ここではボタンを押して図形を描画しましたが、これはちょっとスマートではありません。やはり、起動したら最初から図形が表示されていて欲しいものです。また、ボタンをクリックして描画した場合には他のウィンドウと重なったりすると図形が消えてしまったりします。これもやはり問題です。

　こういう場合には、「表示更新のイベント」というものを利用します。VB .NetのようなGUIベースのプログラムでは、「イベント」と呼ばれるものでさまざまな動作が呼び出されます。イベントというのは、動作が起こったことを示す信号みたいなものです。例えば、ボタンをクリックすると、それに対応するイベントが発生する。すると、そのイベントで呼び出すように設定されたメソッドが呼び出される。そういう仕組みですね。

　これは、単にユーザーが操作した事柄だけでなく、システムの内部で発生するさまざまな出来ごとに対するものも用意されているのです。例えば、「この部品の表示を更新した方がいい」というようなときには、表示更新用のイベントが発生します。これを受けて、システムはコントロールの表示を更新したりするのです。

　ということは、この「表示更新用イベント」に対応するメソッドを用意すれば、画面に表示する必要が生ずると自動的にそれを呼び出して描画してくれるはずです。

　この表示更新用イベントは「Paint」というものです。では、PictureBox1のPaintイベントが発生した時に呼び出されるメソッドを作成してみましょう。——Form1.vbのソースコードエディタを開き、上部左側に見えるコンボボックスをクリックして「PictureBox1」を選んで下さい。これは、組み込まれているコントロールの一覧を表示するものです。

　これを選ぶと、選んだコントロールに用意されているイベントの一覧が、その右側のコンボボックスに表示されます。ここで「Paint」を選ぶと、Paintイベント用のメソッドが出力されます。



　あとは、作成されたメソッドに描画の処理を記述するだけです。ただし、Paintメソッドの場合は、先ほどのボタンクリックのものとは若干処理が違っているので注意が必要です。

Private Sub PictureBox1_Paint(ByVal sender As Object, _
				ByVal e As System.Windows.Forms.PaintEventArgs) _
				Handles PictureBox1.Paint
	Dim g As Graphics
	Dim p As Pen
	Dim c As Color
	Dim p1, p2 As Point
	g = e.Graphics
	c = Color.FromArgb(255, 255, 0, 0)
	p = New Pen(c)
	p.Width = 5
	p1 = New Point(10, 10)
	p2 = New Point(100, 100)
	g.DrawLine(p, p1, p2)
	g.DrawLine(p, 10, 100, 100, 10)
End Sub

　ざっとこんな感じでしょう。これを記述してからプロジェクトをビルド＆実行してみましょう。PictureBoxに、赤い×マークが表示されますよ。



　ここでは、Paintイベント特有の処理の他、いくつか新しい描画機能を使っています。最初から順に見ていきましょう。まず、各種の変数を宣言した後で、このようなやり方でGraphicsを取り出していますね。
g = e.Graphics
　この「e」というのは、パラメータで渡された「System.Windows.Forms.PaintEventArgs」というややこしそうなものです。これは「イベントを示すオブジェクト」と考えて下さい。今の段階ではちょっとややこしいので、「e.Graphicsとすると、イベントが発生したコントロールのGraphicsが得られるのだ」と覚えてしまって下さい。
c = Color.FromArgb(255, 255, 0, 0)
　次の「FromArgb」というのは、RGBを直接指定してColor値を得るものです。これは「アルファチャンネル値」「赤」「緑」「青」の４つの値をそれぞれ０〜255の整数で指定してやります。アルファチャンネルというのはよくわからない人もいるでしょうが、そういうときは「255にする」と考えて下さい。
p = New Pen(c)
p.Width = 5
　そしてPenを作成後、「Width」というプロパティの値を変更しています。これは線分の幅を示すもので、こうすることで描く線の太さを変えられるのですね。
p1 = New Point(10, 10)
p2 = New Point(100, 100)
　今回は、直線を描くメソッドを利用しますが、それで使用するのが「位置を示す値」です。それがこのPointです。Rectangleと同様に構造体というもので、横位置と縦位置をパラメータで指定してNew Pointすると、その地点を示すPoint値が得られます。
g.DrawLine(p, p1, p2)
g.DrawLine(p, 10, 100, 100, 10)
　そして最後に「DrawLine」というメソッドで２点を結ぶ直線を描いておしまいです。このメソッドは、Penと２つのPoint値をパラメータに指定して呼び出すことで、２点を結ぶ直線を引きます。また、Pointを使わず、２つの地点の横位置と縦位置をすべて整数で指定して呼び出すこともできます。ここでは、両方のやりかたで実行してみました。

　駆け足でグラフィック描画の基本をざっと説明しましたが、いかがだったでしょうか。ポイントは「Graphics」「Pen」「Brush」の３つです。それぞれをしっかりと覚え、描画用メソッドの使い方を理解すれば、簡単な図形ぐらいすぐに描けるようになりますよ。

　VB .Netには、他にも描画のためのさまざまな機能が用意されています。まずここで紹介した基本をしっかり身に付けてから、他の機能も調べてみるとよいでしょう。


GO NEXT

GO HOME