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

问题描述:

我想这是一件非常简单的事情,但我无法追上它。 我想要的只是通过ImageView链接到fxml来显示图像。 这里是我的代码:如何使用javafx和fxml中的ImageView组件显示图像?

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链接到那里,但这两者都不起作用。谁能帮我?

感谢

如果你想使用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); 
    } 
} 

我这里测试,它的工作。

除非每次动态加载不同的图像,否则不需要初始化程序。我认为在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,这样一个占位符将被使用,直到图像加载,并且程序在加载时不会冻结。

@FXML 
ImageView image; 

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

请在下面的示例中使用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”);

我们建议把图像的资源,比你可以使用它像这样:

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