JavaFX blur underneath area from pane - javafx

Question

Is there any way to add a blur effect only to a part of an image defined by the area of a Pane? If you blur the pane over the image only the pane get blurred, but is there a way to blur the picture part underneath?
Here's an example of what I mean: It's simply just an image overlayed with a pane which has backgrouud and opacity set. Now I want to blur the part the pane lays on.
Main.java:
package application;
import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.layout.GridPane;
import javafx.fxml.FXMLLoader;
public class Main extends Application {
#Override
public void start(Stage primaryStage) {
try {
GridPane root = (GridPane)FXMLLoader.load(getClass().getResource("Sample.fxml"));
Scene scene = new Scene(root,500,500);
primaryStage.setScene(scene);
primaryStage.show();
} catch(Exception e) {
e.printStackTrace();
}
}
public static void main(String[] args) {
launch(args);
}
}
Sample.fxml:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.RowConstraints?>
<GridPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.111">
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
<ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
</rowConstraints>
<children>
<ImageView fitHeight="495.0" fitWidth="535.0" pickOnBounds="true" preserveRatio="true" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="CENTER">
<image>
<Image url="#../../../../Downloads/ZGEX2eX.jpg" />
</image>
</ImageView>
<Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: #012E56; -fx-opacity: 0.666;" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.rowIndex="1" GridPane.valignment="CENTER" />
</children>
</GridPane>

Answer 1

You can use the Clip of an ImageView to apply an effect only to a specific area of your image:
public class BlurredImageTest extends Application {
private DoubleProperty effectHeight = new SimpleDoubleProperty(80);
#Override
public void start(Stage primaryStage) {
Image image = new Image("yourImage.jpg");
ImageView img = new ImageView(image);
Rectangle clip = new Rectangle();
clip.widthProperty().bind(image.widthProperty());
clip.heightProperty().bind(image.heightProperty().subtract(effectHeight));
img.setClip(clip);
ImageView imgEffect = new ImageView(image);
Rectangle clipEffect = new Rectangle();
clipEffect.widthProperty().bind(image.widthProperty());
clipEffect.heightProperty().bind(effectHeight);
clipEffect.translateYProperty().bind(image.heightProperty().subtract(effectHeight));
imgEffect.setClip(clipEffect);
imgEffect.setEffect(new GaussianBlur());
StackPane root = new StackPane(img, imgEffect);
primaryStage.setScene(new Scene(root));
primaryStage.show();
}
public final void setEffectHeight(double value) {
effectHeight.set(value);
}
public static void main(String[] args) {
launch(args);
}
}