Visual Basic のグラフィックス

Visual Basic では,Form や PictureBox に,描画メソッド(関数)として,
  Cls 画面消去, Pset 点を打つ, Line 線分や長方形を描く, Circle 円・円弧・楕円を描く
などが用意されています。  

これらのメソッドを使う前に,Form や PictureBox の座標系をどのように定義するのかを知っておかなくてはなりません。

1. 座標設定

(1) ディスプレイのサイズ
(2) Formのサイズと配置
(3) Form 内部の座標設定 ← とりあえずここだけ読みましょう
(4) PictureBoxの配置とその内部の座標設定

(1) ディスプレイのサイズ

ディスプレイのサイズ情報は,Screen オブジェクトを使って取得できます。

画面全体の横幅(twip単位) Screen.Width
画面全体の高さ(twip単位) Screen.Height
※twip とは
画面上に表示されているものを印刷したときに 1cm になる長さが 567twip です。
twipはディスプレイに依存しない単位です。

(参考) 画素(ピクセル)数に変換したい場合は,

水平方向の1画素あたりのtwip数 Screen.TwipsPerPixelX
垂直方向の1画素あたりのtwip数 Screen.TwipsPerPixelY

を使って,

画面全体の横幅(ピクセル単位) Screen.Width / Screen.TwipsPerPixelX
画面全体の高さ(ピクセル単位) Screen.Height / Screen.TwipsPerPixelY

のように計算できます。


(2) Formのサイズと配置

フォームのサイズは,Width, Height というプロパティで設定および取得ができます。

フォームの横幅(twip単位) Form1.Width
フォームの高さ(twip単位) Form1.Height

※ここでは,フォームのオブジェクト名が Form1 であるとしています。

また,Screen内のFormの位置は,FormのLeft, Top というプロパティで設定および取得ができます。

Screenの左端からフォームの左端までの距離(twip単位) Form1.Left
Screenの上端からフォームの上端までの距離(twip単位) Form1.Top

※ Form1の中で書くプログラムでは,Form1.Left などは単にLeftと書くことができます。

 フォームの縦横のサイズを画面全体の丁度半分とし,フォームを画面の中央に表示します。

Private Sub Form_Load()
    'Formのサイズを設定
    Width = Screen.Width / 2
    Height = Screen.Height / 2
    'Formを画面中央に配置
    Left = (Screen.Width - Width) / 2
    Top = (Screen.Height - Height) / 2
End Sub

(3) Form内部の座標設定

フォームの描画領域(タイトルバーや境界線の太さを除いた中央の部分)の座標系は,以下の4つのプロパティで指定されます。

左端のx座標 ScaleLeft 既定値は0
上端のy座標 ScaleTop 既定値は0
横幅 ScaleWidth 既定では,twip単位での横幅
高さ ScaleHeight 既定では,twip単位での高さ

既定では,左上隅が原点(0, 0),右向きにx軸,下向きにy軸をとった座標系で,twip単位で位置を指定することになります。

長さの単位は,ScaleModeプロパティで,ピクセル, cm, mm などに変更できます。

ScaleMode 1 2 3 4 5 6 7
単位 twip ポイント ピクセル 文字 インチ mm cm

これらの場合は,原点が左上隅でy軸が下向きになります。

この他に,ScaleMode=0ユーザ座標系があります。
ユーザ座標にするには,ScaleLeftScaleTopScaleWidthScaleHeightの4つのプロパティをに値を代入しなければなりません。

※実際には,これら4つのうちいずれか1つに値を設定した時点で,ScaleModeは0(ユーザ)に変わります。

ユーザ座標系では,縦横の実際の長さとは無関係に座標値が設定できます。
例えば,

ScaleLeft = -1
ScaleWidth = 2
ScaleTop = -1
ScaleHeight = 2

とすると,フォームの中央が原点で,x, y ともに -1から1までの部分が表示できるようになります。ただし,y軸は下向きです。

y軸を上向きにとりたい場合は,ScaleHeightを負の数で指定します。
※ いつでも,ScaleTop + ScaleHeight がフォームの下端のy座標になります。

上の例で,y軸を上向きにするには,

ScaleLeft = -1
ScaleWidth = 2
ScaleTop = 1
ScaleHeight = -2

とします。

ユーザ座標系を設定するには, Scaleメソッドで左上隅と右下隅の座標を指定する方法もあります。
Scale (x1, y1)-(x2, y2)

このメソッドを実行すると,ScaleLeftなどの4つのプロパティが自動的に設定されます。Scaleメソッドを使うほうが便利なことも多いでしょう。

すぐ上の座標設定は,Scaleメソッドを使って,

Scale (-1, 1)-(1, -1)

と書くこともできます。

【練習】 描画メソッドは後で説明しますが,座標系を設定しただけでは結果が目に見えませんから,Lineメソッドでx軸とy軸を描き,Circleメソッドで半径1の円を描いてみましょう。

Private Sub Form_Load()
    Scale (-1, 1)-(1, -1)
    Line (-1, 0)-(1, 0)     'x軸
    Line (0, 1)-(0, -1)     'y軸
    Circle (0, 0), 1        '原点中心の半径1の円
End Sub

 ピクセル単位だが,原点を中央に,y軸は上向きにした座標系を設定します。

  1. まず,ScaleMode=3 (ピクセル単位)にして,ScaleWidthとScaleHeightの値を変数w, h に取り込んでおきます。(このとき h>0 です。)
  2. 左上隅の座標は(-w/2, h/2),右下隅の座標は(w/2, -h/2)にすればよいことがわかるので,
        Scale (-w/2, h/2)-(w/2, -h/2)
    を実行します。(こうすれば,ScaleHeightは負の値になります。)
※2の代わりに,次のように4つのプロパティを設定しても同じです。
    ScaleLeft = -w/2 : ScaleWidth = w : ScaleTop = h/2 : ScaleHeight = -h
Private Sub Form_Resize()
    'ピクセル単位で,原点を画面中央に,y軸を上向きにする
    Dim w As Single, h As Single
    
    ScaleMode = 3   'ピクセル単位
    w = ScaleWidth
    h = ScaleHeight
    Scale (-w / 2, h / 2)-(w / 2, -h / 2)   'ユーザ座標
End Sub

(参考) Private Sub Form_Resize は,フォームのサイズが変更されたときに実行されますが,その他に,実行直後にも Sub Form_Load に続いて実行されます。上のプログラムのままでは,フォームが最小化されたときにエラーになります。
Sub Form_Resize の中の先頭の実行文として,

    If WindowState = 1 Then Exit Sub

を入れておけば,このエラーは避けられます。(フォームが最小化されたときは,何もせず Sub を抜け出す。)


(4) PictureBoxの配置とその中の座標設定

フォームの中に部品(コントロール)の位置は,そのコントロールのLeft, Top というプロパティと連動しています。また,コントロールのサイズはWidth, Heightというプロパティと連動しています。
これらは,フォームの内部に設定された座標系での値になります。

フォームに直接描画するのではなく,フォーム内のPictureBoxに描画することがよくあります。
PictureBoxの配置やサイズは,上記4つのプロパティで決まります。

 フォームの内部に10ピクセルの縁を残してPictureBoxを貼り付けます。

Private Sub Form_Resize()
    ScaleMode = 3   'ピクセル単位,原点は左上隅
    Picture1.Left = 10
    Picture1.Top = 10
    Picture1.Width = ScaleWidth - 20
    Picture1.Height = ScaleHeight - 20
End Sub

PictureBoxの内部の座標を設定する方法は,フォームの場合とまったく同じです。
PictureBox の ScaleModeを設定することで単位の変更ができます。
ユーザ座標にするには,ScaleLeft, ScaleTop, ScaleWidth, ScaleHeight を設定する方法と,Scaleメソッドを使う方法があります。

    Picture1.Scale (-100, 100)-(100, -100)