グラフィックの特殊効果 (1/5)
作成:2015-04-11 10:38
更新:2015-04-11 10:38
更新:2015-04-11 10:38
■トランスフォーメーションについて
シェイプの図形は、基本的な形状はとてもシンプルです。例えば四角形ならば、縦横水平垂直な辺のものだけです。「ちょっと斜めになった四角形」なんていう部品はありません。では、こうしたものはどうやって作ればいいのでしょう。
それは、「トランスフォーメーション」です。これは、シェイプの表示を移動・回転・拡大縮小するための機能です。シェイプのスーパークラスに当たるNodeクラスには、そのためのメソッドが以下のように用意されています。
・平行移動
・回転
・拡大縮小
平行移動は、X, Y, Z軸のそれぞれの方向に平行移動するものです(なんでZ軸まで?と思うでしょうが、実はJavaFXには3Dグラフィックの機能も用意されているからです)。
回転は、回転角度を指定します。「逆回転は?」と思った人、マイナスの角度を指定すればいいんですよ!
拡大縮小も、やはりX, Y, Z軸のそれぞれの方向に用意されています。これは拡大率なので、1.0より大きければ拡大、小さければ縮小します。
では、簡単な利用例を以下に挙げておきましょう。前回作成した、シェイプ生成のcreateShapeメソッドを書き換える形で作成してあります。実行すると、四角い図形が少しずつ変化しながら描かれていくのがわかります。
Rectangleを作成し、平行移動・回転・拡大をして図形の表示を少しずつずらしていきます。new Rectangleで作成する図形の位置と大きさはすべて同じですが、表示は少しずつ変化していくのです。
それは、「トランスフォーメーション」です。これは、シェイプの表示を移動・回転・拡大縮小するための機能です。シェイプのスーパークラスに当たる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); } }
※関連コンテンツ