如何在Javafx上制作缩略图？

本文介绍如何在JavaFX桌面应用程序中创建可点击的交互式缩略图。点击缩略图后，将会显示更大的图像，并带有突出显示图像及其细节的叠加层。类似于W3School中缩略图的交互式示例。

首先，需要添加FxPopup库依赖：

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

创建简单的缩略图

一个简单的缩略图只需要一个叠加层和一个图像。以下示例展示了如何创建一个缩略图：

<code class="language-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用于缩略图

为了方便创建缩略图，我们创建一个自定义的ThumbnailImage类，继承自ImageView，使其自带缩略图显示功能：

<code class="language-java">public class ThumbnailImage extends ImageView {
    // ... (代码与原文相同) ...
}</code>

使用自定义ThumbnailImage类，可以轻松创建多个缩略图对象并添加到任何位置：

<code class="language-java">@FXML
public void initialize() {
    ImageView imageView = new ThumbnailImage("https://shorturl.at/Ymi2B");
    ImageView imageView2 = new ThumbnailImage("https://shorturl.at/1Lr99");
    ImageView imageView3 = new ThumbnailImage("https://shorturl.at/cSuFt");
    ImageView imageView4 = new ThumbnailImage("https://shorturl.at/SNygg");

    imageView.setFitWidth(150);
    imageView2.setFitWidth(150);
    imageView3.setFitWidth(150);
    imageView4.setFitWidth(150);

    imageView.setPreserveRatio(true);
    imageView2.setPreserveRatio(true);
    imageView3.setPreserveRatio(true);
    imageView4.setPreserveRatio(true);

    root.getChildren().addAll(imageView, imageView2, imageView3, imageView4);
}</code>

通过以上步骤，即可在JavaFX应用程序中轻松创建和使用交互式缩略图。 请注意，MasterUtils类和其方法需要根据实际项目情况进行调整。

以上是如何在Javafx上制作缩略图？的详细内容。更多信息请关注PHP中文网其他相关文章！