JavaFX 图片查看器：从文件选择到图片展示

JavaFX 图片查看器：从文件选择到图片展示

上一篇我们解决了 JavaFX-MediaPlayer 参数URI格式问题，今天继续探索 JavaFX 的实用功能——图片查看器。我们将实现一个支持本地文件选择、图片预览、缩放拖拽的完整示例。

一、最终效果预览

运行程序后，点击「打开文件」按钮选择图片，即可在窗口中展示：

上图展示了程序主界面：标题栏显示「文件选择器」，包含一个「打开文件」按钮，下方展示选中的图片。

二、完整代码

importjavafx.application.Application;importjavafx.geometry.Insets;importjavafx.geometry.Pos;importjavafx.scene.Scene;importjavafx.scene.control.Button;importjavafx.scene.image.Image;importjavafx.scene.image.ImageView;importjavafx.scene.layout.BorderPane;importjavafx.scene.layout.HBox;importjavafx.stage.FileChooser;importjavafx.stage.Stage;importjava.io.File;publicclassImageViewerextendsApplication{privateImageViewimageView;@Overridepublicvoidstart(StageprimaryStage){// 1. 创建根布局BorderPaneroot=newBorderPane();root.setPadding(newInsets(10));// 2. 创建图片展示区域imageView=newImageView();imageView.setPreserveRatio(true);// 保持宽高比imageView.setFitWidth(800);// 默认适应宽度imageView.setFitHeight(600);// 默认适应高度root.setCenter(imageView);// 3. 创建顶部工具栏HBoxtopBar=newHBox(10);topBar.setAlignment(Pos.CENTER_LEFT);topBar.setPadding(newInsets(0,0,10,0));ButtonopenBtn=newButton("打开文件");openBtn.setOnAction(e->openImage(primaryStage));topBar.getChildren().add(openBtn);root.setTop(topBar);// 4. 创建场景并展示Scenescene=newScene(root,900,700);primaryStage.setTitle("文件选择器");primaryStage.setScene(scene);primaryStage.show();}/** * 打开文件选择器并加载图片 */privatevoidopenImage(Stagestage){FileChooserfileChooser=newFileChooser();fileChooser.setTitle("选择图片文件");// 设置文件过滤器，只允许图片格式fileChooser.getExtensionFilters().addAll(newFileChooser.ExtensionFilter("图片文件","*.png","*.jpg","*.jpeg","*.gif","*.bmp"),newFileChooser.ExtensionFilter("所有文件","*.*"));Filefile=fileChooser.showOpenDialog(stage);if(file!=null){// 使用 file.toURI() 获取正确的 URI 格式// 这与上一篇 MediaPlayer 的 URI 处理思路一致Imageimage=newImage(file.toURI().toString());imageView.setImage(image);}}publicstaticvoidmain(String[]args){launch(args);}}

三、核心知识点解析

3.1 FileChooser 文件选择器

JavaFX 提供了FileChooser类来创建原生风格的文件选择对话框：

3.2 图片 URI 的正确处理

上一篇我们解决了 MediaPlayer 的 URI 格式问题，图片加载同样需要正确处理：

// ❌ 错误：直接使用文件路径Imageimage=newImage("D:\图片\test.png");// 会报错！// ✅ 正确：使用 File.toURI()Imageimage=newImage(file.toURI().toString());// file:///D:/图片/test.png

核心原则：JavaFX 的Image和Media类都需要标准 URI 格式，Windows 路径中的反斜杠和中文都会导致解析失败。

3.3 ImageView 常用属性

imageView.setPreserveRatio(true);// 保持原始宽高比imageView.setFitWidth(800);// 限制最大宽度imageView.setFitHeight(600);// 限制最大高度imageView.setSmooth(true);// 启用平滑缩放imageView.setCache(true);// 启用缓存提升性能

四、运行效果截图

4.1 选择图片文件

弹出系统原生的文件选择对话框，已过滤为图片格式。

4.2 图片展示效果

选中的图片自适应窗口大小展示，保持原始比例不变形。

五、进阶：添加缩放和拖拽功能

如果想实现类似图片浏览器的缩放拖拽效果，可以添加以下代码：

// 在 start() 方法中，创建 imageView 后添加：// 鼠标滚轮缩放imageView.setOnScroll(e->{doubledelta=e.getDeltaY();doublescale=imageView.getScaleX();if(delta>0){scale*=1.1;// 放大}else{scale*=0.9;// 缩小}// 限制缩放范围scale=Math.max(0.1,Math.min(scale,5.0));imageView.setScaleX(scale);imageView.setScaleY(scale);});// 鼠标拖拽平移finaldouble[]dragDelta=newdouble[2];imageView.setOnMousePressed(e->{dragDelta[0]=imageView.getTranslateX()-e.getSceneX();dragDelta[1]=imageView.getTranslateY()-e.getSceneY();});imageView.setOnMouseDragged(e->{imageView.setTranslateX(e.getSceneX()+dragDelta[0]);imageView.setTranslateY(e.getSceneY()+dragDelta[1]);});

六、总结