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

プロジェクト名　　実習I3イメージ配置1

動作説明

　画像(50×50)を5列×2行に等間隔に配置して描画する。

デザイン

フォーム　　Form1 　Size = 500, 300   ピクチャボックス　picField 　BackColor = White (白) 　BorderStyle = FixedSingle 　Image = right1.gif 　Location = 12, 12 　Size = 370, 240   ボタン　btn5_2 　Text = 5×2

コード(プログラム)

Public Class Form1
　　Dim Gr As Graphics 　　　'Graphics用　　　 メンバ変数
　　Dim Kosuu As Integer = 28 　　　'画像の個数用(最終7×4を作るので!)
　　Dim Gx(Kosuu), Gy(Kosuu) As Integer 　　　'座標用-画像の個数分を配列で用意
 
　　Private Sub btn5_2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btn5_2.Click
　　　　Dim space_x, space_y As Integer 　　　'画像の間隔
　　　　Dim kosuu As Integer = 5 * 2
　　　　Dim n As Integer
　　　　'間隔の計算 (全体の幅 - 並べる個数 * 画像幅) / (並べる個数 + 1)
　　　　space_x = Int((picField.Width - 5 * 50) / (5 + 1))
　　　　space_y = Int((picField.Height - 2 * 50) / (2 + 1))
　　　　For n = 0 To 　�@　
　　　　　　Gx(n) = (My.Resources.right1.Width + space_x) * (n Mod 5) + space_x
　　　　　　Gy(n) = (My.Resources.right1.Height + space_y) * Int(n / 5) + space_y
　　　　Next
　　　　'消す　(消してから)
　　　　Gr.Clear(Color.White) 　　　'イメージ消去、白塗り
　　　　'描画　(描く)
　　　　For n = 0 To kosuu - 1
　　　　　　Gr.DrawImage(My.Resources.right1, 　�A　, 　�B　) 　　　'イメージ描画
　　　　　�C　
　　　　picField.Refresh() 　　　'イメージ更新
　　End Sub
 
　　Private Sub Form1_FormClosing(ByVal sender As Object, ByVal e As System.Windows.Forms.FormClosingEventArgs) Handles Me.FormClosing
　　　　Gr.Dispose() 　　　'終了時にオブジェクト解放
　　End Sub
 
　　Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
　　　　'Bitmapオブジェクト作成
　　　　picField.Image = New 　�D　(picField.Width, picField.Height)
　　　　'Graphicsオブジェクト作成
　　　　Gr = Graphics.　�E　(picField.Image)
　　End Sub
End Class

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

キーワード

　リソースに登録した画像データは、My.Resources.right1のように指定する。この画像の大きさを取得するとき、次のように指定する。

幅：My.Resources.right1.Width　　　　高さ：My.Resources.right1.Height

解説

←　　横幅　picField.Width 　→
←→?←→�@←→�A←→�B←→�C←→
←→�D←→�E←→�F←→�G←→�H←→

←→：間隔　　　○：画像

○ 間隔の大きさを求める計算式を作る
　ピクチャボックスpicFieldの横幅に5個の画像を均等に配置する。左図のように、画像が5個、間隔が6個必要になる。
　よって、画像の幅×5と間隔の幅×6を加算すると横幅picField.Widthと等しくなる。

picField.Width = My.Resources.right1.Width×5 + 間隔の幅×6

　この式から間隔の幅を求める。

間隔の幅 = (picField.Width − My.Resources.right1.Width×5) ÷ 6

○ 画像の表示x座標の計算　(実習G2参照)
　　x? = 間隔の幅　　　　　　　　→間隔の幅×1+画像の幅×0
　　x�@ = 間隔の幅×2+画像の幅　　→間隔の幅×2+画像の幅×1
　　x�A = 間隔の幅×3+画像の幅×2
　　x�B = 間隔の幅×4+画像の幅×3
　　x�C = 間隔の幅×5+画像の幅×4
　　x�D = 間隔の幅　　　　　　　　→間隔の幅×1+画像の幅×0
　繰り返しで、5で割った余りを使うと式は次のように書くことができる。

x? = 間隔の幅×(n Mod 5 + 1) + 画像の幅×(n Mod 5)

　プログラムの中では、次のように式を変形している。

x? = (間隔の幅 + 画像の幅)×(n Mod 5) + 間隔の幅

テスト

□ 実行して、[5×2]ボタンをクリックすると画像が5列×2行の等間隔で描画される。

実行結果

I3の2

動作説明

　[6×3]と[7×4]のボタンを追加する。

デザイン

ボタン2個追加
 
　ボタン　btn6_3
　　　Text = 6×3
 
　ボタン　btn7_4
　　　Text = 7×4

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

Public Class Form1
　　Private Sub btn6_3_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btn6_3.Click
　　　　Dim space_x, space_y As Integer 　　　'画像の間隔
　　　　Dim kosuu As Integer = 6 * 3
　　　　Dim n As Integer
　　　　'画像間隔の計算 (幅 - 横個数 * 画像幅) / (横個数 + 1)
　　　　space_x = 　�@　
　　　　space_y = 　�A　
　　　　For n = 0 To kosuu - 1
　　　　　　Gx(n) = 　�B　
　　　　　　Gy(n) = 　�C　
　　　　Next
　　　　'消す　(消してから)
　　　　Gr.Clear(Color.White) 　　　'イメージ消去、白塗り
　　　　'描画　(描く)
　　　　For n = 0 To kosuu - 1
　　　　　　Gr.DrawImage(My.Resources.right1, Gx(n), Gy(n)) 　　　'イメージ描画
　　　　Next
　　　　picField.Refresh() 　　　'イメージ更新
　　End Sub
 
　　Private Sub btn7_4_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btn7_4.Click
　　　　Dim space_x, space_y As Integer 　　　'画像の間隔
　　　　Dim kosuu As Integer = 7 * 4
　　　　Dim n As Integer
　　　　'画像間隔の計算 (幅 - 横個数 * 画像幅) / (横個数 + 1)
　　　　space_x = 　�D　
　　　　space_y = 　�E　
　　　　For n = 0 To kosuu - 1
　　　　　　Gx(n) = 　�F　
　　　　　　Gy(n) = 　�G　
　　　　Next
　　　　'消す　(消してから)
　　　　Gr.Clear(Color.White) 　　　'イメージ消去、白塗り
　　　　'描画　(描く)
　　　　For n = 0 To kosuu - 1
　　　　　　Gr.DrawImage(My.Resources.right1, Gx(n), Gy(n)) 　　　'イメージ描画
　　　　Next
　　　　picField.Refresh() 　　　'イメージ更新
　　End Sub
End Class

解答欄（アルファベットで答えよ。小文字でもよい。）
　　�@ 　　�A 　　�B 　　�C
　　�D 　　�E 　　�F 　　�G
　　　解答を入力し、［解答チェック］ボタンをクリックする。正解は　　　、不正解は　　　で表示される。

テスト

□ 実行して、[6×3]ボタンをクリックすると画像が6列×3行、[7×4]ボタンをクリックすると画像が7列×4行の等間隔で描画される。

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