JavaFX 模糊窗格下方的区域

Question

有没有办法只对由窗格区域定义的图像的一部分添加模糊效果？如果你模糊图像上的窗格，只有窗格变得模糊，但是有没有办法模糊下面的图片部分？

这是我的意思的一个例子：它只是一个图像，上面覆盖了一个具有背景和不透明度设置的窗格。现在我想模糊窗格所在的部分。

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

您可以使用 ImageView 的 Clip 将效果仅应用于图像的特定区域：

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);
    }
}

JavaFX 模糊窗格下方的区域

JavaFX blur underneath area from pane

javafx

fxml

scenebuilder