グラフィックの特殊効果 (2/5)
作成:2015-04-11 10:40
更新:2015-04-11 10:40
更新:2015-04-11 10:40
■図形の透過
ここまでの図形は、すべて図形の内部を決まった色で塗りつぶした形になっていました。図形を重ねれば、もちろん下にある図形は隠れて見えなくなりました。では、図形を半透明にして下のものが透けて見える用な表示をしたい場合はどうなるのでしょうか。
これには、「setOpacity」というメソッドを使います。これは図形の透過率を設定するためのメソッドで以下のように利用します。
これで図形を半透明にすることは簡単にできるようになります。ただし、実際にやてみるとわかりますが、この方法では「輪郭線だけ描き、図形の内部は半透明にする」といったことはできません。これは、図形全体を同じように透過するものです。内部だけでなく輪郭線も同じように透過します。
図形の内部を透過したい場合は、実はsetFillを使えばいいのです。これで、Color.TRANSPARENTを指定すれば、内部が透明になり輪郭線だけの図形が描かれます。
下にその利用例を挙げておきます。実行すると、四角形が横一列に並んで表示されます。輪郭線だけは赤く表示され、その内部は少しずつ透明に変わります。
ここでは、setOpacityで全体を透過した図形と、setFill(Color.TRANSPARENT)で内部を透過した図形を重ねることで、「輪郭線はそのままで内部だけ少しずつ透過する図形」を表現しています。
これには、「setOpacity」というメソッドを使います。これは図形の透過率を設定するためのメソッドで以下のように利用します。
《Node》.setOpacity( 透過率 );引数には、０～１の間の実数（double）を指定します。ゼロならば透明に、１ならば不透明になります。これで図形を半透明にすることは簡単にできるようになります。ただし、実際にやてみるとわかりますが、この方法では「輪郭線だけ描き、図形の内部は半透明にする」といったことはできません。これは、図形全体を同じように透過するものです。内部だけでなく輪郭線も同じように透過します。
図形の内部を透過したい場合は、実はsetFillを使えばいいのです。これで、Color.TRANSPARENTを指定すれば、内部が透明になり輪郭線だけの図形が描かれます。
下にその利用例を挙げておきます。実行すると、四角形が横一列に並んで表示されます。輪郭線だけは赤く表示され、その内部は少しずつ透明に変わります。
ここでは、setOpacityで全体を透過した図形と、setFill(Color.TRANSPARENT)で内部を透過した図形を重ねることで、「輪郭線はそのままで内部だけ少しずつ透過する図形」を表現しています。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
public void createShape(Pane root){
for(int i = 0;i < 20;i++){
Rectangle r = new Rectangle(10, 10, 50, 50);
r.setFill(Color.BLUE);
r.setStroke(Color.WHITE);
r.setTranslateX(20 * i);
r.setTranslateY(10 * i);
r.setOpacity(1 - 0.05 * i);
root.getChildren().add(r);
Rectangle r2 = new Rectangle(10, 10, 50, 50);
r2.setStroke(Color.RED);
r2.setFill(Color.TRANSPARENT);
r2.setTranslateX(20 * i);
r2.setTranslateY(10 * i);
root.getChildren().add(r2);
}
}
※関連コンテンツ