イベントを使ってマウスの入力を取得する

前章までで、GUIを作ってプログラム側で図形を描くことはできました。

しかし、これだけではお絵かきソフトとは言えません。絵を描くためには、マウスの座標を取得する必要があります。

Javaでは、マウスやキーボードの情報を取得するために、イベントリスナーというものを使います。本章では、マウスの情報を取得するために、以下の2つのリスナーを扱います。

リスナー

  • MouseListener
  • MouseMotionListener

監視するイベント

  • マウスの瞬間的なイベント
  • マウスの持続的なイベント

MouseListenerで、クリックした座標を取得して点を描画

まずはMouseListenerを使って、クリックした場所に円を描くプログラムを書いてみます。

input_1

こちらが完成イメージです。

MouseListenerには5つのメソッドがあります。

以下にそれぞれのメソッドについて簡単にまとめました。

MouseListenerの各機能

イベント 呼ばれるタイミング
mouseClicked コンポーネント上でマウスがクリックされた(押して離された)とき
mousePressed コンポーネント上でマウスボタンが押されたとき
mouseReleased コンポーネント上でマウスボタンが離されたとき
mouseEntered マウスがコンポーネント上に入ったとき
mouseExited マウスがコンポーネント上から出たとき

MouseListenerを使うには、importに以下の文を追加する必要があります。

次にCanvasの宣言を、以下のように書き換えます。

extendsとよく似ていますね。

このように、MouseListenerをimplementsすれば、クラスをextendsしたときと同様、元になったクラス(この場合インターフェースと呼ばれるのですが)の機能を使うことができるようになります。

ただし、MouseListenerをimplementsした場合、MouseListenerに含まれていたすべてのメソッドを実装しなければいけません。これを避けるテクニックもありますが(「MouseAdapter」で検索してみてください)、今回はすべて書いていきます。

5つのメソッドが追加されています。

最後に、コンストラクタに以下の一文を書き加えます。

以上で、マウスの情報を取得する準備は整いました。

これから実際に、マウスでクリックした場所に、円を描画する処理を書いていきます。

まずは、クラスの頭に以下の2文を追加します。

マウスの座標を格納する変数を宣言し、初期化しています。

今回は、paintComponent()とmousePressed()という2つのメソッド間で、マウスの座標をやり取りするので、共通して使用できる変数を用意する必要があります。

imput_3

初期値を設定しないと、Javaではx,yに自動的に0が入りますが、こうすると起動時にpaintComponent()が呼ばれて、上記のように(0,0)の点(左上)に円が描画されてしまいます。

それを防ぐために、今回は(-100,-100)というウィンドウ外の値を指定しています。

次に、マウスのボタンが押されたときの処理を追加します。

eは、マウスの座標や押されたボタンなどの情報を格納する変数で、マウスが押されたときに、自動的に情報が入っています。

今回は、e.getX()とe.getY()で、マウスの座標を取得しています。

最後に、x,yにマウス座標が入った状態で、repaint()メソッドでCanvasを再描画します。repaint()を呼ぶことで、以下のpaintComponent()が呼ばれます。

fillOval()は内部が塗りつぶされた楕円を描画するメソッドで、最初の2つの引数が座標、次の2つが円のサイズを表しています。今回はmousePressed()で取得したマウスの位置に、直径10pxの円を描いています(ただしfillOval()で指定するのは円の左上の座標なので、円の中心とマウスの先端を合わせるために、半径5pxの値を差し引いています)。

以上の内容をすべて書き加えると、コード全体は以下のようになります。

以上のコードを追加したら、実行してみましょう。

ウィンドウ上でマウスをクリックしてみて、赤い点が描画されたら成功です。

MouseMotionListenerで、ドラッグした座標を取得して線を引く

今度は、マウスをドラッグすることで線を引けるようにしていきます。

input_2

こちらがが完成イメージです。

ドラッグ時のマウスの状態を取得するには、MouseListenerとは別に、MouseMotionListenerというリスナーが必要になります。

MouseMotionListenerには、以下の2つのメソッドがあります。

MouseMotionListenerの各機能

イベント 呼ばれるタイミング
mouseDragged コンポーネント上でマウスがドラッグされているときに定期的に呼ばれる
mouseMoved コンポーネント上でマウスが動いているときに定期的に呼ばれる

MouseListenerのときと同様、CanvasのimplementsにMouseMotionListenerを追加し、メソッドを追加していきます。

MousePressed()と同様に、MouseDragged()内でマウスの座標をx,yに代入しておきました。

最後にコンストラクタ内にaddMouseMotionListener(this)を追加すれば、ドラッグ時の処理の追加は完了です。

すると、コード全体は以下のようになります。

以上のコードを追加したら、実行してみましょう。

ウィンドウ上でマウスをドラッグしてみて、線が描けたら成功です。

まとめ

いかがだったでしょうか。

実は、前章までで学んだ内容を応用すれば、テキストフィールドに数字を入力することでブラシサイズを変更したり、スライダーを動かしてブラシの色を変更することは比較的簡単にできます。

ある程度発展的な内容になりますが、ボタンを付けて画像を読み込んだり、描いた画像を保存したりすることも可能になります。

時間を計測するActionListenerを使えば、簡単なゲームを作ることすら可能です。

また、今回きちんと触れることができませんでしたが、オブジェクト指向、レイアウトマネージャ、グラフィックコンテクストといったキーワードについて自分なりに調べてみると、理解が深まると思います。

みなさんもぜひ、今回作ったお絵かきソフトを元に、自分なりの機能を付けたプログラムを作ってみてください。きっとよい勉強になると思います。

[転職率95.1%]最短22日で未経験からプログラマーへ『GEEK JOB 転職コース』
geekjob_to_gol_banner_sp_06

『GEEKJOB 転職コース』では未経験からでもプログラミングや仕事の進め方を学習でき、プログラマーとして転職/就職できるまでサポートします。

  • 短期集中のプログラミング学習で未経験から最短22日での転職/就職ができる

  • IT業界の採用を熟知したメンターが就活サポート

  • わからないことは現役プログラマに質問できる

  • オフィスで働く上で必要なスキルを身に付けられる

  • 紹介可能企業は500社以上


文系出身だから、全くプログラミング経験がないから、プログラミングの学習に挫折してしまったから、といった方も関係ありません。

未経験からプログラマーを目指せる環境を用意しています。

詳しく見る

この記事に関するキーワード

この記事の内容について報告する