JavaFX | IntelliJ 理念| ImageView 不显示在 SceneBuilder 中显示的图像，它是预览

Question

我是 JavaFX 的新手，所以我不明白出了什么问题。我已在 SceneBuilder 中将图像添加到 ImageViews。在 SceneBuilder 和它的预览中，我们可以看到它们。但是当我运行我的应用程序时，只显示空窗口（视觉上，画布大小不同）

Main.java：

package application;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception{
        Parent root = FXMLLoader.load(getClass().getResource("MainMenu.fxml"));
        primaryStage.setTitle("MainMenu");
        primaryStage.setScene(new Scene(root));
        primaryStage.show();
    }


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

MainMenu.fxml：

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

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

<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="720.0" prefWidth="1280.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.MainMenuController">
    <children>
        <ImageView fx:id="background" fitHeight="720.0" fitWidth="1280.0" pickOnBounds="true" preserveRatio="true">
         <image>
            <Image url="@../../assets/mainMenuScreen/background.png" />
         </image></ImageView>
    </children>
</AnchorPane>

在 Eclipse 中尝试过 - 它应该可以正常工作

项目结构

SceneBuilder View

Running View

附：我可以使用getClass().getClassLoader().getResource() 设置图像，但画布大小仍然比设置的大。并且路径与 SceneBuilder 中使用的路径相同

Answer 1

这是因为路径。我不知道如何从 fxml 做到这一点（我试过）。 只需从代码中完成

1) 为您的 ImageView 初始化 fx:id，例如 fx:id="imView"

2) 在代码中初始化它并设置图像。 （在 src 中创建文件夹“资源”）

@FXML
private ImageView imView;

@FXML
public void initialize(){
    imView.setImage(
            new Image("resources/yourImage.jpg")
    );
}

如果您还希望图像始终适合窗口大小，则应为其添加侦听器：

想象一下你的 ImageView 在 AnchorPane 中

@FXML
private AnchorPane root;

@FXML
private ImageView imView;

@FXML
public void initialize(){
    imView.setImage(
            new Image("ims/Weissmanscore.jpg")
    );
    root.heightProperty().addListener(
            h -> imView.setFitHeight(
                    root.getHeight()
            )
    );
    root.widthProperty().addListener(
            h -> imView.setFitWidth(
                    root.getWidth()
            )
    );
}

如果您不希望您的图像不保持比例并使用窗口精确调整大小，只需在代码 imView.setPreserveRatio(false); 的 FXML preserveRatio="true" 中将 preserveRatio 设置为 false