グループ Group

今日も ITpro の詳細 JavaFX でカットした部分です。詳細は前のエントリにて。

ノードのグループ化

複数のノードを扱っている場合、それらをまとめて扱いたい場合がよくあります。たとえば、複数のノードにまとめてエフェクトを施すことや、まとめて移動したい場合などがあります。

このようにノードをまとめてグループ化する時に使用するのが、javafx.scene.Groupクラスです。

Groupクラスはノードのシーケンスであるcontentプロパティを持ちます。ここに複数のノードを設定することで、それらをグループとして扱うことができます。

次のスクリプトは四角と円を1つのグループにまとめています。

// 四角と円をグループ化する
var group = Group {
    content: [
        Rectangle {
            x: 10 y: 10 width: 100 height: 60
            fill: Color.RED
        },
        Circle {
            centerX: 50 centerY: 50 radius: 30
            fill: Color.BLUE
        }
    ]
}

Stage {
    title: "Group Sample"
    scene: Scene {
        width: 200 height: 150
        content: group
    }
}

これを実行しても、グループ化していない場合と何も変わりません。

つまり、Groupクラスはシーンに貼ったとしても、何も描画されません。この点がSwingのJPanelクラスなどとは異なる点です。

グループにエフェクトを施す

次に、Groupオブジェクトに対して、エフェクトを施してみましょう。

// 四角と円をグループ化する
var group = Group {
    content: [
        Rectangle {
            x: 10 y: 10 width: 100 height: 60
            fill: Color.RED
        },
        Circle {
            centerX: 50 centerY: 50 radius: 30
            fill: Color.BLUE
        }
    ]
    
    // ドロップシャドウを施す
    effect: DropShadow {
        blurType: BlurType.ONE_PASS_BOX
        offsetX: 4 offsetY: 4
        radius: 4
    }
}

このようにドロップシャドウを施して実行すると、描画が図のように変化します。

比較のため、グループにはドロップシャドウを施さず、四角と円の個々にドロップシャドウを施した場合を以下に示します。

円と四角が重なっている部分を見るとよく分りますが、グループにドロップシャドウを施した場合は重なっている部分にはドロップシャドウが描画されていません。

このようにグループでまとめると、1 つのノードのように扱うことができます。ドロップシャドウもグループでまとめている複数のノードを一緒にして、そこにドロップシャドウを施します。このため、重なっている部分にはドロップシャドウが施されないのです。

グループに対する操作

グループのlayoutXプロパティやtranslateXプロパティを設定すると、四角と円を一緒に移動できます。

// 四角と円をグループ化する
var group = Group {
    content: [
        Rectangle {
            x: 10 y: 10 width: 100 height: 60
            fill: Color.RED
        },
        Circle {
            centerX: 50 centerY: 50 radius: 30
            fill: Color.BLUE
        }
    ]
 
    // xに50、yに30移動
    layoutX: 50 layoutY: 30
     
    // ドロップシャドウを施す
    effect: DropShadow {
        blurType: BlurType.ONE_PASS_BOX
        offsetX: 4 offsetY: 4
        radius: 4
    }
}

実行すると、図のように四角と円が一緒に移動します。

同じように回転や拡大・縮小などもグループでまとめて行なうことができます。

このように複数のノードをグループとしてまとめると、1つのノードして扱えるのです。このグループという概念はドローイングソフトでは当たり前のように使っている概念ですが、それをそのままスクリプトで使えるのがおもしろいですね。