jacksparrow

前回までは、主に画像描画を題材sにしたアプリケーションの作成について、投稿を執筆してきましたが、そろそろ内容に偏りが出て来てしまっているので、今回は、 JavaFX に用意されている、図形描画コンポーネントを利用した、簡単なアプリケーションの作成について、執筆して行きたいと思います。

JavaFX で用意されている図形コンポーネントは、 javafx.scene.shape パッケージに有り、 Arc (アーチ)、 Circle (円)、 Ellipse (楕円)、 Line (線)、 Polygon (多角形)、 PolyLine (折れ線)、 Rectangle (矩形)等があります。今回は、 Circle (円)を使って、いろいろとやって行きたいと思います。

それでは早速実装作業に取りかかります。今回の Stage は、この円を画面上で動かすようなアプリケーションを作成して行くことを考慮し、６００×６００サイズで作成します。コードは以下のとおり :
Stage {
　　title: "MovingCircle"
　　scene: Scene {
　　　　width: 600
　　　　height: 600
　　　　fill: Color.BLACK
　　　　content: [

　　　　]
　　}
}ここに、円を描画させるコードを実装させる為、以下のスクリーンショットの様に、パレットからコンポーネントをドラッグアンドドロップします。



展開されたコードは以下のとおり :
Circle {
　　centerX: 100,
　　centerY: 100
　　radius: 40
　　fill: Color.BLACK
}centerX, centerY は、それぞれ円の中心に対する横方向、縦方向の表示位置、 radius は半径、 fill は描画する円の色で、デフォルトは黒のようですね。今のままでは、画面表示できなくなってしまうので、これを CYAN に変更します。実行結果は、以下のスクリーンショットのとおりです。



ちょっと小さいですね。 radius に 100 を指定して、この円を少し大きくします。図形が描画できたところで、ただ表示するだけでは面白くないので、今回は、 javafx.animation.Timeline と、javafx.animation.KeyFrame 、それと bind の機能を使ってこの円を動かしてみます。実装するコードは以下のとおり :
var x: Number = -100.0;

var timeline: Timeline = Timeline {
　　repeatCount: Timeline.INDEFINITE
　　keyFrames: [
　　　　KeyFrame {
　　　　　　time: 0s
　　　　　　values: {
　　　　　　　　x => -100.0
　　　　　　}
　　　　},
　　　　KeyFrame {
　　　　　　time: 2s
　　　　　　values: {
　　　　　　　　x => 600 + 100 tween Interpolator.LINEAR
　　　　　　}
　　　　}
　　]
}var x は、横方向の円の表示開始位置、次の var timeline にて、 2D アニメーションを行う為の定義を記述しています。 Timeline のネストを見てみましょう。 repeatCount は、このアニメーションの再生回数で、デフォルトでは、 INDEFINITE (無制限)が定義されます。再生回数には、 0 よりも大きな数字を指定する必要はあります。次に、 KeyFrame が２つ指定されています。１つ目の KeyFrame は、アニメーションを始めるときの、x の開始値と、開始時間、 0s と設定されているのは、アプリケーション起動後すぐに描画すると言うことを表しています。２つ目の KeyFame は、 time に指定された時間後（この場合は 2 秒後）に、 values に指定された x の値を保持する、 "=>" の右辺で示された座標へ移動させ、 tween Interpolator.LINEAR と記述されている部分は、時間軸に対して値の変化を、定量的に変化させると言うことを示しています。因にこの部分に関して、 JJUG の桜庭さんが、 gihyo.jp にて詳述されているので、そちらをご参考にされることをお勧めします。

そしてこの x の値を Circle の x 座標に bind させて、円を動かすコードを追記します。変更したコードは以下のとおり :
Stage {
　　title: "MovingCircle"
　　scene: Scene {
　　　　width: 600
　　　　height: 600
　　　　fill: Color.BLACK
　　　　content: [
　　　　　　Circle {
　　　　　　　　radius: 100
　　　　　　　　fill: Color.CYAN
　　　　　　　　transforms: Translate {
　　　　　　　　　　x: bind x,
　　　　　　　　　　y: 250.0
　　　　　　　　}
　　　　　　}
　　　　]
　　}
}

timeline.play();上記コードの最後に記述された、 timeline.play() 、このメソッドを呼び出すことで、アニメーションは開始されます。このメソッドは、当 JavaFX アプリケーションを開始すると、 repeatCount で指定された回数分、動作します。今回は、無制限に指定しているので、 JavaFX アプリケーションが動作中、動き続けます。これに更に縦方向にも動くようにコードを変更します。 var y を定義し、 KeyFrame に、縦方向の定義を追記します。追記したコードは、以下のとおり :
KeyFrame {
　　time: 0s
　　values: {
　　　　y => -100.0
　　}
},
KeyFrame {
　　time: 2s
　　values: {
　　　　y =>
　　　　600 + 100 tween Interpolator.LINEAR
　　}
}そして、 Circle のネスト内部にある Translate のネストにて、 y を bind します。変更したコードは以下のとおり :
transforms: Translate {
　　x: bind x,
　　y: bind y
}動作結果については、以下のスクリーンキャストのとおりです。




更に Circle に、 onMousePressed と、 onMouseReleased イベントを使って、停止、再生するように変更してみます。追加したコードは以下のとおり :
onMousePressed: function( e: MouseEvent ):Void {
　　timeline.pause();
}
onMouseReleased: function( e: MouseEvent ):Void {
　　timeline.play();
}変更後の動作結果は、以下のスクリーンキャストのとおりです。




また、当サンプルについては、コマンドラインに、以下のコマンドを入力することで、お試し頂けます。
javaws http://www7.atpages.jp/torutuga/javafx/MovingCircle.jnlpブラウザから起動する場合はこちらからご覧頂けます。

それほど複雑で、難解なコードではないので、皆さんも是非一度お試しください。