/// 実習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, 幅, 高さ) 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
キーワード
解説
実習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 |