高知大学 教育学部 科学技術教育コース 赤松 直 北川 晃

Presentation on theme: "高知大学 教育学部 科学技術教育コース 赤松 直 北川 晃"— Presentation transcript:

1 高知大学 教育学部 科学技術教育コース 赤松 直 北川 晃
科学技術教育総合演習IV 高知大学 教育学部 科学技術教育コース 赤松 直 北川 晃

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

3 グラフィックスオブジェクトの作成 グラフィックスオブジェクトの宣言＝グラフィックスグラフィックスモジュールの読み込み
宣言した文字で，グラフィックス命令の先行詞とする フォームに直接グラフィックスを描画する場合： フォーム全体をグラフィックスオブジェクトとして定義する 座標の原点(0,0) Dim g As Graphics = CreateGraphics() ピクチャーボックスにグラフィックスを描画する場合： 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 他にも，’DarkStateBlue’など， さまざまな色が使える 始点 終点 左上の点 幅，高さ

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 ストップウォッチのアプリの作成 一周60秒のストップウォッチ機能を持つアプリのためのプログラムを作れ． Timerコントロール：
ストップウォッチの形を描画する 時間とともに秒針が動く ストップボタンを押したとき，時間が表示される Timerコントロール： 一定時間ごとに特定の動作を行う場合に使う部品 秒針は 𝜋 2 の位置から右回りに動く． 秒針を描いた1秒後に，背景の色で同じ位置に秒針を描き直す ⇒秒針が消えて次の位置に動いたように見える 1秒ごとのタイミングはTimerコントロールを使う

12 フォーム上への配置例 左上が原点 0,0 Button1～5 PictureBox1 TextBox1 今回は(134,132)を中心とする
（水平座標） PictureBox1 TextBox1 （垂直座標） 今回は(134,132)を中心とする ミリ秒単位で設定 ‘Interval’で設定する Timer1

13 プログラム例 グラフィック描画の命令用語には先行詞の ”CreateGraphics”をつけることになっているが，
'ストップウォッチ Public Class Form1 Dim ss As Integer Dim x0, y0, p, th As Single Dim mypen1 As New Pen(Color.Black, 2) Private Sub Timer1_Tick(sender As Object, e As EventArgs) Handles Timer1.Tick Dim g As Graphics = PictureBox1.CreateGraphics Dim mypendel As New Pen(Color.White, 2) '秒針を消す g.DrawLine(mypendel, 134, 132, x0, y0) th = th - 2 * p / '次の秒針を描く x0 = * Math.Cos(th) : y0 = * Math.Sin(th) g.DrawLine(mypen1, 134, 132, x0, y0) ss = ss '秒数のカウント End Sub グラフィック描画の命令用語には先行詞の ”CreateGraphics”をつけることになっているが， 長すぎるので，短くして頭文字の’g’で代行させる 𝑦 𝑥 𝜃 𝑟=85 −𝑟sin 𝜃 𝑟cos 𝜃 (134,132) 単位時間（今回は一秒）ごとにこの命令が繰り返される

14 プログラム例 '「表示」ボタン Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click Dim g As Graphics = PictureBox1.CreateGraphics Dim mypen As New Pen(Color.Blue, 2) Dim mybrush As New SolidBrush(Color.Green) Dim mybrush1 As New SolidBrush(Color.White) Dim s, t, x, y, x1, y1 As Single g.Clear(BackColor) : g.DrawRectangle(mypen, 122, 15, 25, 12) g.FillRectangle(mybrush, 122, 15, 25, 12) : g.DrawEllipse(mypen, 107, 8, 53, 10) g.FillEllipse(mybrush, 107, 8, 53, 10) : g.DrawEllipse(mypen, 29, 27, 210, 210) g.DrawEllipse(mypen, 34, 32, 200, 200) : g.FillEllipse(mybrush1, 34, 32, 200, 200) p = Math.PI '1秒ごとの目盛り s = 2 * p / 60 For t = 0 To 2 * p Step s x = * Math.Cos(t) : y = * Math.Sin(t) x1 = * Math.Cos(t) : y1 = * Math.Sin(t) g.DrawLine(mypen1, x, y, x1, y1) Next t 文字盤を白で塗りつぶす 左上の座標 図形の(幅，高さ) 360 ∘ 60 ごとに基本となる目盛りを描画

15 プログラム例 '5秒ごとの目盛り s = 2 * p / 12 For t = 0 To 2 * p Step s
x = * Math.Cos(t) : y = * Math.Sin(t) x1 = * Math.Cos(t) : y1 = * Math.Sin(t) g.DrawLine(mypen1, x, y, x1, y1) Next t 'スタート時の秒針を描く th = p / 2 : x0 = * Math.Cos(th) : y0 = * Math.Sin(th) g.DrawLine(mypen1, 134, 132, x0, y0) End Sub 'スタート Private Sub Button2_Click(sender As Object, e As EventArgs) Handles Button2.Click Timer1.Interval = 1000 Timer1.Enabled = True ss = 0 360 ∘ 12 ごとに少し長い目盛りを描画 90 ∘ の位置 からスタート 線の始点 線の終点 描画のタイミングを1000×1ms=1sに設定 Timerを動かし始める

16 プログラム例 'ストップ Private Sub Button3_Click(sender As Object, e As EventArgs) Handles Button3.Click Timer1.Enabled = False TextBox1.Text = Format(ss, “#秒経過") End Sub 'クリア Private Sub Button4_Click(sender As Object, e As EventArgs) Handles Button4.Click Button1_Click(sender, e) TextBox1.Text = "" 'アプリの終了 Private Sub Button5_Click(sender As Object, e As EventArgs) Handles Button5.Click End End Class Timerを停止させる Format文：’ss’を書き出すための書式設定 ‘#’の箇所に数値が入る（下の桁のゼロは省略） ‘Button1_Click’プロシージャを呼び出している