在JavaFX和Scenebuilder中创建新的ImageView

Question

我打算再试一次。。。我是Scenebuilder的新手，我正在尝试为我的项目创建一个照片库！我已经添加了我想要的，那就是一个图像视图，其中的图像是从FileChooser中选择的。。。但是现在我想得到一个建议，如何保存这个，并在每次按下addPhoto按钮时创建一个新的，而不是覆盖我在ImageView中已经有的。以下是我的addPhoto按钮代码：

@FXML

public void initialize(ActionEvent e) throws Exception{


        addPhotos.setOnAction(event -> {
            FileChooser chooser = new FileChooser();
            File file = chooser.showOpenDialog(null);
           pic = new Image(file.toURI().toString());
           if(pic != null) {
             ImageView  imgView = new ImageView(pic);

           }

             imgView.setImage(pic);

    });

FXML代码：

    <BorderPane prefHeight="737.0" prefWidth="934.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="legioDesk.GalleryController">
   <top>
      <Button fx:id="addPhotos" mnemonicParsing="false" onAction="#initialize" text="addPhotos" BorderPane.alignment="CENTER" />
   </top>
   <center>
      <TilePane fx:id="tp" prefHeight="200.0" prefWidth="200.0" BorderPane.alignment="CENTER">
         <children>
            <ImageView fx:id="imgView" fitHeight="306.0" fitWidth="378.0" pickOnBounds="true" preserveRatio="true" />
         </children>
      </TilePane>
   </center>
</BorderPane>

Answer 1

好吧，既然你说单一图像版本有效，现在你想添加一个新图像。抓住你的TilePane，得到孩子，然后添加你的图像视图。

pic = new Image(file.toURI().toString());
if(pic != null) {
    ImageView  nextView = new ImageView(pic);
    tp.getChildren().add(nextView);
}
//delete this it is changing the original one.
//imgView.setImage(pic);

这可能可行，但我无法测试它，因为您没有提供足够的代码。

Answer 2

您在事件处理程序中创建了一个新的图像视图，但您从未对其进行任何操作，因此它被丢弃。

请注意，两个ImageView都有相同的变量名：您创建（和放弃）的变量名的作用域是if块，因此您在块外引用的变量名是您在FXML文件中定义的变量名。

所以你的代码可以

@FXML

public void initialize(ActionEvent e) throws Exception{


    addPhotos.setOnAction(event -> {
        FileChooser chooser = new FileChooser();
        File file = chooser.showOpenDialog(null);
        pic = new Image(file.toURI().toString());
        if(pic != null) {
           // Create a new image view, containing the selected image
           // (but do nothing with it)
           ImageView  imgView = new ImageView(pic);

        }
        // now update the existing ImageView (from the FXML file) with
        // the chosen image:
        imgView.setImage(pic);

    });
}

您想要做的（我猜，因为您没有非常清楚地解释所需的行为）是将新的图像视图添加到磁贴窗格中：

@FXML

public void initialize(ActionEvent e) throws Exception{


    addPhotos.setOnAction(event -> {
        FileChooser chooser = new FileChooser();
        File file = chooser.showOpenDialog(null);
        pic = new Image(file.toURI().toString());
        if(pic != null) {
           ImageView  imgView = new ImageView(pic);
           imgView.setFitWidth(306);
           imgView.setFitHeight(378);
           imgView.setPreserveRatio(true);
           tp.getChildren().add(imgView);
        }
    });
}

当然，您不需要FXML文件中的图像视图：

<BorderPane prefHeight="737.0" prefWidth="934.0" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="legioDesk.GalleryController">
   <top>
      <Button fx:id="addPhotos" mnemonicParsing="false" onAction="#initialize" text="addPhotos" BorderPane.alignment="CENTER" />
   </top>
   <center>
      <TilePane fx:id="tp" prefHeight="200.0" prefWidth="200.0" BorderPane.alignment="CENTER">
      </TilePane>
   </center>
</BorderPane>