Java/JavaFX/イベント

Top > Java > JavaFX > イベント

イベント

マウス、キーを操作して処理を実行する処理を紹介します。

マウスイベント

マウスイベントは次の種類があります。

  • onMouseMoved?
    描画オブジェクト上で、マウスポインターを動かした時に発生するイベント
  • onMouseEntered?
    描画オブジェクトに、マウスポインターをのせた時に発生するイベント
  • onMouseExited?
    描画オブジェクトから、マウスポインターがはずれた時に発生するイベント
  • onMouseClicked?
    描画オブジェクトに対して、マウスクリックした時に発生するイベント
  • onMousePressed?
    描画オブジェクトに対して、マウスの左ボタンを押している時に発生するイベント
  • onMouseReleased?
    描画オブジェクトに対して、マウスの左ボタンを離した時に発生するイベント
  • onMouseDragged?
    描画オブジェクトに対して、マウスドラッグした時に発生するイベント
  • onMouseWheelMoved?
    描画オブジェクトに対して、マウスホイールを動かした時に発生するイベント

これらはjavafx.scene.Nodeクラスに定義されています。
マウスイベントを取得したいシェイプ、Swingコンポーネント(Nodeクラスを継承しているクラス)に記述します。
次のように記述しイベント時の情報を取得します。

   onMouse*****: function( e: MouseEvent ):Void {..処理..}

引数になっているMouseEvent?型の変数eから、それぞれのマウスイベントの情報を取得できます。*****はそれぞれのイベント名が入ります。
bindを使用することで、マウスをクリックしたり、マウスを動かしたりした時に画面に表示された各アイテムが持っている、表示座標や色等を格納している描画オブジェクトの値を、変更させることができます。

マウスイベント作成

簡単なマウスイベントを作成します。

   var color = Color.BLACK;
   var flg = false;

   Stage {
       title : "MouseEvent"
       scene: Scene {
           width: 200
           height: 200
           content: [
               Circle {
                   centerX: 100, centerY: 100
                   radius: 40
                   fill: bind color
                   //マウスイベント
                      onMouseClicked: function( e: MouseEvent ):Void {
                       if(flg == false){
                           //赤に変更
                           color = Color.RED;
                           flg = true;
                       }else{
                           //黒に変更
                           color = Color.BLACK;
                           flg = false;
                       }
                   }
               }
           ]
       }
   }

これは、円をクリックするたび黒→赤→黒と色を変化するものです。円を表すCircleクラスにマウスイベントonMouseClicked?を使用してます。

click_01.JPG

クリック後↓

click_02.JPG

ここでは、カラーを扱う変数colorと色の状態を表す変数flgを定義してます。変数flgは黒色の場合はfalseを持ち、赤の場合はtrueを持ちます。円をクリックするたび、if文でflgの状態を確認しfalseの場合赤に変更し、trueの場合は黒に変更します。
Circleオブジェクトの変数fillはcolorバインドさせることで変数colorの値が変更したときに、変数fillの値も変更します。

   fill: bind color

変数fillにバインドしないと、色は変更することができません。マウスイベントとバインドはつながりが深い注意が必要です。

マウス情報取得

マウスイベント時の方法を取得します。

   Stage {
       title : "MouseEvent"
       scene: Scene {
           width: 200
           height: 200
           content: [
               Circle {
                   centerX: 100, centerY: 100
                   radius: 40
                   fill: Color.BLACK;
                   //マウスイベント
                   onMousePressed: function( e: MouseEvent ):Void {
                       println("e.x = {e.x} :: e.y = {e.y}");
                       println("e.clickCount = {e.clickCount}");                    
                   }
               }
           ]
       }
   }

円をクリックするとコンソールにマウスの情報を出力します。
このコードはマウスが押された場合のイベントです。

  • クリックされた場所のx、y座標と押された回数を、出力してます。
  • クリック回数は、ある一定の時間に押された回数を表します。

イベント組み合わせ

複数のマウスイベントを組み合わせることもできます。
次はコードはイベントを3つ使用します。四角形をドラック移動ができ移動中は、少し透明にしています。

   //シェイプ座標
   var traX:Number = 0;
   var traY:Number = 0;
   //ドラックスタート座標
   var dragStartX: Number = 0.0;
   var dragStartY: Number = 0.0;
   //不透明度
   var op :Number = 1.0;

   Stage {
       title : "MouseEvent"
       scene: Scene {
           width: 500
           height: 500
           content: [
               Rectangle {
                   translateX: bind traX
                   translateY: bind traY
                   width: 140, height: 90
                   fill: Color.BLACK
                   opacity: bind op
                   //ドラッグ
                   onMouseDragged: function( e: MouseEvent ):Void {
                       //座標を更新
                       traX = e.dragX +dragStartX;
                       traY = e.dragY +dragStartY;
                   }
                   //プレス
                   onMousePressed: function( e: MouseEvent ):Void {
                       //現在の座標
                       dragStartX =traX;
                       dragStartY = traY;
                       //不透明設定
                       op = 0.5;
                   }
                   //リリース
                   onMouseReleased: function( e: MouseEvent ):Void {
                       //不透明設定
                       op = 1.0;
                   }
               }
           ]
       }
   }

ドラック移動するための複数の値を取得します。

  • 移動する前の座標
  • ドラック移動した距離

この2つを取得します。
onMousePressed?の処理は、マウスを押したときの座標を取得しdrackStartX,Yに値を代入します。
このときに、一緒に不透明度表すopに0.5を代入し不透明度を半分にします。

   //現在の座標
   dragStartX =traX;
  dragStartY = traY;
  //不透明設定
   op = 0.5;

onMouseDragged?の処理は、translateX,Yの値を更新します。
変数eからドラック移動した距離を取得します。そして、ドラック移動する前の座標に加算しtraX ,traY更新します。
traX ,traYを更新することでtranslateX,translateYの値が更新され移動したように見えます。

   //座標を更新
   traX = e.dragX +dragStartX;
   traY = e.dragY +dragStartY;

onMouseReleased?の処理は、ドラッグ移動が終了したときに不透明度を戻します。
変数opに1.0を代入することで不透明度を戻してます。

   //不透明設定
   op = 1.0;

変数traX,traY、変数drackStartX,drackStartXY、変数opを定義しました。
定義した、変数を使用してRectangleオブジェクトの各変数にバインドすることでマウスイベントで値が更新された時に一緒に更新されます。

drag.JPG

↑ドラック移動している様子です。

キーイベント

使い方はマウスイベントとほぼ同じです。
サンプルを実行します。

   var text: String = "";

   Stage {
       title : "onKeyTyped"
       scene: Scene {
           width: 300
           height: 150
           content: [
               TextBox{
                   text: ""
                   //キーイベント設定
                   onKeyTyped: function( e: KeyEvent ):Void {
                       text = "{text}{e.char}";
                   }
               }
               Text {
                   font : Font { size: 24 }
                   x: 10, y: 60
                   content: bind text
               }
           ]
       }
   }

テキストボックスに文字を入力すると、テキストシェイプに表示されます。
ここでは、TextBox?に変数onKeyTyped?にfunctionを設定しています。引数にKeyEvent?が設定しています。
このKeyEvent?は、キーイベント関係の情報がまとめられています。
KeyEvent?クラスのcharは入力された文字を表します。
e.charは変数textに連結され、バインドしているTextオブジェクトの変数contentの値を更新します。

onKey_00.JPG

このはかに、2つのキーイベントが用意されてます。

  • onKeyPressed?
    キーが押し下げられたときに、発生するイベント。
  • onKeyReleased?
    キーが離された時に、発生するイベント。
   var str1: String = "onKeyPressed = null";
   var str2: String = "onKeyReleased = null";
   var str3: String = "onKeyTyped = null";

   Stage {
       title : "onKey"
       scene: Scene {
           width: 300
           height: 200
           content: [
               TextBox {
                   //押された
                   onKeyPressed: function( e: KeyEvent ):Void {
                       str1 ="onKeyPressed = { e.text}";
                   }
                   //はなされた
                   onKeyReleased: function( e: KeyEvent ):Void {
                       str2 = "onKeyReleased = {e.text}";
                   }
                   //タイプ
                   onKeyTyped: function( e: KeyEvent ):Void {
                       str3 = "onKeyTyped = {e.char}";
                   }
               },
               Text {
                   font : Font { size: 20 }
                   x: 10, y: 60
                   content: bind str1
               },
                Text {
                   font : Font { size: 20 }
                   x: 10, y: 90
                   content: bind str2
               },
                Text {
                   font : Font { size: 20 }
                   x: 10, y: 120
                   content: bind str3
               }
           ]
       }
   

キーのイベントを取得し表示します。

  • タイプされたとき、"onKeyPressed?="が表示される。
  • キーを押したとき、"onKeyReleased?="が表示される。
  • キーをはなしたとき、"onKeyTyped?="が表示される。
onKey.JPG

キーイベントの違い

  • onKeyPressed?とonKeyPressed?
    e.charで文字を取得できないのでe.textを取得します。Alt,Ctrlなどのイベントは取得できる。
  • onKeyTyped?
    e.charで文字を取得できるが、e.textでAlt,Ctrlなどのイベントは取得できない。

アクセス総数6249件

最終更新日: 2009-09-03 (木) 22:34:28 (2998d)

このページをブックマーク:

このページのURL(コピペして利用下さい):

TOP