FX

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.

Examples

• Adding Reflections to Make Your UI Elements Shine
  Provides more information about how to use reflections and, specifically, the Reflection class in the JavaFX Script programming language.

API Documentation

• Reflection

Last Updated: November 2009
[Return to How-To's Home]

---

Do you have comments about this article? We welcome your participation in our community. Please keep your comments civil and on point. You may optionally provide your email address to be notified of replies—your information is not used for any other purpose. By submitting a comment, you agree to these Terms of Use.