グラフィックの特殊効果 (1/5)

シェイプの図形は、基本的な形状はとてもシンプルです。例えば四角形ならば、縦横水平垂直な辺のものだけです。「ちょっと斜めになった四角形」なんていう部品はありません。では、こうしたものはどうやって作ればいいのでしょう。

それは、「トランスフォーメーション」です。これは、シェイプの表示を移動・回転・拡大縮小するための機能です。シェイプのスーパークラスに当たるNodeクラスには、そのためのメソッドが以下のように用意されています。

・平行移動

《Node》.setTranslateX( 移動量 );
《Node》.setTranslateX( 移動量 );
《Node》.setTranslateX( 移動量 );

・回転

《Node》.setRotate( 回転角度 );

・拡大縮小

《Node》.setScaleX( 拡大率 );
《Node》.setScaleY( 拡大率 );
《Node》.setScaleY( 拡大率 );

　平行移動は、X, Y, Z軸のそれぞれの方向に平行移動するものです（なんでZ軸まで？と思うでしょうが、実はJavaFXには3Dグラフィックの機能も用意されているからです）。

回転は、回転角度を指定します。「逆回転は？」と思った人、マイナスの角度を指定すればいいんですよ！

拡大縮小も、やはりX, Y, Z軸のそれぞれの方向に用意されています。これは拡大率なので、1.0より大きければ拡大、小さければ縮小します。

では、簡単な利用例を以下に挙げておきましょう。前回作成した、シェイプ生成のcreateShapeメソッドを書き換える形で作成してあります。実行すると、四角い図形が少しずつ変化しながら描かれていくのがわかります。

Rectangleを作成し、平行移動・回転・拡大をして図形の表示を少しずつずらしていきます。new Rectangleで作成する図形の位置と大きさはすべて同じですが、表示は少しずつ変化していくのです。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

public void createShape(Pane root){
    for(int i = 0;i < 100;i++){
        Rectangle r = new Rectangle(10, 10, 25, 25);
        r.setFill(Color.YELLOW);
        r.setStroke(Color.GREEN);
        r.setStrokeWidth(3);
        r.setRotate(10 * i);
        r.setTranslateX(5 * i);
        r.setTranslateY(2.5 * i);
        r.setScaleX(1 + 0.05 * i);
        root.getChildren().add(r);
    }
}