情報実習I （第１５回） 木曜４・５限 担当：北川 晃.

Presentation on theme: "情報実習I （第１５回） 木曜４・５限 担当：北川 晃."— Presentation transcript:

1 情報実習I （第１５回） 木曜４・５限 担当：北川 晃

2 Visual Basicにおけるグラフィックス機能の処理
WindowsサブシステムであるGDI （Graphics Design Interface）により処理される フォーム上に適当な大きさのPictureBoxを配置 プログラム（プロシージャ）内でグラフィックスオブジェクトを宣言 （グラフィックスモジュールの読み込み） グラフィックスメソッド（直線，四角，楕円など）の図形を描画 図形の描画に用いられる単位はピクセル （ディスプレイの最小画素） 座標は左上を原点とし，右横方向に𝑥座標， 下縦方向に𝑦座標をとる．

3 グラフィックスオブジェクトの作成 グラフィックスオブジェクトの宣言 ＝グラフィックスグラフィックスモジュールの読み込み
宣言した文字で，グラフィックス命令の先行詞とする フォームに直接グラフィックスを描画する場合： フォーム全体をグラフィックスオブジェクトとして定義する Dim g As Graphics = CreateGraphics() 座標の原点(0,0) ピクチャーボックスにグラフィックスを描画する場合： PictureBoxをグラフィックスオブジェクトとして定義する Dim g As Graphics = PictureBox1.CreateGraphics() 通常はピクチャーボックスを使うとよい 座標の原点(0,0)

4 グラフィックスメソッドの挿入 赤色で，原点から(100,200)の座標まで直線を引くには…
g.DrawLine( Pens.Red, 0, 0, 100, 200 ) 青色で，左上の頂点が原点，幅200，高さ100の長方形を塗りつぶすには… g.FillRectangle( Brushes.Blue, 0, 0, 200, 100 ) グラフィックスオブジェクトをあらかじめ定義しておかないと… PictureBox1.CreateGraphics().DrawLine( Pens.Red, 0, 0, 100, 200 ) （毎回グラフィックスオブジェクトを指定しなければならない） イベントが発生したとき（例えばボタンを押したとき）に， グラフィックスが描画されるようにプログラムする

5 主なグラフィックスメソッド 画面のクリア Clear( Color.色) 直線の描画
DrawLine( Pens.色, x1, y1, x2, y2) 四角形の描画 DrawRectangle( Pens.色, x, y, w, h) 四角形の塗りつぶし FillRectangle( Brushes.色, x, y, w, h) 円，楕円の描画 DrawEllipse( Pens.色, x, y, w, h) 円，楕円の塗りつぶし FillEllipse( Brushes.色, x, y, w, h) 主な色 赤：Red 緑：Green 青：Blue マゼンタ：Magenta 黄：Yellow シアン：Cyan 黒：Black 白：White 灰：Gray 始点 終点 左上の点 幅，高さ

6 ペンとブラシ，文字列の描画 線を引くときはペン，塗りつぶすときはブラシを用いる．詳細に定義もできる．
Dim ペン名 As New Pen( 色.Color, 線の幅 ) ペン名.DashStyle = Drawing2D.DashStyle.線種 例：赤，幅3ピクセルのペンを定義して，点線を引く場合 Dim gr As Graphics = CreateGraphics() Dim MyPen1 As New Pen( Red.Color, 3 ) MyPen1.DashStyle = Drawing2D.DashStyle.Dot gr.DrawLine( MyPen1, 50, 50, 300,50 ) 文字列を描画するためには，DrawStringを用いる． Dim gr As Graphics = CreateGraphics() Dim MyFont As New Font(“MSPゴシック”, _ 11, FontStyle.Regular) gr.DrawString(“描画される文字列”, MyFont, _ Brushes.Black, 145, 60)

7 グラフィックスの基本要素 Windowsフォーム上に，グラフィックスの様々な基本要素を 描画するプログラムを作れ． Button1,2
フォーム上に直接画像を描画

8 プログラム例 'グラフィックスの基本要素 Public Class Form1 '描画スタート
Private Sub Button1_Click(sender As Object, _ e As EventArgs) Handles Button1.Click Dim gr As Graphics = CreateGraphics() '直線① Dim MyFont As New Font("MSPゴシック", 11, _ FontStyle.Regular) gr.DrawLine(Pens.Blue, 50, 90, 250, 70) gr.DrawString("①", MyFont, Brushes.Black, 145, 60) '破線② Dim Pen1 As New Pen(Color.Black, 1) '黒色のPen1を設定 Pen1.DashStyle = Drawing2D.DashStyle.Dash '破線指定 gr.DrawLine(Pen1, 50, 120, 250, 120) '破線の描画 gr.DrawString("②", MyFont, Brushes.Black, 145, 100)

9 プログラム例 '青色のベクトル（先頭の矢印5,5）③
Dim Pen2 As New Pen(Color.Blue, 2) '太さ2，青色のPen2を指定 Pen2.CustomEndCap = _ '矢印指定 New System.Drawing.Drawing2D.AdjustableArrowCap(5, 5) gr.DrawLine(Pen2, 50, 180, 250, 160) 'ベクトル線の描画 gr.DrawString("③", MyFont, Brushes.Black, 145, 150) '赤枠の長方形（幅=200，長さ=80）④ gr.DrawRectangle(Pens.Red, 50, 200, 200, 80)'長方形の描画 gr.DrawString("④", MyFont, Brushes.Black, 145, 230) '赤色で塗りつぶした長方形（幅=200，長さ=80）⑤ gr.FillRectangle(Brushes.Red, 50, 320, 200, 80) '長方形の描画 gr.DrawString("⑤", MyFont, Brushes.Black, 145, 300) '中心(400,130)，長径=200，短径=100の楕円⑥ gr.DrawEllipse(Pens.Red, 300, 80, 200, 100) '楕円の描画 gr.DrawLine(Pens.Gray, 280, 130, 520, 130) '横軸 gr.DrawLine(Pens.Gray, 400, 70, 400, 190) '縦軸 gr.DrawString("(400,130)", Font, Brushes.Black, 405, 135) gr.DrawRectangle(Pen1, 300, 80, 100, 50) gr.DrawString("100", Font, Brushes.Black, 340, 115)

10 プログラム例 gr.DrawString("50", Font, Brushes.Black, 405, 100)
gr.DrawString("⑥", MyFont, Brushes.Black, 450, 70) '中心(400,300)，半径80のLime色で塗りつぶした円⑦ gr.FillEllipse(Brushes.Lime, 320, 220, 160, 160) '中心(400,300,半径80の円の描画 gr.DrawLine(Pens.Gray, 300, 300, 500, 300) '横軸 gr.DrawLine(Pens.Gray, 400, 210, 400, 390) '縦軸 gr.DrawRectangle(Pen1, 320, 220, 80, 80) gr.DrawString("(320,220)", Font, Brushes.Black, 295, 205) gr.DrawString("(400,300)", Font, Brushes.Black, 405, 305) gr.DrawString("80", Font, Brushes.Black, 355, 285) gr.DrawString("⑦", MyFont, Brushes.Black, 450, 220) End Sub '終了 Private Sub Button2_Click(sender As Object, _ e As EventArgs) Handles Button2.Click End End Class

11 課題：電卓のフォームアプリ作成 0～9および小数点のキーを備えていること． ACキー（すべてを初期化する）を備えていること．
キー入力と連動したディスプレイを一つ以上備えていること． 正の実数の四則演算ができること （答えは負の数になる場合もある）． 追加要素の例： 平方根 クリアーキー 正負変換

12 電卓のフォームアプリ作成：ヒント TextBoxに表示される数字の文字列を 数字のデータに変えたり，また文字列に戻したり．
四則演算をさせるためには，二つの数字を 記憶させなければならない．どのボタンに， どのタイミングで動作させるか． 四則演算のボタンを押したとき，最後にイコール キーを押すまで，どの演算を行うかをどうやって 記憶しておくか ボタンが多くなるので，それぞれの動作の 関連付けを間違えないこと．

13 データの型の変更 Cint(x): xを整数型へ変換 CStr(x): xを文字列へ変換 CSng(x): xを単精度実数型へ変換
CDbl(x): xを倍精度実数型へ変換 CBool(x): xを論理型へ変換 Val(s)： sを適切な数値へ変換

14 ヒント：足し算機能の実装 足し算キーとイコールキーの動作を次のように設定する． 足し算キー イコールキー
それまでに入力されている数の記憶 足し算キー m = Val(TextBox1.Text) op = 1 s = "" 足し算であることの記憶 記憶されている数の消去 イコールキー 二つ目に入力された数の記憶 n = Val(TextBox1.Text) Select Case op Case 1 TextBox1.Text = m + n End Select s = "" 足し算の場合は… 記憶されている数の消去

15 電卓の自然な動作に向けて1 ディスプレイに「0」が表示されているときに， 0キーを押しても「00」とは表示されない．
ヒント：0キーの動作を，ディスプレイの 表示によって場合分けする． (Hint: We divide the action of 0 key Into cases according to string on the display. ) Pushing ‘0’ key Yes No s=‘0’? s=s s=s + ‘0’ Displaying the string ‘s’

16 電卓の自然な動作に向けて2 ディスプレイ上の数字が小数点を含む場合， 二つ目の小数点を表示しない．
方法１：文字列’s’が’.’を含んでいるかどうかを判定する． 方法２：数字が整数か，小数かを判定する． s1=‘12345’ s2=‘12.345’ Console.WriteLine(s1.IndexOf(“.”)) ’結果は0 Console.WriteLine(s2.IndexOf(“.”)) ’結果は1 文字列の中に’.’が 含まれているかを判定 Fix関数，Int関数 xを整数の範囲で1で割り算 ⇒整数部分だけを取り出せる x-(x\1)=0 or not?