本文介绍如何在JavaFX桌面应用程序中创建可点击的交互式缩略图。点击缩略图后,将会显示更大的图像,并带有突出显示图像及其细节的叠加层。类似于W3School中缩略图的交互式示例。
首先,需要添加FxPopup库依赖:
<dependency> <groupId>io.github.hugoquinn2</groupId> <artifactId>fxpopup</artifactId> <version>1.1.0</version> </dependency>
创建简单的缩略图
一个简单的缩略图只需要一个叠加层和一个图像。以下示例展示了如何创建一个缩略图:
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); }
创建自定义ImageView用于缩略图
为了方便创建缩略图,我们创建一个自定义的ThumbnailImage
类,继承自ImageView
,使其自带缩略图显示功能:
public class ThumbnailImage extends ImageView { // ... (代码与原文相同) ... }
使用自定义ThumbnailImage
类,可以轻松创建多个缩略图对象并添加到任何位置:
@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); }
通过以上步骤,即可在JavaFX应用程序中轻松创建和使用交互式缩略图。 请注意,MasterUtils
类和其方法需要根据实际项目情况进行调整。
以上是如何在Javafx上制作缩略图?的详细内容。更多信息请关注PHP中文网其他相关文章!