本文将演示如何在 JavaFX 桌面应用程序中创建点击式放大图片的缩略图效果，类似于网页中的缩略图功能。 我们将使用 fxpopup 库实现弹出式放大效果。 请确保已在项目中添加 fxpopup 依赖：

<code class="xml"><dependency>
    <groupId>io.github.hugoquinn2</groupId>
    <artifactId>fxpopup</artifactId>
    <version>1.1.0</version>
</dependency></code>

方法一：创建简单的缩略图

最基本的方法是使用一个 ImageView 显示缩略图，并用一个 Rectangle 作为遮罩层，点击遮罩层关闭放大效果。

<code class="java">Rectangle overlay;
FxPopup fxpopup;
ImageView imageView;

@FXML
public void initialize() {
    fxpopup = new FxPopup();
    imageView = new ImageView("https://th.bing.com/th/id/oip.tnno-9c6thhbbczohte7mqhafj?rs=1&pid=imgdetmain");
    overlay = new Rectangle();
    overlay.setFill(Color.BLACK);
    overlay.setOpacity(0.3);
    overlay.setOnMouseClicked(event -> {
        //移除图片和遮罩层
        masterutils.remove(imageView);
        masterutils.remove(overlay);
    });
}

@FXML
protected void onThumbnails() {
    fxpopup.show(overlay, Pos.CENTER);
    overlay.widthProperty().bind(((Pane) masterutils.getRoot()).widthProperty());
    overlay.heightProperty().bind(((Pane) masterutils.getRoot()).heightProperty());
    fxpopup.show(imageView, Pos.CENTER);
}</code>

方法二：创建自定义的缩略图 ImageView

YiHui GITHUB MONITOR

监控多个 GitHub 仓库，配置发布、PR 与安全告警策略，通过定时 cron 任务推送低噪声通知。

下载

立即学习“Java免费学习笔记（深入）”；

为了方便复用，我们可以创建一个自定义的 ImageView 类 ThumbnailImage，封装缩略图的创建和显示逻辑。

<code class="java">public class ThumbnailImage extends ImageView {
    Rectangle overlay;
    FxPopup fxpopup;
    ImageView thumbImage;
    double scaleThumbImage = 0.6;
    double overlayOpacity = 0.3;
    Color overlayColor = Color.BLACK;
    String defaultClassOverlay = "overlay";
    String defaultThumbImage = "thumb-image";

    public ThumbnailImage() { this(null, null); }
    public ThumbnailImage(String s) { this(s, null); }
    public ThumbnailImage(Image image) { this(null, image); }

    private ThumbnailImage(String s, Image image) {
        fxpopup = new FxPopup();
        thumbImage = new ImageView();
        overlay = new Rectangle();
        thumbImage.getStyleClass().add(defaultThumbImage);
        overlay.getStyleClass().add(defaultClassOverlay);

        if (s != null) {
            this.setImage(new Image(s));
            thumbImage.setImage(new Image(s));
        } else if (image != null) {
            this.setImage(image);
            thumbImage.setImage(image);
        }

        overlay.setFill(overlayColor);
        overlay.setOpacity(overlayOpacity);
        setThumbnail();
    }

    private void setThumbnail() {
        overlay.setOnMouseClicked(event -> {
            masterutils.remove(thumbImage);
            masterutils.remove(overlay);
        });

        setOnMouseClicked(event -> {
            Rectangle2D screenBounds = Screen.getPrimary().getBounds();
            double screenWidth = screenBounds.getWidth();
            double thumbImageWidth = screenWidth * scaleThumbImage;

            fxpopup.show(overlay, Pos.CENTER);
            overlay.widthProperty().bind(((Pane) masterutils.getRoot()).widthProperty());
            overlay.heightProperty().bind(((Pane) masterutils.getRoot()).heightProperty());
            thumbImage.setFitWidth(thumbImageWidth);
            thumbImage.setPreserveRatio(true);
            fxpopup.show(thumbImage, Pos.CENTER);
        });
    }

    // ... getters and setters for customization ...
}</code>

使用方法：

<code class="java">@FXML
public void initialize() {
    ThumbnailImage imageView = new ThumbnailImage("https://shorturl.at/Ymi2B");
    // ... add more ThumbnailImage instances ...
    imageView.setFitWidth(150);
    imageView.setPreserveRatio(true);
    root.getChildren().addAll(imageView, ...);
}</code>

记住替换 masterutils.getRoot() 为你获取根 Pane 的方法。 这个改进后的版本更易于使用和扩展，并允许对缩略图的样式进行更精细的控制。 请根据你的实际需求调整代码和样式。