Skip to content

Latest commit

 

History

History
74 lines (44 loc) · 4.1 KB

图像.md

File metadata and controls

74 lines (44 loc) · 4.1 KB

图像

JavaFX 提供了 Image 和 ImageView 类来显示 BMP、GIF、JPEG 和 PNG 图形图像。Image 是一个保存图像字节和可选缩放信息的类。Image 对象由后台线程加载,Image 类提供了与加载操作交互的方法。Image 对象独立于 ImageView 来创建游标和应用图标。

ImageView 是一个 JavaFX 节点,它拥有一个 Image 对象。ImageView 使图像在整个框架中可用。ImageView 可以单独添加到容器中,也可以与其他UI控件一起添加。例如,可以通过设置标签的图形属性将图像添加到标签中。

Images can also be displayed and manipulated using JavaFX CSS.

这个截图显示了一个包含四个大小相等的tile的TilePane。每个平铺包含一个键盘的 ImageView。

imageapp_screenshot

左上角的图像使用原始图像尺寸 320x240 显示。右上方的图像按比例缩放。由于右上方的图像是一个矩形,而包含的 tile是一个正方形,因此在拉伸宽度时,顶部和底部都有间隙以保持正确的比例。

左下角的图像完全填充了容器。然而,在使矩形图像适合方形容器时,图像没有按比例缩放,而是在两个方向上拉伸。

右下角的图像使用该图像的放大版本填充容器。正方形视口是由 100x100 矩形 2d 创建的,并按比例缩放。虽然低质量图像是模糊的,但它没有变形。

图片

Image 类提供了从图像文件尺寸或从转换后的对象构建 Image 对象的构造函数。这三个构造函数调用分别创建右上方、左下方和右下方磁贴中使用的 Image 对象。

ImageApp.java

public class ImageApp extends Application {

    private final static String IMAGE_LOC = "images/keyboard.jpg";

    @Override
    public void start(Stage primaryStage) throws Exception {

        Image image2 = new Image(IMAGE_LOC, 360.0d, 360.0d, true, true );
        Image image3 = new Image(IMAGE_LOC, 360.0d, 360.0d, false, true);
        Image image4 = new Image(IMAGE_LOC);

传入所有形式的 Image 构造函数的 String URL 是相对于类路径的。也可以使用绝对 URL,如“https://www.bekwam.com/images/bekwam_logo_hdr_rounded.png”。注意,如果没有找到它们的资源,绝对url不会抛出错误。

Image2 和 image3 指定尺寸,形成一个比原始图像的矩形更大的正方形。Image2 将保留宽高比(“true”)。image3的构造函数不保留长宽比,并且看起来会被拉伸。

ImageView

ImageView 是一个 Node 容器,它允许在 JavaFX 容器和 UI 控件中使用 Image 对象。在左上角的图像中,使用了一个简短形式的 ImageView,它只传递图像 URL。它将遵循原始尺寸,不需要额外的 Image 对象。

ImageApp.java

		ImageView iv1 = new ImageView(IMAGE_LOC);

        ImageView iv2 = new ImageView(image2);
        ImageView iv3 = new ImageView(image3);
        ImageView iv4 = new ImageView(image4);

        iv4.setPreserveRatio(true);
        iv4.setFitHeight(360);
        iv4.setFitWidth(360);
        Rectangle2D viewportRect = new Rectangle2D(20, 50, 100, 100);
        iv4.setViewport(viewportRect);

Iv3 和 Iv3 基于 image2 和 image3 对象。回想一下,这些对象产生了适合方形容器的转换图像。

iv4 也是基于转换后的 Image 对象,但是在 iv4 的情况下,转换是通过 ImageView 对象而不是 Image 来完成的。ImageView。调用 setFitHeight 而不是 image。setFitHeight。

此外,调整了 iv4 的 Viewport。Viewport 控制着 ImageView 的可见部分。在这种情况下,Viewport 被定义为图像的100x100 部分,向左移动 20 像素,向上移动 50 像素。

本节演示了 Image 和 ImageView 类,它们用于在容器或其他UI控件中显示图像。这些类定义了图像的缩放行为,可以与Rectangle2D Viewport 一起使用,以提供额外的图像显示定制。

完整代码

完整的源代码和 Gradle 项目可以在下面的链接中找到。

ImageApp Source Zip