jacksparrow

前回は、ボタンアクションによって、画像が切り替わる、簡単なアプリケーションの作成をしました。今回は、２つの画像を重ねて表示させたり、上に重なっている画像を透過させたり、 onMouseMoved イベントを使用して、上に重なった画像が、マウスポインターの動きに合わせて移動するアプリケーションを作成して行きたいと思います。

今回も、 flickr へアップした、以下２つの画像を使用します。




まずは、２つの画像を表示し、小さい方の画像が、大きい方の画像の中央に表示される様にコードを実装します。実装コードは以下のとおりです。:
package jp.glassfish.jacksparrow.flickr.translate;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;

/**
* @author Captain Jack Sparrow
*/

var mainPanel : ImageView = ImageView {
　　image : Image {
　　　　url : "http://farm4.static.flickr.com/3138/3077967086_39a29023ed_o.jpg"
　　　　width : 800
　　　　height : 600
　　}
}

var icon : ImageView = ImageView {
　　image : Image {
　　　　url : "http://farm4.static.flickr.com/3473/3290450154_6c11df8b64_o.jpg"
　　}
　　x: 350
　　y: 200
}


Stage {
　　title: "Application title"
　　width: 800
　　height: 620
　　scene: Scene {
　　　　content: [
　　　　　　mainPanel,
　　　　　　icon
　　　　]
　　}
}上記コードより、特筆すべき点としては、背景に表示させる画像は、全面に表示させる画像よりも前の段階で、 Scene の中に実装する必要があります。以前にもお話したとおり、 JavaFX が画面描画を行う際、上から下へ、順次インスタンスを初期化して行くことから、順序に関しては、特に留意する必要がありますね。

そして上記コードの実行結果は以下のスクリーンショットの通りです。



そして次に、小さな方の画面を透過させるようにしてみます。 ImageView に予約されているエレメント "opacity" を使用して透過させます。実装したコードは以下のとおり :
var icon : ImageView = ImageView {
　　image : Image {
　　　　url : "http://farm4.static.flickr.com/3473/3290450154_6c11df8b64_o.jpg"
　　}
　　opacity : 0.4
　　x: 350
　　y: 200
}透明度の指定は、 0.0 〜 1.0 の間で指定します。そして上記コード実装後の実行結果は以下のスクリーンショットのとおり。



この技術を使えば、心霊写真の合成など、いとも簡単にできてしまいそうですね・・・σ(^_^;)ｱｾ　まぁ何もこの、画像などを透過させる技術は、 html が利用されるようになったころから、 Web の世界では既に存在していたわけですが・・・

そして今度は、このゴースト化した小さな画像を、背景画像の onMouseMoved イベントを利用して、マウスポインタに合わせて動くようにしてみます。パレットから、大きな画像を表示する ImageView へ、 onMouseMoved をドラッグアンドドロップします。



展開されたコードは以下のとおり :
var mainPanel : ImageView = ImageView {
　　image: Image {
　　　　url: "http://farm4.static.flickr.com/3138/3077967086_39a29023ed_o.jpg"
　　　　width: 800
　　　　height: 600
　　}
　　onMouseMoved: function( e: MouseEvent ):Void {

　　}
}そしてこの関数に引き渡されてきた変数 MouseEvent 、この変数が保管している sceneX と scene Y それぞれの値を利用して、小さな画像の表示座標位置の変更を行います。因に sceneX, scene Y は、それぞれマウスポインターの座標位置をさします。また、この変数値の受け皿となる変数 x, y を定義します。実装したコードは以下のとおり :
var x: Number = 350;
var y: Number = 200;

var mainPanel : ImageView = ImageView {
　　image: Image {
　　　　url: "http://farm4.static.flickr.com/3138/3077967086_39a29023ed_o.jpg"
　　　　width: 800
　　　　height: 600
　　}
　　onMouseMoved: function( e: MouseEvent ):Void {
　　　　x = e.sceneX - 60;
　　　　y = e.sceneY - 80;
　　}
}上記コード中、変数 x, y に指定している数値は、小さな画像の初期表示位置になります。そして onMouseMoved のネストで、各変数へ座標位置を代入する際、引き算をしていますが、これは、小さな画像とマウスポインターの相対位置を、小さな画像のちょうど真ん中に来る様にする為に、算出しています。（つまりこの小さな画像サイズは、 120 × 160 であることが、これでおわかり頂けると思います。）

そして動かす側の小さな画像となる ImageView のエレメントに、 "transforms" を追加します。因にこのエレメントの型は、 javafx.scene.transform.Translate になります。実装コードは以下のとおり :
var icon : ImageView = ImageView {
　　image : Image {
　　　　url : "http://farm4.static.flickr.com/3473/3290450154_6c11df8b64_o.jpg"
　　}
　　opacity : 0.4
　　transforms : Translate { x : bind x, y : bind y }
}ご覧のとおり、 Translate のネストの中で、それぞれ x, y に、変数 x, y の値をバインドしていることが判りますね。この bind 機能、 Sun Tech Days の JavaFX のセッションで、「 エレメントに対するデータバインドが出来る様になりました。」と説明されたと記憶しているのですが、いつから出来る様になったのかは、私も把握してないです・・・σ(^_^;)ｱｾ　とりあえず、便利になったことは確かですね　(*｀д´)b goo♪

そしてこのアプリケーションの実行結果は以下のスクリーンキャストのとおりです。




なんとも簡単に出来てしまいますね！　これを応用して、マウスを使ったゲームなんかも作成できそうと言った感じ、そろそろ私も、本格的にマッシュアップを作成してみようと、やる気が出てきました。（笑）因に当アプリケーションは、以下のコマンドにて実行できます。
$ javaws http://www7.atpages.jp/torutuga/javafx/MyTranslate.jnlpまた、 Mac OS X 以外の場合は、前回ご紹介した URL にアクセスすることで、お試し頂けます。どうぞご閲覧ください。

如何でしたでしょうか？　皆さんも是非トライしてみてください。