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

○ 画像の部分描画

トランプや将棋の駒を扱うプログラムでは、複数の画像データが必要になる。トランプでは52枚、ジョーカー1枚と裏面1枚を合わせて54個の画像データが必要になる。それぞれを画像ファイルとして作成すると54個のファイルを管理する必要が生じる。54個の画像ファイルをリソースとしてインポートしなければならない。 　そこで、右図のように、一つの画像ファイル(trump2.gif)にトランプの画像を用意して、必要な部分だけを描画できるようにすると便利である。必要な部分だけを取り出す計算は必要になるが、計算はコンピュータの得意とする処理であるから、計算式を考えるだけでよい。 　一部分だけを描画するときもDrawImageメソッドを使う。これまでとは、引数が異なる。次のような形になる。 g.DrawImage(img, desRect, srcRect, GraphicsUnit.Pixel) 　imgは、右の画像を読み込んだBitmap型の変数。次のような書き方で、宣言と読み込みを行う。 Dim img As New Bitmap(My.Resources.trump2) 　desRectとsrcRectは、四角形の位置(x,y)と大きさ(幅と高さ)を表す4つの整数を格納する変数。次のような書き方で、宣言と読み込みを行う。     Dim desRect As New Rectangle(x, y, 幅, 高さ) Dim srcRect As New Rectangle(x, y, 幅, 高さ) 　GraphicsUnit.Pixelは、単位をピクセルに指定するデータである。 　1枚のカードの大きさは幅60ピクセル、高さ90ピクセルである。例えば、スペードの3(カード番号15番)を取り出すとき、開始座標(60,180)を指定する。

[カード番号] トランプの画像　trump2.gif(90kB)

プロジェクト名　　実習I4イメージ配置2

動作説明

　画像の一部分を指定して、描画する。
　描画したい開始座標(x,y)を入力して、開始座標から幅60ピクセル、高さ90ピクセルの画像を描画する。

デザイン

フォーム　　Form1 　Size = 360, 240   ピクチャボックス　picImage 　BackColor = White (白) 　Image = trump2.gif(52枚のカード) 　Location = 12, 12 　Size = 60, 90(トランプ1枚のサイズ)   テキストボックス　tbxZahyou 　Text = 0,0   ボタン　btnByouga 　Text = 部分描画   ボタン　btnClear 　Text = 消去

コード(プログラム)

Public Class Form1
　　Private Sub btnByouga_Click(sender As System.Object, e As System.EventArgs) Handles btnByouga.Click
　　　　Dim zahyo() As String
　　　　zahyo = txbZahyou.Text.Split(",")　　　　'zahyo(0)=x, zahyo(1)=y
　　　　'描画先とするImageオブジェクトを作成する
　　　　Dim canvas As New Bitmap(picImage.Width, picImage.Height)
　　　　'ImageオブジェクトのGraphicsオブジェクトを作成する
　　　　Dim g As Graphics = Graphics.FromImage(canvas)
　　　　'画像ファイルのImageオブジェクトを作成する　　※1
　　　　Dim img As New Bitmap(My.Resources.trump2)
　　　　'切り取る部分の範囲を決定する。コピー元の場所
　　　　Dim srcRect As New Rectangle(CInt(zahyo(0)), CInt(zahyo(1)), picImage.Width, picImage.Height)
　　　　'描画する部分の範囲を決定する。コピー先の場所
　　　　Dim desRect As New Rectangle(0, 0, srcRect.Width, srcRect.Height)
　　　　'画像の一部を描画　　　　 ↓コピー先　↓コピー元　　↓単位
　　　　g.DrawImage(img, desRect, srcRect, GraphicsUnit.Pixel)
　　　　'Graphicsオブジェクトのリソースを解放する
　　　　g.Dispose()
　　　　'PictureBox1に表示する
　　　　picImage.Image = canvas
　　　　End Sub
 
　　Private Sub btnClear_Click(sender As System.Object, e As System.EventArgs) Handles btnClear.Click
　　　　picImage.Image = Nothing　　　　'消去
　　End Sub
End Class

キーワード

解説

※1　画像ファイルを指定するときは、次のように書く。

Dim img As New Bitmap("C:\test\1.jpg")

テスト

□ 開始座標から幅=60、高さ=90ピクセルの画像が描画される。

I4の2

動作説明

　カードの番号を指定して、描画する。
　画像は、開始座標(x,y)と大きさ(幅と高さ)で指定する。

デザイン

	テキストボックス　tbxZahyou 　Text = 0,0   ボタン　btnByouga2 　Text = 部分描画2
ラベル　Label2 　Text = 描画カード番号　?1=0,?1=13,?1=26,?=39

コード(プログラム)    追加部分のみ。　

　　 Private Sub btnByouga2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnByouga2.Click
　　　　Dim num, xx, yy As Integer
　　　　num = CInt(tbxBangou.Text)
　　　　xx = 　�@　 　　　'※1
　　　　yy = 　�A　　　　　'※2
　　　　tbxZahyou.Text = xx & "," & yy
　　　　'画像の一部を切り取って（トリミングして）表示する
　　　　'描画先とするImageオブジェクトを作成する
　　　　Dim canvas As New 　�B　(picImage.Width, picImage.Height)
　　　　'ImageオブジェクトのGraphicsオブジェクトを作成する
　　　　Dim g As Graphics = Graphics.　�C　(canvas)
　　　　'画像ファイルのImageオブジェクトを作成する
　　　　Dim img As New Bitmap(My.Resources.trump2)
　　　　'切り取る部分の範囲を決定する。コピー元の場所
　　　　Dim srcRect As New Rectangle(xx, yy, picImage.Width, picImage.Height)
　　　　'描画する部分の範囲を決定する。コピー先の場所
　　　　Dim desRect As New Rectangle(0, 0, srcRect.Width, srcRect.Height)
　　　　'画像の一部を描画する　 ↓コピー先　　↓コピー元　　↓単位
　　　　g.DrawImage(img, desRect, srcRect, GraphicsUnit.Pixel)
　　　　'Graphicsオブジェクトのリソースを解放する
　　　　g.Dispose()
　　　　'PictureBox1に表示する
　　　　picImage.Image = canvas
　　End Sub

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

キーワード

解説

　実習G2と同じようにして、番号から座標を計算する。※1と※2の部分。

※1　カード番号からx座標を計算する。ハートは0〜12番でx=0、スペードは13〜25番でx=60、ダイヤは26〜38番でx=120、クラブは39〜51番でx=180、となるように計算式を考える。カード番号を13で割った整数部分は、ハートが0、スペードが1、ダイヤが2、クラブが3となる。

※2　カード番号からy座標を計算する。4種類の1番(A)は0,13,26,39番で、13で割った余りが0になる。同じように、4種類の6番は5,18,31,44番で、13で割った余りが5になる。

テスト

□ カード番号を入力すると該当するトランプの画像が描画される。また、その画像の描画開始座標がテキストボックスtbxZahyouに表示される。

///　実習I4　グラフィックス(2)	Copyright©2015 Hiroshi Masuda