ついにベールを脱いだJavaFX

第4回 シェイプで遊ぶ

この記事を読むのに必要な時間:およそ 9 分

コードのカスタマイズ

黒の円では味気ないので,アトリビュートを編集してみましょう。

JavaFX Pluginは補完機能を持っているため,コードを記述するのも容易です。ここでは,fillの次の行にstrokeアトリビュートを追加しましょう。s を入力した時点でCtrlキーとスペースキーを同時に押します。すると,図21のように使用できる候補が表示され,候補の説明も上部に表示されます。

図21 コードの補完機能

図21 コードの補完機能

ここでは,リストの中からstrokeを選択します。ここでは,線の色にColor.SKYBLUE,塗りつぶし色にColor.PALETURQUOISEを選びました。

リスト4

Stage {
    title: "MyApp"
    scene: Scene {
        width: 200
        height: 200
        content: [ 
            Circle {
                centerX: 100,
                centerY: 100
                radius: 40
                fill: Color.PALETURQUOISE
                stroke: Color.SKYBLUE
            }
        ]
    }
}

さて,ここで実行をおこなってもいいのですが,もっと簡単にスクリプトを確認する方法もあります。その方法はプレビューを使用する方法です。プレビューは図22に示したエディターペインの上部にあるアイコンの中から,一番左にあるアイコンをクリックします。

図22 プレビューアイコン

図22 プレビューアイコン

すると,Design Previewというウィンドウが表示され,その中にスクリプトのプレビューが表示されます図23)⁠このプレビューはスクリプトを変更すると,それに追随して表示が更新されます。

図23 スクリプトのプレビュー

図23 スクリプトのプレビュー

複数の円を描画する

1つの円だけでなく,円をいっぱい描いてみましょう。前回,シーケンスの生成にfor文を使用する方法を紹介しましたが,ここではそれを利用します。

リスト5

Stage {
    title: "Circle Sample"
    scene: Scene {
        width: 200
        height: 200
        
        content: [
            for (i in [0..99]) {
                // 乱数を使って場所や半径を決める
                var rand = new Random();
                
                Circle {
                    centerX: rand.nextInt(200)
                    centerY: rand.nextInt(200)
                    radius: rand.nextInt(30)
                    // RGBA で色を指定
                    fill: Color.rgb(175, 238, 238, 0.6)
                    stroke: Color.SKYBLUE
                }
            }
        ]
    }
}

赤字で示したように,for文を使用して100回のループを回すことで,要素が100個あるシーケンスを生成できます。要素はすべてCircleオブジェクトですが,位置や半径は乱数で決めています。変数randはJavaのjava.util.Randomクラスのオブジェクトです。import文は必要ですが,newを使用して生成し,JavaFX Scriptのオブジェクトのように扱うことができます。

ここでは,円の塗りつぶし色をRGBと透明度で指定しました。線の色は前と同じColor.SKYBLUEです。では,このサンプルを実行してみましょう図24)⁠

図24 複数の円の描画

図24 複数の円の描画

泡のように見えますか?

このサンプルでは直接中心座標と半径を乱数で設定していました。これ以外に,基本となる円を作成し,それを移動,拡大・縮小するという方法もあります。移動や拡大・縮小を行うには,transformXやscaleXのようなアトリビュートを使用するか,transformsアトリビュートを使用するという2つの方法があります。

transformsアトリビュートはjavafx.scene.transform.Transformクラスのシーケンスとして定義されています。Transformクラスは変換のためのスーパークラスで,サブクラスには次のようなクラスがあります。

  • Affine : アフィン変換
  • Rotate : 回転
  • Scale : 拡大・縮小
  • Shear : シアー
  • Translate : 移動

ここではtransformsアトリビュートを使用することにしましょう。まず,スクリプトを以下のように変更します。

リスト6

Stage {
    title: "Circle Sample"
    scene: Scene {
        width: 200
        height: 200
 
        content: [
            for (i in [0..99]) {
                // 乱数を使って場所や半径を決める
                var rand = new Random();
                
                Circle {
                    transforms: [
                        
                    ]
                    centerX: 0
                    centerY: 0
                    radius: 30
                    fill: Color.rgb(175, 238, 238, 0.6)
                    stroke: Color.SKYBLUE
                }
            }
        ]
    }
}

円の位置は(0, 0)になるようにし,半径は30としました。また,赤字で示したようにtransformsアトリビュートを記述し,要素のないシーケンスを書いておきます。

そして,ここでもコードパレットを使用して,コードを自動生成してしまいましょう。変換を行うのはTransformationsカテゴリの中にあります。まず,Translateを選択して,transformsアトリビュートのシーケンスの中にドロップします。するとスクリプトは次のように変更されます。赤字の部分がコード生成された部分です。

リスト7

Stage {
    title: "Circle Sample"
    scene: Scene {
        width: 200
        height: 200
 
        content: [
            for (i in [0..99]) {
                // 乱数を使って場所や半径を決める
                var rand = new Random();
                
                Circle {
                    transforms: [
                        Translate { 
                            x : 0.0, 
                            y : 0.0 }
                    ]
                    centerX: 0
                    centerY: 0
                    radius: 30
                    fill: Color.rgb(175, 238, 238, 0.6)
                    stroke: Color.SKYBLUE
                }
            }
        ]
    }
}

Translateクラスはxアトリビュートとyアトリビュートで移動量を指定します。

著者プロフィール

櫻庭祐一(さくらばゆういち)

横河電機に勤務するかたわらJava in the Boxにて新しい技術を追い続けています。JavaOneは今年で11年目。名実共にJavaOneフリークと化しています。

コメント

コメントの記入