///　実習H1　グラフィックス(1)	プログラミング実習

グラフィックス(Graphics)
用意されている画像を表示するだけであれば、PictureBoxコントロールなどのImageプロパティに設定することで表示できる。 　　　　(例)　 PictureBox.Image = 画像データ 　しかし、フォームなどに直接描画しなければならない場合もある。このような場合に、グラフィックス・オブジェクトを使うことでフォームやコントロールに描画できる。

プロジェクト名　　実習H1グラフィックス描画

動作説明

　フォームに赤と黒の2本の直線を描く。

デザイン

フォーム　Form1 　Size = 300,300 ボタン　btnLine 　Text = 直線

コード(プログラム)    [終了ボタン]のメソッドは省略しています。　

Public Class Form1
　　Private Sub btnLine_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnLine.Click
　　　　'�@Graphicsオブジェクトの作成
　　　　Dim g As Graphics = Me.CreateGraphics
　　　　'�A直線の描画(Graphicsオブジェクトgに対して描画する。)
　　　　g.DrawLine(Pens.Black, 30, 30, 250, 230) 　　'黒の直線
　　　　g.DrawLine(Pens.Red, 30, 50, 250, 250) 　　　　'赤の直線
　　　　'�BGraphicsオブジェクトの解放
　　　　g.Dispose()
　　End Sub
End Class

キーワード

CreateGraphics … コントロールのGraphicsオブジェクトを作成するメソッド。
DrawLine … 直線を描画するメソッド。
Dispose … オブジェクト（リソース）を解放するメソッド。

解説

　プログラムのコメントにも示してあるように、�@�A�Bの順にプログラミングする。
�@　フォーム(Form1)に描画したいので、フォームのGraphicsオブジェクトを作成する。プログラム中でフォームは「Me」と表すので、”Me.CreateGraphics”と書く。作成したGraphicsオブジェクトは、変数gに格納される。
�A　Graphicsオブジェクトgに対して直線を描画するので、g.DrawLineと書く。DrawLine(Pen, x1, y1, x2, y2)メソッドは、Penオブジェクトを使って(x1,y1)から(x2,y2)までを結ぶ直線を描画する。

テスト

□ [直線]ボタンをクリックすると直線が描画される。
□ フォームを最小化すると、直線は消える。

H1の2

動作説明

　ピクチャボックスに赤と黒の2本の直線を描く。

デザイン

フォーム　Form1 　Size = 300,300 ボタン　btnLine 　Text = 直線 ピクチャボックス　picHako 追加 　BorderStyle = FixedSingle 　Location = 12, 12 　Size = 197, 242

コード(プログラム)    [終了ボタン]のメソッドは省略しています。　

Public Class Form1
  Private Sub btnLine _Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnLine.Click
    '�@Graphicsオブジェクトの作成
    Dim g As 　�@　 = picHako.CreateGraphics
    '�A直線の描画(Graphicsオブジェクトgに対して描画する。)
    g.　�A　(Pens.Black, 30, 30, 150, 150)    '黒の直線
    　�B　.DrawLine(Pens.Red, 30, 50, 150, 170)      '赤の直線
    '�BGraphicsオブジェクトの解放
    g.　�C　
  End Sub
End Class

解答欄（英数字は半角で入力すること。余分な空白は入れないこと）
　　�@ 　　�A 　　�B 　　�C
　　　解答を入力し、［解答チェック］ボタンをクリックする。正解は　　　、不正解は　　　で表示される。

キーワード

BorderStyle … 境界線を設定するプロパティ。

解説

　描画する対象のコントロールのGraphicsオブジェクトを作成する。
　今回は、ピクチャボックスpicHakoに描画したいので、”picHako.CreateGraphics”と書く。

テスト

□ [直線]ボタンをクリックすると直線が描画される。
□ フォームを最小化すると、直線は消える。

Memo　　描画したグラフィックスが消える

　ウィンドウをリサイズしたときや別のウィンドウが上に重なった後、描画したグラフィックスは「消える」ようになっている。ピクチャボックスやボタンなどに設定した画像も同じであるが、再描画が必要になったとき、自動で再描画されるので消えない。このプログラムのグラフィックスは再描画されないので消える。
　再描画が必要になるとPaintイベントが発生する。このPaintイベントで実行されるメソッドに再描画に必要な処理をプログラムすればよい。

H1の3　　(再描画して消えない)

動作説明

　ピクチャボックスに赤と黒の2本の直線を描く。再描画をする。

デザイン　　変更なし

コード(プログラム)    [終了ボタン]のメソッドは省略しています。　

Public Class Form1
　　Private Sub btnLine _Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnLine.Click
　　　　'�@Graphicsオブジェクトの作成
　　　　Dim g As Graphics = picHako.　�@　
　　　　'�A直線の描画(Graphicsオブジェクトgに対して描画する。)
　　　　g.DrawLine(Pens.Black, 30, 30, 150, 150)　　　 '黒の直線
　　　　g.DrawLine(Pens.Red, 30, 50, 150, 170)　　　　　 '赤の直線
　　　　'�BGraphicsオブジェクトの解放
　　　　g.　�A　
　　End Sub
　以下、追加分　入力方法は[解説]を参照。　
　　Private Sub picHako_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles picHako.Paint
　　　　e.Graphics.DrawLine(　�B　, 30, 30, 150, 150) 　　　'黒の直線
　　　　e.Graphics.DrawLine(　�C　, 30, 50, 150, 170) 　　　'赤の直線
　　End Sub
End Class

解答欄（英数字は半角で入力すること。余分な空白は入れないこと）
　　�@ 　　�A 　　�B 　　�C
　　　解答を入力し、［解答チェック］ボタンをクリックする。正解は　　　、不正解は　　　で表示される。

解説

追加プログラムの入力方法　…　picHakoオブジェクトのPaintイベントで実行されるメソッドは、コードウィンドウのオブジェクトボックスの一覧からpicHakoをクリックし、イベントボックスの一覧からPaintをクリックする。

再描画が必要になるとPaintイベントが発生する。
　Paintイベントは、グラフィックスを描画するためのものなのでGraphicsオブジェクトを作成する必要はない(e.Graphicsで利用できる)。よって、オブジェクトを解放する必要もない。
　実行すると、ウィンドウ(フォーム)が開く。このとき、Paintイベントが発生して直線が描画される。よって、[直線]ボタンは意味を成さない。

テスト

□ 実行すると直線が描画される。
□ フォームを最小化しても、直線は消えない。

Memo　　最初のプログラムのように、ボタンのクリックでグラフィックスを描画したい。

　Imageプロパティで指定した画像は自動的に再描画されるので、これを利用する。
　ピクチャボックスと同じサイズのBitmapオブジェクトを作成して、Imageプロパティに設定しておき、グラフィックの描画はそのBitmapオブジェクトに対して行う。
　次の実習H1の4でプログラムの形を学習する。

H1の4　　(再描画のより良い方法)

動作説明

　ピクチャボックスに赤と黒の2本の直線を描く。再描画をする。

デザイン　　変更なし

コード(プログラム)    [終了ボタン]のメソッドは省略しています。　

Public Class Form1　　　　　　　↓追加
　　Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
　　　　picHako.Image = New Bitmap(picHako.Width, picHako.Height)　←※1
　　End Sub 　　　　　　　　　　　　　↑Bitmapオブジェクトの作成

　　Private Sub btnLine _Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnLine.Click
　　　　'�@Graphicsオブジェクトの作成
　　　　Dim g As Graphics = picHako.CreateGraphics　　　←削除
　　　　Dim g As Graphics = Graphics.FromImage(picHako.Image)　 ←追加※2
　　　　'�A直線の描画(Graphicsオブジェクトgに対して描画する。)
　　　　　�@　(Pens.Black, 30, 30, 150, 150) '黒の直線
　　　　g.DrawLine(　�A　, 30, 50, 150, 170) '赤の直線
　　　　'ピクチャボックスの更新(再描画させる)
　　　　picHako.Refresh()　 　　←追加※3
　　　　'�BGraphicsオブジェクトの解放
　　　　　�B　
　　End Sub
　　　　　　　　　　　　　　　　　　　　　　　↓削除
　　Private Sub picHako_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles picHako.Paint
　　　　e.Graphics.DrawLine(Pens.Black, 30, 30, 150, 150) 　　　'黒の直線
　　　　e.Graphics.DrawLine(Pens.Red, 30, 50, 150, 170) 　　　　　'赤の直線
　　End Sub
End Class

解答欄（英数字は半角で入力すること。余分な空白は入れないこと）
　　�@ 　　�A 　　�B
　　　解答を入力し、［解答チェック］ボタンをクリックする。正解は　　　、不正解は　　　で表示される。

キーワード

Bitmap(W,H) … 大きさW×HのBitmapオブジェクトを作成する。
Graphics.FromImage … イメージからGraphicsオブジェクトを作成する。
Refresh … オブジェクトを更新(再描画)するメソッド。

解説

※1　Form1_Loadメソッドで、Bitmapオブジェクトを作成して、ピクチャボックスpicHakoのImageプロパティに設定する。
※2　Graphicsオブジェクトの作成�@は、Imageプロパティ、すなわち、Bitmapオブジェクトから作成する。
※3　ボタンをクリックしただけではPaintイベントは発生しないので、Refreshメソッドで強制的に再描画させる。

　この方法では、ピクチャボックス自身がPaintイベントの発生時にImageプロパティに設定されているBitmapオブジェクトを再描画するので、プログラムで明示的にPaintイベントを処理する必要はない。

テスト

□ [直線]ボタンをクリックすると直線が描画される。
□ フォームを最小化しても、直線は消えない。

///　実習H1　グラフィックス(1)	Copyright©2014 Hiroshi Masuda