グラフィックス；座標とグラフィックスメソッド

・座標系についてしっかり覚えよう！
・長さは全てPixcel（画素）で表されます（VB2005）。
・線、円などの描画命令

○グラフィックスにおける座標

• グラフィックスにおける座標は、従来慣れ親しんできた座標系とちょっと違うので、まずはこれを十分に覚えておこう。
• 従来より知っている座標系は、原点Ｏから右にＸ軸正方向、上にＹ軸正方向であった。
• 一般的にコンピュータグラフィックスにおける座標系は、
  原点Ｏは左上、ここから右にＸ軸正方向は変わらないが、原点Ｏより下向きにＹ軸正方向となる。
• 
• なお、ある座標は（x, y）のように表記することは従来と同じ。

○座標の単位

VB.Netでは座標の単位は、「ピクセル」（画素）。

○ウィンドウの大きさ

• ここでは、原点(0, 0)以外は、数字を使わず変数（実際はプロパティ）を利用するテクニックを紹介する。
  ちょっと数学的かもしれないが、きちんと理解するように。
• Formウィンドウ（Form1とする）の大きさは、プログラム内で
  高さ「Form1.Size.Height」及び
  幅「Form1.Size.Width」というプロパティで参照することができる。但し、実際にはForm1は省略して、
  単純にSize.Height, Size.Widthとする。
• よって、Formウィンドウの右下の座標は(Size.Width-1, Size.Height-1)となる。
• またFormウィンドウを左右に真っ二つに分ける直線は、x = Size.Width / 2 となる。

○グラフィックスメソッド

グラフィックスメソッドというのは、グラフィックスを書くための命令で、ＶＢ.Netでは数多く用意されるようになった。

ここでは、基本的な図形（線、円、四角）をプログラムとして書かせる命令を紹介する。

○グラフィック作成の準備

• Dim grph As System.Drawing.Graphics = Me.CreateGraphics
• グラフィックスを使う場合は、おまじないとして、必ずこのgrph変数を宣言しておいてください。

○線；DrawLine命令

DrawLine命令は、線を描くものであり、次のように利用する。

grph.DrawLine (ペン，始点x座標， 始点y座標，終点x座標， 終点y座標)

座標は、通常の(x,y)座標を指定

ペンは、Pens.色のように指定する；例えば、Pens.Red, Pens.Black, Pens.Blue などように

※座標に利用する変数について

• 座標などを指定する際に変数を使う場合は、注意が必要！
  例えば、x, yという変数を使う場合、宣言の際に以下のように
  「As Integer」としなければならない。
  Dim x, y As Integer

○色：

• Black, Blueなどが指定可能（定義済みの色（メンバー）はこちらを参照）

例えば、grph.DrawLine (Pens.Red, 0, 0, 100, 100) は、座標(0,0)つまり原点から(100,100)まで赤い線を引けという意味になる。

• QBColor関数を用いる方法（例を後述）；１６種の色のみ指定可能
• ＲＧＢ各２５６段階を指定する方法（例を後述）；フルカラー（約1677万色 ）の指定が可能；少し面倒

○四角；DrawRectangle命令

DrawRectangle命令は、四角を書くものであり、次のように利用する。

grph.DrawRectangle( ペン，始点x座標， 始点y座標，幅， 高さ)

○円；DrawEllipse命令

DrawEllipse命令は、円や楕円を書くものであり、次のように利用する。

grph.DrawEllipse( ペン，始点x座標， 始点y座標， 幅， 高さ )

指定するx,y座標は、円の中心ではないことに注意しよう
フォームの中央に半径１００の円を表示するには。。。
中央の座標は (size.width/2, size.height/2 )
円の始点は、この中央から、左(X軸マイナス方向）に100/2、上（Y軸マイナス方向）に100/2

○グラフィックの消去；Clear命令

Clearという命令は、DrawLine, DrawRectangle, DrawEllipse命令などで書いたグラフィック全部を消してしまう命令である。

grph.Clear(Color.White)

何色で消すかを（）内に指定する

○Formのサイズを考慮したグラフィックス例

• 対角線を引いてみよう

Dim fx, fy, x, y As Integer
Dim grph As System.Drawing.Graphics = Me.CreateGraphics
grph.DrawLine(Pens.Black, 0, 0, Size.Width, Size.Height)
grph.DrawLine(Pens.Black, Size.Width, 0, 0, Size.Height)
fx = Int(Size.Width - 4 - 4)
fy = Int(Size.Height - 30 - 4)
grph.DrawLine(Pens.Red, 0, 0, fx, fy)
grph.DrawLine(Pens.Red, fx, 0, 0, fy)

Size.Width, Heightはフォームの大きさ。フォーム内のタイトルバー（30)や枠の太さ(4)を考慮して、Form内の大きさをfx,fyに計算している。
但しフォームの形状によっては、うまくいかない（ちょっとずれてしまう）！

• 真ん中に半径100の円を描いてみよう

  Dim n, fx0, fy0, x0, y0, fx, fy, x, y As Integer
  Dim grph As System.Drawing.Graphics = Me.CreateGraphics
  n = 100
  fx0 = Size.Width
  fy0 = Size.Height
  x0 = Int(fx0 / 2 - n / 2)
  y0 = Int(fy0 / 2 - n / 2)
  grph.DrawEllipse(Pens.Black, x0, y0, n, n)
  
  fx = Int(Size.Width - 4 - 4)
  fy = Int(Size.Height - 30 - 4)
  x = Int(fx / 2 - n / 2)
  y = Int(fy / 2 - n / 2)
  grph.DrawEllipse(Pens.Red, x, y, n, n)

○For文を利用して多くの線や円によるグラフィックス例

• 原点(0,0)から、まず(0, 200)まで線を引き、次々と原点から, (1, 200), (2, 200), (3, 200), ..., (200, 200)に対して線を引く

  For h = 0 To 200
      grph.DrawLine(Pens.Red, 0, 0, 200, h)
  Next h
  

○色をランダムに変えてみよう

• For文などで次々と線や円を描かせる場合などに、一つ一つの色を変えてあげるとおもしろい
• ちょっと複雑になるが、ペンの色を変えるという方法を利用する
• たとえば次のようにすると、代表的な１５色（白を除く）から選ばれるようになる

Dim grph As System.Drawing.Graphics = Me.CreateGraphics
'変数宣言（プログラムの先頭部分）で、自分用のペン変数mypenを準備
Dim mypen As New Pen(Color.Black)
'色をランダムに決めたい時に、次のようにして15色（白はなし）からランダムに決定し、
'これを利用して、mypenの色を変更する。
mypen.Color = ColorTranslator.FromWin32(QBColor(Rnd(1) * 15))
'ランダムな色に変更されたペンmypenを利用して、線や円を描く
grph.DrawLine(mypen, 0, 0, 200, 200)
grph.DrawEllipse(mypen, 0, 0, 200, 200)

• もっと細かい色にしたい場合は、Color.FromArgbメソッドにより、色の３原色・ＲＧＢをランダムに指定する方法で、次のようにする。
• 以下の方法では、フルカラー（約1677万色 ）から選ばれるので、非常に微妙な変化となる。、

Dim grph As System.Drawing.Graphics = Me.CreateGraphics
'変数宣言（プログラムの先頭部分）で、自分用のペン変数mypenを準備
Dim mypen As New Pen(Color.Black)
'色をランダムに決めたい時に、次のようにしてr,g,bの各レベルをランダムに決定し、
'これを利用して、mypenの色を変更する。
r = Int(Rnd(1) * 256)
g = Int(Rnd(1) * 256)
b = Int(Rnd(1) * 256)
mypen.Color = Color.FromArgb(r, g, b)
'ランダムな色に変更されたペンmypenを利用して、線や円を描く
grph.DrawLine(mypen, 0, 0, 200, 200)
grph.DrawEllipse(mypen, 0, 0, 200, 200)

• このようなことを繰り返しながら微妙にずらして描いてみるとちょっとおもしろい。

キーワード；
「座標と描画の対象の指定」
「グラフィックスの描画」

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