How-To's > How do I add a reflection?

Add a reflection to a node by using the reflection effect.

Example Code

The following example shows reflections for several types of nodes:

import javafx.scene.Scene;
import javafx.scene.effect.Reflection;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.stage.Stage;

def image=Image {
    url: "{__DIR__}woodstove.jpg"
    backgroundLoading: true
}

Stage {
   title: "Reflections"
   scene: Scene {
       width:430
       height:340
       content: [
           Text {
               effect: Reflection { fraction: 0.6 }
               x: 10 y: 204
               content: "Reflections"
               fill: Color.TOMATO
               font: Font.font(null, FontWeight.BOLD, 24);
           }
           Circle {
               effect: Reflection {fraction: 0.6 }
               centerX: 192 centerY: 174
               radius: 30
               fill:Color.DARKORANGE
               stroke:Color.ORANGERED
           }
           ImageView {
               image: image
               effect: Reflection {fraction: 0.6 }
               preserveRatio: true
               smooth: true
               //cache: true
               x: 240
               y: 10
           }
       ]
   }
} 

Tips

• Effects can be expensive to render, and you can cache the node as a bitmap image by applying the variable cache:true. You have a tradeoff between speed of rendering the primitive shape and memory usage for the cached bitmap image. In general, it is beneficial to cache large static nodes or groups of nodes with effects applied.

API Documentation

• Reflection

Last Updated: April 2010
[Return to How-To's Home]

---