ついにベールを脱いだJavaFX

第4回 シェイプで遊ぶ

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

次に,Translateオブジェクトを生成する閉括弧の後にカンマを記入し,その下に空行を挿入します。Circleオブジェクトの部分だけ次に示します。

リスト8

                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
                }

そして,この空行のところにScaleをドラッグしてドロップします。すると,スクリプトは次のように変更されます。

リスト9

                Circle {
                    transforms: [
                            Translate {
                            x : 0.0,
                        y : 0.0 },
                        Scale { 
                            x : 0.0, 
                            y : 0.0 }
                    ]
                    centerX: 0
                    centerY: 0
                    radius: 30
                    fill: Color.rgb(175, 238, 238, 0.6)
                    stroke: Color.SKYBLUE
                }

赤字の部分が挿入された箇所です。Scaleクラスはx軸方向の拡大率を表すxアトリビュートと,y軸方向の拡大率を表すyアトリビュートからなります。

次に,移動量と縮小率を乱数で定義します。それぞれ,transX,transY,scaleという変数を定義し,乱数で値を決めます。そして,これらの変数をTranslateオブジェクトやScaleオブジェクトのアトリビュートに指定します。最終的なスクリプトは次のようになりました。

リスト10

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

赤字で示した変数で移動量,縮小率を決めています。では,実際にこのスクリプトを実行してみましょう。実行結果を図25に示しました。

図25 移動,縮小による複数円の描画

図25 移動,縮小による複数円の描画

グラデーションで塗る

先ほどのサンプルでは透明度を設定することで泡っぽく見せていましたが,こんどはボールです。ボールっぽく見せるためにはスポットが当たっているように色を塗ります。これには環状のグラデーションを適用させます。

JavaFX Scriptでは2種類のグラデーションが用意されています。線形のグラデーションを表すjavafx.scene.paint.LinearGradientクラスと環状のグラデーションを表すjavafx.scene.paint.RadialGradientクラスです。ここでは,RadialGradientクラスを使用します。

LinearGradientクラスとRadialGradientクラスは,2色以上の色を使用して色をグラデーションを作成することができます。色の指定にはStopクラスを使用します。

色を指定するには,相対位置で設定するか絶対位置で設定するか選びます。この指定にはproportionalアトリビュートで指定します。proportionalアトリビュートがtrueの場合相対位置,falseの場合絶対位置になります。何も指定しない場合は,デフォルトでtrueに設定されます。相対位置で指定する場合,0から1の値で位置を指定します。つまり,0から1の四角形でシェイプを囲み,その座標系での位置で色を指定することになります。

環状のグラデーションの場合は中心点も指定します。ここでは,中心点を(0.25, 0.25)にし,色の指定を中心点とそこから0.6離れた点にしました。これを図に表したのが図26です。

図26 RadialGradientの指定

図26 RadialGradientの指定

このように設定したRadialGradientオブジェクトをCircleオブジェクトのfillに指定します。スクリプトは次のようになりました。

リスト11

Stage {
    title: "Circle Sample"
    scene: Scene {
        width: 200
        height: 200
 
        content: [
            for (i in [0..99]) {
                // 乱数を使って場所や半径を決める
                var rand = new Random();
                var transX = rand.nextInt(200);
                var transY = rand.nextInt(200);
                var scale = rand.nextDouble();
                
                Circle {
                    transforms: [
                            Translate {
                            x : transX
                            y : transY
                        },
                            Scale {
                            x : scale
                            y : scale
                        }
                    ]
                    centerX: 0
                    centerY: 0
                    radius: 30
 
                    // 環状のグラデーションで色を塗る
                    fill: RadialGradient {
                        centerX: 0.25
                        centerY: 0.25
                        stops: [
                            Stop { 
                                offset: 0.0
                                color: Color.WHITE 
                            },
                            Stop { 
                                offset: 0.6
                                color: Color.SKYBLUE
                            }
                        ]
                    }
                }
            }
        ]
    }
}

赤字の部分がRadialGradientオブジェクトの生成部分です。グラデーションの中心を示すcenterXアトリビュートとcenterYアトリビュートは共に0.25にしてあります。Stopオブジェクトは位置が0.0(つまり中心)のものと,0.6のものがあります。それぞれ,その位置での色は白とスカイブルーです。

では,このスクリプトを実行してみましょう。実行結果を図27に示しました。先ほどの半透明な円と比べると,ずいぶん雰囲気が違いますね。

図27 グラデーションによる塗りつぶし

図27 グラデーションによる塗りつぶし

今回は,円を題材にさまざまな描画を試してみました。円以外にも四角や楕円なども同じように描画することができます。ぜひ,他のシェイプでも試してみてください。

また,文字を描画するjavafx.scene.text.TextクラスもShapeクラスのサブクラスなので,ここで使用したfillアトリビュートやtransformsアトリビュートなどがアトリビュートとして定義されています。したがって,グラデーションで塗ったり,変形させるということも可能です。こちらもぜひ試してみてください。

次回は,if文など前回説明しなかった文法について解説する予定です。

著者プロフィール

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

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