java - Frosted Glass Effect in JavaFX? -

i'm making ios7-themed javafx2/fxml project , wondering how make rectangle object have ios7-like frosted glass effect.

i'd have small shadow. tricky, since might able see shadow behind semi-transparent object. i'd present around edges.

is possible? here's picture showing desired effect (not including small drop-shadow):

update: here's continuation of issue. going amazing :d.

sample solution

run program below , scroll or swipe show glass pane.

the purpose of program sample techniques involved not act general purpose library frost effect.

import javafx.animation.*; import javafx.application.application; import javafx.beans.property.*; import javafx.geometry.rectangle2d; import javafx.scene.*; import javafx.scene.node; import javafx.scene.control.label; import javafx.scene.effect.*; import javafx.scene.image.*; import javafx.scene.input.scrollevent; import javafx.scene.layout.*; import javafx.scene.paint.color; import javafx.scene.shape.rectangle; import javafx.stage.stage; import javafx.util.duration;  // slides frost pane in on scroll or swipe up; slides out on scroll or swipe down. public class frosty extends application {      private static final double w = 330;     private static final double h = 590;      private static final double blur_amount = 60;     private static final duration slide_duration = duration.seconds(0.4);      private static final double upper_slide_position = 100;      private static final effect frosteffect =         new boxblur(blur_amount, blur_amount, 3);      @override public void start(stage stage) {         doubleproperty y = new simpledoubleproperty(h);          node background = createbackground();         node frost      = freeze(background, y);         node content    = createcontent();         content.setvisible(false);          scene scene = new scene(                 new stackpane(                         background,                         frost,                         content                 )         );          stage.setscene(scene);         stage.show();          addslidehandlers(y, content, scene);     }      // create background node frozen over.     private node createbackground() {         image backgroundimage = new image(                 getclass().getresourceasstream("ios-screenshot.png")         );         imageview background = new imageview(backgroundimage);         rectangle2d viewport = new rectangle2d(0, 0, w, h);         background.setviewport(viewport);          return background;     }      // create content displayed on top of frozen glass panel.     private label createcontent() {         label label = new label("the overlaid text clear , background below frosty.");          label.setstyle("-fx-font-size: 25px; -fx-text-fill: midnightblue;");         label.seteffect(new glow());         label.setmaxwidth(w - 20);         label.setwraptext(true);          return label;     }      // add handlers slide glass panel in , out.     private void addslidehandlers(doubleproperty y, node content, scene scene) {         timeline slidein = new timeline(                 new keyframe(                         slide_duration,                         new keyvalue(                                 y,                                 upper_slide_position                         )                 )         );          slidein.setonfinished(e -> content.setvisible(true));          timeline slideout = new timeline(                 new keyframe(                         slide_duration,                         new keyvalue(                                 y,                                 h                         )                 )         );          scene.setonswipeup(e -> {             slideout.stop();             slidein.play();         });          scene.setonswipedown(e -> {             slidein.stop();             slideout.play();             content.setvisible(false);         });          // scroll handler isn't necessary if have touch screen.         scene.setonscroll((scrollevent e) -> {             if (e.getdeltay() < 0) {                 slideout.stop();                 slidein.play();             } else {                 slidein.stop();                 slideout.play();                 content.setvisible(false);             }         });     }      // create frosty pane background node.     private stackpane freeze(node background, doubleproperty y) {         image frostimage = background.snapshot(                 new snapshotparameters(),                 null         );         imageview frost = new imageview(frostimage);          rectangle filler = new rectangle(0, 0, w, h);         filler.setfill(color.azure);          pane frostpane = new pane(frost);         frostpane.seteffect(frosteffect);          stackpane frostview = new stackpane(                 filler,                 frostpane         );          rectangle clipshape = new rectangle(0, y.get(), w, h);         frostview.setclip(clipshape);          clipshape.yproperty().bind(y);          return frostview;     }      public static void main(string[] args) { launch(args); } }   

source image

save image parallel java source file named ios-screenshot.png , have build system copy target directory binary output of build.

answers additional questions

"jdk 8," happen requirement of this?

the sample code above written against jdk 8. porting jdk 7 replacing lambda calls anonymous inner classes pretty trivial.

in general, java 7 pretty dated javafx work. advise upgrading @ earliest convenience work java 8 minimum version.

initiating panes arguments

more convenient constructors parent nodes java 8 feature. can convert java 8 format:

 stackpane stack = new stackpane(child1, child2); 

to java 7:

 stackpane stack = new stackpane();  stack.getchildren().setall(child1, child2); 

will working if desktop behind frosty pane?

not directly, can create new question that.

update: related questions

user created: javafx effect on background allow frosted effect apply window on desktop background.

another user created: how create javafx transparent stage shadows on border? apply halo shadow effect around window.