JavaFX图片浏览并实现缩放

1、效果展示

效果展示：

样式图片：

2、代码


import com.tobiasy.applet.pdf.utils.FileUtils;
import com.tobiasy.applet.pdf.utils.ResourceUtils;
import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.ScrollPane;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;import java.io.File;
import java.io.FileInputStream;public class ImagesViewer extends Application {public static void main(String[] args) {launch(args);}public ImagesViewer() {}public ImagesViewer(String title, String url) {this.title = title;this.url = url;}private static double size = 1;private static double count = 1.0;@Overridepublic void start(Stage primary) {AnchorPane root = new AnchorPane();ScrollPane scrollPane = new ScrollPane();scrollPane.setStyle("-fx-border-color: #ffffff;-fx-background-color: #ffffff;");root.getChildren().add(scrollPane);Image image = new Image(url);double width = image.getWidth();double height = image.getHeight();double percent = 1000 / image.getWidth() < 600 / image.getHeight() ? 1000 / image.getWidth() : 600 / image.getHeight();if (percent < 1) {width = width * percent;height = height * percent;}VBox vBox = new VBox();vBox.setPrefWidth(1000);vBox.setPrefHeight(600);vBox.setAlignment(Pos.CENTER);scrollPane.setContent(vBox);ImageView imageView = new ImageView();imageView.setImage(image);imageView.setFitWidth(width);imageView.setFitHeight(height);vBox.getChildren().add(imageView);size = 1;count = 1;imageView.setOnScroll(event -> {if (event.getDeltaY() > 0) {count = count + 1.0 / 10;size = 1.0 / 200 * (count - 1) * (count - 1) * (count - 1) + 1;imageView.setFitWidth(imageView.getFitWidth() * size);imageView.setFitHeight(imageView.getFitHeight() * size);count++;} else {count = count - 1.0 / 10;double y = 1.0 / 200 * (count - 1) * (count - 1) * (count - 1) + 1;size = y < 0 ? size : y;imageView.setFitWidth(imageView.getFitWidth() / size);imageView.setFitHeight(imageView.getFitHeight() / size);count--;}});Scene scene = new Scene(root);primary.setTitle(title);// 设置软件头部icon
//        File iconFile = ResourceUtils.getIconFile();
//        FileInputStream inputStream = FileUtils.getFileInputStream(iconFile);
//        primary.getIcons().add(new Image(inputStream));primary.setScene(scene);primary.setWidth(1000);primary.setHeight(700);primary.show();}private String title = "图片浏览器";private String url = "https://img.zcool.cn/community/015ede57b04f050000018c1b1409b4.JPG?x-oss-process=image/auto-orient,1";
}

3、核心代码讲解

3.1 图片缩放核心代码

        count = count - 1.0 / 10;double y = 1.0 / 200 * (count - 1) * (count - 1) * (count - 1) + 1;size = y < 0 ? size : y;imageView.setFitWidth(imageView.getFitWidth() / size);imageView.setFitHeight(imageView.getFitHeight() / size);count--;

这是图片缩小核心代码，由第一行可以看出，每次宽度缩小1/10个像素，其次第二行中看到一个三次函数，这是用来降低平滑度的，这里我们先说一下为什么要用它，如果宽度每次缩小1/10，当宽度很小时，图片缩小程度会越来越慢，因此我不想让它按照正比进行缩放，而是想让它随着图片的缩小而越来越快，但是这里的越来越快我们也可以根据需求设置相应的速度，于是我们大概知道了这个函数的图像：

横轴代表代码中的count（图片宽度）, 纵轴代表size（放大倍数），由图像可知，当图片宽度被缩小（小于1方向）时，缩得越小，其斜率越大，换言之也就是缩小的越快，同样的道理，放大也是一样的，这样我们就能够顺利解决上面我们碰到的问题了。

3.2 设置软件头部icon

        File iconFile = ResourceUtils.getIconFile();FileInputStream inputStream = FileUtils.getFileInputStream(iconFile);primary.getIcons().add(new Image(inputStream));

首先我们或得到一个File对象，再通过File对象获取到其输入流，再通过输入流创建一个Image对象，最后将Image对象添加到Stage对象中去就好啦。

3.3 计算图片宽高比例

        double width = image.getWidth();double height = image.getHeight();double percent = 1000 / image.getWidth() < 600 / image.getHeight() ? 1000 / image.getWidth() : 600 / image.getHeight();if (percent < 1) {width = width * percent;height = height * percent;}

第三行的计算其实我们就是想得到一个最比例，这个比例刚好将图片放置在1000*600的容器里面，这里为什么要这样做的目的就是为了既适应长>宽的也要适应宽>长的图片，总而言之就是将长大于1000的或者宽大于600的图片进行缩放显示。

3.4 鼠标滚动事件

上面我们说过图片缩放，这里究竟是通过什么操作来实现的呢，其实就是滚动鼠标来实现的，那我们来看看滚动事件触发的函数：

        imageView.setOnScroll(event -> {// 缩放具体逻辑if (event.getDeltaY() > 0) {// 这里是向上滚动滚轮（即放大图片）} else {// 这里是乡下滚动滚轮（即缩小图片）}}

代码已经贴出来了，并且已经加上具体的事件处理了，内部嵌入核心的缩放图片逻辑就好啦。

核心代码除此之外就是其他比较简单的javafx语法了，如果有想继续学习javafx的，请持续关注我的文章，谢谢大家。

赶紧复制代码试试看吧