如何使用 javafx 和 fxml 中的 ImageView 组件显示图像?

How can I show an image using the ImageView component in javafx and fxml?(如何使用 javafx 和 fxml 中的 ImageView 组件显示图像?)

问题描述

我想这是一件非常简单的事情，但我无法理解它.我想要的只是在链接到 fxml 的 ImageView 上显示图像.这是我的代码:

I suppose it's a very simple thing but I just can't get behind it. All I want is to show an image over an ImageView linked to fxml. Here is my code:

package application;

import java.io.File;

import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.AnchorPane;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;


public class Main extends Application
{
    @FXML
    private ImageView imageView;

    @Override
    public void start(Stage primaryStage) 
    {
        try 
        {
        AnchorPane root = (AnchorPane)FXMLLoader.load(getClass().getResource("Sample.fxml"));
        Scene scene = new Scene(root,400,400);
        scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
        primaryStage.setTitle("Hello World");

        File file = new File("src/Box13.jpg");
        Image image = new Image(file.toURI().toString());
        imageView = new ImageView(image);

        //root.getChildren().add(imageView);
        primaryStage.setScene(scene);
        primaryStage.show();
    } catch(Exception e) {
        e.printStackTrace();
    }
}

public static void main(String[] args) {
    launch(args);
}
}

还有我的 fxml 文件

And my fxml file

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane prefHeight="316.0" prefWidth="321.0" xmlns:fx="http://javafx.com/fxml/1"     xmlns="http://javafx.com/javafx/2.2" fx:controller="application.SampleController">
  <children>
    <ImageView fx:id="imageView" fitHeight="150.0" fitWidth="200.0" layoutX="61.0" layoutY="83.0" pickOnBounds="true" preserveRatio="true" >

    </ImageView>
  </children>
</AnchorPane>

文件链接应该没有问题，因为当我包含注释掉的行时它可以正常工作.这将是它仅在 java 中完成的方式，但我想在这里使用 fxml，因为我将 fxml 用于所有其他组件，但它对 ImageView 不起作用，我不知道为什么.我还尝试创建一个新的控制器类并将 ImageView 链接到那里，但都不起作用.谁能帮帮我?

There should be no problem with the file linking as it works fine when I include the outcommented line. This would be the way it's done in java only but I want to use fxml here as I am using fxml for all other components but it just doesn't work for the ImageView and I don't know why. I have also tried to create a new controller class and link the ImageView there but that neither works. Can anyone help me?

谢谢

推荐答案

如果你想使用 FXML，你应该分离控制器(就像你对 SampleController 所做的那样).那么你的 FXML 中的 fx:controller 应该指向那个.

If you want to use FXML, you should separate the controller (like you were doing with the SampleController). Then your fx:controller in your FXML should point to that.

您的控制器中可能缺少 initialize 方法，该方法是 Initializable 接口的一部分.这个方法是在FXML加载完成后调用的，所以我推荐你把你的图片设置在那里.

Probably you are missing the initialize method in your controller, which is part of the Initializable interface. This method is called after the FXML is loaded, so I recommend you to set your image there.

您的 SampleController 类必须是这样的:

Your SampleController class must be something like this:

public class SampleController implements Initializable {

    @FXML
    private ImageView imageView;

    @Override
    public void initialize(URL location, ResourceBundle resources) {
        File file = new File("src/Box13.jpg");
        Image image = new Image(file.toURI().toString());
        imageView.setImage(image);
    }
}

我在这里测试过，它工作正常.

I tested here and it's working.

这篇关于如何使用 javafx 和 fxml 中的 ImageView 组件显示图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！