如何在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中文網其他相關文章！