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

时间:2014-03-28 10:22:30

标签: java imageview fxml

我认为这是一件非常简单的事情,但我无法支持它。 我想要的只是在链接到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链接到那里,但这两者都不起作用。任何人都可以帮助我吗?

由于

7 个答案:

答案 0 :(得分:14)

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

我在这里测试了它的工作原理。

答案 1 :(得分:13)

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

答案 2 :(得分:1)

@FXML
ImageView image;

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

答案 3 :(得分:1)

图片imProfile =新图片(getClass()。getResourceAsStream(“ / img / profile128.png”)))

ImageView profileImage = new ImageView(imProfile);

在javafx专家中:

enter image description here

答案 4 :(得分:0)

请在下面找到使用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();
    }

  }

在项目中创建一个名为Image的源文件夹,并将图像添加到该文件夹​​,否则您可以直接从外部URL加载图像,如下所示。

图片img =新图片(“http://mikecann.co.uk/wp-content/uploads/2009/12/javafx_logo_color_1.jpg”);

答案 5 :(得分:0)

建议将图像放到资源上,而不是像这样使用它:

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

答案 6 :(得分:0)

src / sample / images / shopp.png

this.regularDate