簡単ペイントツール


*ここに掲載している「簡単ペイントツール」のソースコードを、以下にアップロードしています。ご自由にお使いください。
Microsoft Small Basic Program Listing(Program Listing : JRB927)

Windowsに標準で付いている「Microsoft Paint」ほど機能はなくても、マウスで簡単に絵が描ける程度ならなんとか作れるはず……ということで。
簡易的なペイントツールを作ってみます。
ウィンドウ内でマウスを左クリックしたら、そのポイントを取得する。
左クリックしたままマウスを動かしたら、取得ポイントから動かした先へと線を描く。
というプログラムになりそうです。

まずはウィンドウを描いて……

GraphicsWindow.Title = "OEKAKI"
GraphicsWindow.Width = 640
GraphicsWindow.Height = 480

マウスを左クリックした時のサブルーチン名を「OnMouseDown」
マウスを動かす時のサブルーチン名を「OnmouseMove」とします。
このへんマニュアルからパクってます。

GraphicsWindow.MouseDown = OnMouseDown
GraphicsWindow.MouseMove = OnmouseMove

それぞれの中身を考えます。
マウスを左クリックした時のサブルーチン「OnMouseDown」はそんなに難しくなさそうです。座標を取得すればいいだけです。

Sub OnMouseDown
  prex = GraphicsWindow.MouseX
  prey = GraphicsWindow.MouseY
EndSub

GraphicsWindow.MouseX」でx座標、「GraphicsWindow.MouseY」でy座標を取得し、それぞれに「prex」「prey」という名前を付けました。

一方、マウスを動かす時のサブルーチン「OnmouseMove」は、「左クリックされている時に、座標(prex, prey)から、現在の座標まで線を引く」となります。
更にその後に、現在の座標を座標(prex, prey)に変更する必要があります。
このサブルーチンの繰り返しで線を書くからです。

Sub OnmouseMove
  x= GraphicsWindow.MouseX
  y= GraphicsWindow.MouseY
    If (Mouse.IsLeftButtonDown) Then
      GraphicsWindow.DrawLine(prex, prey, x, y)
    EndIf
  prex = x
  prey = y
EndSub

まず、現在の座標を「x= GraphicsWindow.MouseX」と「y= GraphicsWindow.MouseY」で取得しました。
その後はIf構文で、「もし左クリックされていたら、座標(prex, prey)から座標(x, y)まで線を引く」です。
最後の「prex = x」と「prey = y」で、現在の座標を、次の(prex, prey)に変更しました。

これまで作ったものをつなげれば、とりあえずはペイントツールになります。

GraphicsWindow.Title = "OEKAKI"
GraphicsWindow.Width = 640
GraphicsWindow.Height = 480

GraphicsWindow.MouseDown = OnMouseDown
GraphicsWindow.MouseMove = OnmouseMove

Sub OnMouseDown
  prex = GraphicsWindow.MouseX
  prey = GraphicsWindow.MouseY
EndSub

Sub OnmouseMove
  x= GraphicsWindow.MouseX
  y= GraphicsWindow.MouseY
    If (Mouse.IsLeftButtonDown) Then
      GraphicsWindow.DrawLine(prex, prey, x, y)
    EndIf
  prex = x
  prey = y
EndSub

ペイント1

これだけでも、白いウィンドウに黒色のペンでお絵かきができます。
上のプログラムではペン色や太さを全く指定していないのですが、デフォルトの色や太さがあるのでしょう。

*デフォルトの値一覧は以下にあります(英語版)。
Small Basic: Default Value - TechNet Articles - United States (English) - TechNet Wiki

あとは、「ボタンを押したらペン色や太さを変えられるようにする」とか、お絵かきを消去できるボタンなんかの付属品を付けたいですね。

blackbotan = Controls.AddButton("black", 3, 4)
bluebotan = Controls.AddButton("blue", 50, 4)
redbotan = Controls.AddButton("red", 90, 4)
hosoibotan = Controls.AddButton("hosoi", 125, 4)
middlebotan = Controls.AddButton("middle", 170, 4)
futoibotan = Controls.AddButton("futoi", 225, 4)
clearbotan = Controls.AddButton("clear", 500, 4)

Controls.ButtonClicked = click

まずは、ボタンを設置しました。
そして、ボタンが押された時のサブルーチンを「click」という名前にします。
サブルーチン「click」は、以下のようにしました。

Sub click
  If Controls.LastClickedButton = blackbotan Then
    GraphicsWindow.PenColor = "black"
  EndIf
  If Controls.LastClickedButton = bluebotan Then
    GraphicsWindow.PenColor = "blue"
  EndIf
  If Controls.LastClickedButton = redbotan Then
    GraphicsWindow.PenColor = "red"
  EndIf
  If Controls.LastClickedButton = hosoibotan Then
    GraphicsWindow.PenWidth = 1
  EndIf
  If Controls.LastClickedButton = middlebotan Then
    GraphicsWindow.PenWidth = 4
  EndIf
  If Controls.LastClickedButton = futoibotan Then
    GraphicsWindow.PenWidth = 7
  EndIf
  If Controls.LastClickedButton = clearbotan Then
    GraphicsWindow.BrushColor = "white"
    GraphicsWindow.FillRectangle(0, 0, 640, 480)
  EndIf
EndSub

「最後に押されたボタンが○○だったら、ペンの色を××に変える/ペンの太さを△△に変える」
を、If構文でひたすら並べています。
最後は「clear」というボタンを押した時の動作ですが、ここで「GraphicsWindow.Clear()」を使うと、お絵かきの線だけではなく、設置したボタンも全て消えてしまいます。
ですので、「ウィンドウ全体を白い四角形で塗りつぶす」という動作で、お絵かきの線だけ消すようにしました。
GraphicsWindow.FillRectangle」を使った塗りつぶしでは、ボタンは消えません。
以下が完成したプログラムです。

GraphicsWindow.Title = "OEKAKI"
GraphicsWindow.Width = 640
GraphicsWindow.Height = 480

GraphicsWindow.MouseDown = OnMouseDown
GraphicsWindow.MouseMove = OnmouseMove

blackbotan = Controls.AddButton("black", 3, 4)
bluebotan = Controls.AddButton("blue", 50, 4)
redbotan = Controls.AddButton("red", 90, 4)
hosoibotan = Controls.AddButton("hosoi", 125, 4)
middlebotan = Controls.AddButton("middle", 170, 4)
futoibotan = Controls.AddButton("futoi", 225, 4)
clearbotan = Controls.AddButton("clear", 500, 4)

Sub OnMouseDown
  prex = GraphicsWindow.MouseX
  prey = GraphicsWindow.MouseY
EndSub

Sub OnmouseMove
  x= GraphicsWindow.MouseX
  y= GraphicsWindow.MouseY
    If (Mouse.IsLeftButtonDown) Then
      GraphicsWindow.DrawLine(prex, prey, x, y)
    EndIf
  prex = x
  prey = y
EndSub

Controls.ButtonClicked = click

Sub click
  If Controls.LastClickedButton = blackbotan Then
    GraphicsWindow.PenColor = "black"
  EndIf
  If Controls.LastClickedButton = bluebotan Then
    GraphicsWindow.PenColor = "blue"
  EndIf
  If Controls.LastClickedButton = redbotan Then
    GraphicsWindow.PenColor = "red"
  EndIf
  If Controls.LastClickedButton = hosoibotan Then
    GraphicsWindow.PenWidth = 1
  EndIf
  If Controls.LastClickedButton = middlebotan Then
    GraphicsWindow.PenWidth = 4
  EndIf
  If Controls.LastClickedButton = futoibotan Then
    GraphicsWindow.PenWidth = 7
  EndIf
  If Controls.LastClickedButton = clearbotan Then
    GraphicsWindow.BrushColor = "white"
    GraphicsWindow.FillRectangle(0, 0, 640, 480)
  EndIf
EndSub

ペイント2

ペイント4

まよいちゃんを描いてみて気付いたけど、消しゴムツール入れるべきでしたね……w
白いペンで消しゴム代用になりますからね。

おまけ

GraphicsWindow.keyDown = Onkeydown
Sub Onkeydown
  GraphicsWindow.PenColor = GraphicsWindow.GetRandomColor()
EndSub

このプログラムを加えると、「キーボードの何かのキーを押しながらマウスで線を書くと、ランダムに色が変わる」という動作を加えることができます。

ペイント3

次:1次関数のグラフ


▲TOPへ戻る