本文将演示如何在 JavaFX 桌面应用程序中创建点击式放大图片的缩略图效果，类似于网页中的缩略图功能。 我们将使用 fxpopup 库实现弹出式放大效果。 请确保已在项目中添加 fxpopup 依赖：
io.github.hugoquinn2 fxpopup 1.1.0方法一：创建简单的缩略图
最基本的方法是使用一个 ImageView 显示缩略图，并用一个 Rectangle 作为遮罩层，点击遮罩层关闭放大效果。
Rectangle overlay;FxPopup fxpopup;ImageView imageView;@FXMLpublic 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); });}@FXMLprotected 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
立即学习“Java免费学习笔记（深入）”；
为了方便复用，我们可以创建一个自定义的 ImageView 类 ThumbnailImage，封装缩略图的创建和显示逻辑。
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 ...}使用方法：
@FXMLpublic void initialize() { ThumbnailImage imageView = new ThumbnailImage("https://shorturl.at/Ymi2B"); // ... add more ThumbnailImage instances ... imageView.setFitWidth(150); imageView.setPreserveRatio(true); root.getChildren().addAll(imageView, ...);}记住替换 masterutils.getRoot() 为你获取根 Pane 的方法。 这个改进后的版本更易于使用和扩展，并允许对缩略图的样式进行更精细的控制。 请根据你的实际需求调整代码和样式。
以上就是如何在 JavaFX 上制作缩略图？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/191049.html
微信扫一扫 
支付宝扫一扫 
