グラフィックスの基礎(1)

・絵の表示（PictureBoxコントロールとImageプロパティ）
・絵の入れ替え表示

ＶＢでは自分で書いた絵を色々なところに貼り付け、表示することができます。
ここでは、PictureBoxコントロール（オブジェクト）にImageプロパティを使って表示させてみよう。

絵を描くにはVBとは全く別の「ペイント」ツールなどで書いて、絵のファイルを作っておこう。

○PictureBoxコントロール

• 画面左のツールボックスの右側一番上の風景のような絵が描いてあるアイコンがPictureBox・コントロールです。
  但しvs2012/vs2013だと白黒で小さく絵が殆ど潰れていてよくわからないのです。
• ラベルなどと同じようにクリックして、フォームの上でドラッグすればよい。後から位置を変えたり大きさを変えたりも同様にできる。
• PictureBoxは、絵を表示したりするのに利用されるコントロールです。

○PictureBoxに絵を表示する方法

• コードでImageプロパティに絵のファイルを指定する方法
  • Image.FromFile()命令を使用
  • PictureBox1.Image = Image.FromFile("dice1.png")
    • Image.FromFileの( )内にはファイル名を書く。上記「dice1.png」はファイル名の例
• 絵のファイルはどこに置いておくのか？
  • 今作成しているプロジェクトフォルダの「bin\Debug\」フォルダの下に置いておく。
  • より具体的には、「testXYZ」というプロジェクト名にしている場合、
    Visual Studio 2013\Projects\testXYZ\testXYZ\bin\Debug
    • なお、ファイル名の部分にパスも書けるので、たとえば「"h:\myimages\dice1.png"」などとすることもできる。
      • この例の「h:」はＨドライブを意味し、「myimages」はフォルダである。
      • なお、ファイル名は大文字・小文字の区別があるので、間違わないように。
• （参考；プロパティウィンドウにてImageプロパティに対して絵のファイルを指定する方法もある。）

○絵の入れ替え表示

• PictureBoxを用意し、まず上記のように絵を読み込み、
  更にこれを別の PictureBoxに、先のPictureBoxの絵をコピーして表示することができる。
• 例えば、PictureBox2とPictureBox3に別々の絵を読み込んでおき、
  まず、PictureBox1にPictureBox2の絵をコピーし、次にPictureBox3の絵を表示するプログラムは次のようになる。
  
  

  PictureBox2.Image = Image.FromFile("picture-file1.png") 'PB2にfile1の絵を表示
  PictureBox3.Image = Image.FromFile("picture-file2.png") 'PB3にfile2の絵を表示
  PictureBox1.Image = PictureBox2.Image 'PB1にPB2の絵（つまりfile1の絵）を表示
  PictureBox1.Image = PictureBox3.Image 'PB1にPB3の絵（つまりfile2の絵）を表示、前に表示されていた絵は消えるので、切り替わる
• 上記プログラムの最初２行で、PictureBox1と2に別々の絵のファイルを表示し、次の２行において最初PictureBox1にPictureBox2の絵が表示され、次にPictureBox3の絵が切り替えて表示される。
  • 但し、早すぎて切り替わったことは確認は不可能
• つまりPictureBoxを絵の変数のように扱うことができる（もちろん代入だけで、演算等はできない）

○適当な絵の表示

• PictureBox1を表示用とし、PictureBox2とPictureBox3に別々の絵を貼り付けておくとする。
  プログラムを実行すると、PictureBox1にPictureBox2かPictureBox3のどちらかが表示されるというプログラムを作る。
• さいころを振って偶数(PictureBox2)か奇数(PictureBox3)かの絵を表示(PictureBox1)するものとする

Dim d, x
Randomize()
PictureBox2.Image = Image.FromFile("dice1.png")
PictureBox3.Image = Image.FromFile("dice2.png")

d = Int(Rnd(1) * 6) + 1
x = d Mod 2
If x = 0 Then
    PictureBox1.Image = PictureBox2.Image
Else
    PictureBox1.Image = PictureBox3.Image
End If

• このようにすれば２か３の絵のどちらかが１に表示される。アルゴリズムの概略はさいころを振り偶数だったらPictureBox2を、奇数だったらPictureBox3を表示させている。
  • Labelコントロールを２つ用意しておき、
    Label1.Text = d
    Label2.Text = x
    とすると、正しいかどうかが確認できる。
• もちろんもっとたくさんPictureBoxを用意して様々な絵を張っておけば、色々な絵の中のどれかを表示するようにも簡単にできる。
  （ちょっとIf文が長くなってしまうけど、とりあえず我慢しましょう；Select文やコントロール配列が使えると簡単にプログラムできるのですが）
  
• また、見た目の結果的には同じだが、その度にファイルを読み込むということも可能である（あまりお奨めではないが）。
• この場合、ファイル名を変数に入れておけばよい。

Randomize()
pic2 = "dice1.png"
pic3 = "dice2.png"

d = Int(Rnd(1) * 6) + 1
x = d Mod 2
Label1.Text = d
Label2.Text = x
If x = 0 Then
    PictureBox1.Image = Image.FromFile(pic2)
Else
    PictureBox1.Image = Image.FromFile(pic3)
End If

もしくは次のようにしてもよい。


Dim pic, pic2, pic3, d, x
Randomize()
pic2 = "dice1.png"
pic3 = "dice2.png"

d = Int(Rnd(1) * 6 + 1)
x = d Mod 2
Label1.Text = d
Label2.Text = x
If x = 0 Then
    pic = pic2
Else
    pic = pic3
End If
PictureBox1.Image = Image.FromFile(pic)

＊参考キーワード；
ピクチャボックス（PictureBox）

[「WR班」プログラミング基礎のTopに戻る]