VisualBasic 2015 入門

25．グラフィックで絵を描こう その２

今回は [ グラフィックで絵を描こう ] の続きです。

前回「グラフィックは奥が深い」と言いましたが、
正確には「表示関連は奥が深い」という感じでしょうか。

色々な機能があることも理由の１つですが、実行する環境に左右され易い所が奥深いです。
例えば「開発環境と違う PC で実行したら表示が崩れた」なんてよくある話です。
でもまぁ、初心者である今はあまり気にせず気楽にいきましょう。

PictureBox に絵を描こう

前回、絵を Form1 に直接描いていました。
ですが、絵を描くための専用コントロールがあるので使ってみましょう。
それでは、新しくプロジェクトを作成して
ツールボックスから PictureBox を Form1 に配置してください。

適当に広げて配置したら BorderStyle プロパティを FixedSingle に変更します。

実行すると配置した PictureBox1 に枠線が描かれて表示されます。
これで PictureBox がどのように配置されているのか分かり易いですね。

次はこの PictureBox1 に線を描いてみましょう。
前回の手順を思い出しながら作業してください。

実行してみて下さい。
線が描かれましたか？
Form1 に線を描いたときと同じ手順でしたね。
四角や円を描く手順もまったく同じなので試してみましょう。

座標に注意しよう

前回覚えたことは PictureBox でも全て使えます。
ただ注意することは座標です。
基点（x=0, y=0）は PictureBox の左上になります。

それからもう１つ、コントロールからはみ出した部分は描画されません。
次のようにプログラムを変更して実行してみましょう。

PictureBox1.Width は幅を取得できます。
PictureBox1.Width －50
とは、PictureBox1 の右端から左に 50 ほどずれた位置となります。
円のサイズが（100, 100）なので、ちょうど半円だけ描画されます。

ボタンに絵を描いてみよう

PictureBox は絵を描くためのコントロールですが、前回は Form1 に絵を描きました。
では、ボタン Button ではどうでしょうか？
試してみましょう。

ボタンを配置してください。
そして、プログラムを変更して実行しましょう。

ボタンにも絵が描けましたね。
おそらく、他にも絵が描けるコントロールはあると思います。
（試していませんが）

そんなことよりも、絵を描く手順が今までと違うことに気が付きましたか？
CreateGraphics に注目してください。

この方法を使えば、任意のコントロールに対し絵を描くことができます。
ただし、Paint イベント以外で使うと、再描画が必要なタイミングで絵が
消えてしまうので気を付けましょう。

また今回の例では、PictureBox の Paint イベントでボタン内の絵を描いてます。
つまり、ボタン部分だけ再描画が必要になったとき
絵は消えてしまいます。（PictureBox の Paint イベントが発生しない為）
この点も注意しましょう。

ボタンが押されたとき絵を描いてみよう

ボタンが押されたとき PictureBox 内に円を描くプログラムを追加してみます。

デザイン編集画面で、Button1 をダブルクリックして Button1_Click を
作成します。
次に下図のプログラムを入力してください。

実行してみましょう。
ボタンをクリックすると黄色の円が表示されます。
黄色い円が表示されている状態で、このウィンドウを隠してみてください。
再び表示したときには、黄色い円が消えています。

PictureBox の Image プロパティを使う

ボタンの Click イベント内で描画した絵は消えてしまいます。
消えない方法はないのでしょうか。

簡単なのは、Paint イベント内で描画することです。
描画を On / Off する変数を用意して、Click イベント内で切り替えます。
そして On のときだけ Paint イベント内で描画するようにすればいいのです。
この方法は、ここまで学習してきた内容を思い出せば簡単なことなので
説明を省略します。

別の方法として PictureBox の Image プロパティを使う方法があります。
下図のようにプログラムを変更してください。
PictureBox1_Paint ルーチンは削除して Button1_Click のみにします。

実行したらボタンを押して、絵が描画されることと
隠れた絵が再描画されることを確認しましょう。

この方法は PictureBox コントロールに直接絵を描かないで
Bitmap に描いた絵を Image プロパティに入れて表示しています。
試しに最終行の
PictureBox1.Image = Bobj
をコメントにして実行してみて下さい。
ボタンを押しても描画されません。

ドット（点）で絵を描こう

今まで、線や四角、円などの描画をしてきました。
最後にドットで線を描く方法を説明します。

先ほどのプログラムを下図のように変更します。
Graphics を使わず、Bitmap のみの操作になります。

SetPixel ( ｘ、ｙ、色 )
となっていて指定の座標に色を付けます。
ドット単位で色を付けられるので、自由な曲線が描けます。

GetPixel ( ｘ、ｙ ) を使えば座標の色を取得できるので
ドット単位の操作にはどちらも活用できそうです。
ただ、注意も必要です。
Bitmap の範囲を超えて操作するとエラーになります。
例外処理をするか、はみ出さないように描く必要があります。
どちらにしても面倒ですね。

絵を描くというテーマで説明してきましたが、情報としては不十分だったと思います。
それは目的によって、適切な方法が違ってくるからです。
やっぱりサンプルとなるゲームがあって、作成手順を説明していく方が楽ですね。