如何使用javafx和fxml中的ImageView組件顯示圖像？

Question

我想這是一件非常簡單的事情，但我無法追上它。 我想要的只是通過ImageView鏈接到fxml來顯示圖像。 這裏是我的代碼：

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文件

<?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> 

應該有與文件鏈接，因爲它工作得很好，當我包括outcommented線沒有問題。這只是它在java中完成的方式，但是我想在這裏使用fxml，因爲我對所有其他組件使用fxml，但它不適用於ImageView，我不知道爲什麼。我也嘗試創建一個新的控制器類，並將ImageView鏈接到那裏，但這兩者都不起作用。誰能幫我？

感謝

Answer 1

如果你想使用FXML，你應該分開控制器（比如你用SampleController做）。那麼你的FXML中的fx:controller應該指向那個。

您的控制器中可能缺少initialize方法，該方法是Initializable界面的一部分。這個方法在FXML加載後調用，所以我建議你在那裏設置你的圖像。

你SampleController類必須是這樣的：

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); 
    } 
} 

我這裏測試，它的工作。

Answer 2

除非每次動態加載不同的圖像，否則不需要初始化程序。我認爲在fxml中儘可能多地組織起來。這是一個fxml文件，可以完成你所需要的功能。

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

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

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

在Image標籤中指定backgroundLoading屬性是可選的，它默認爲false。加載圖像需要一些時間或更長時間才能將backgroundLoading設置爲true，這樣一個佔位符將被使用，直到圖像加載，並且程序在加載時不會凍結。

Answer 3

@FXML 
ImageView image; 

@Override 
public void initialize(URL url, ResourceBundle rb) { 
    image.setImage(new Image ("/about.jpg")); 
} 

Answer 4

請在下面的示例中使用JavaFX加載圖像。

import javafx.application.Application; 
    import javafx.scene.Scene; 
    import javafx.scene.image.Image; 
    import javafx.scene.image.ImageView; 
    import javafx.scene.layout.StackPane; 
    import javafx.stage.Stage; 

    public class LoadImage extends Application { 

    public static void main(String[] args) { 
    Application.launch(args); 
    } 
    @Override 
    public void start(Stage primaryStage) { 
    primaryStage.setTitle("Load Image"); 

    StackPane sp = new StackPane(); 
    Image img = new Image("javafx.jpg"); 
    ImageView imgView = new ImageView(img); 
    sp.getChildren().add(imgView); 

    //Adding HBox to the scene 
    Scene scene = new Scene(sp); 
    primaryStage.setScene(scene); 
    primaryStage.show(); 
    } 

    } 

在項目中創建名爲圖片源文件夾和你的圖像添加到該文件夾​​，否則你可以直接從外部URL加載圖像像以下。

圖片img = new圖片（「http://mikecann.co.uk/wp-content/uploads/2009/12/javafx_logo_color_1.jpg」）;

Answer 5

我們建議把圖像的資源，比你可以使用它像這樣：

imageView = new ImageView("/gui.img/img.jpg");