如何在鼠标单击上更改Imageview的图像

Posted 2021-03-28

我正在使用场景构建器在javafx中创建一个应用程序。我有一个imageview，我想在有人点击它时更改图像。我已经在图像视图中添加了一个鼠标事件，但是当我点击它时它不会改变图像。请在下面找到相同的代码。

 public class HomeScreenController implements Initializable {
        @FXML
        public ImageView updateproject;
            public String updateprojectstyle="-fx-image:url("../../../../Images/update-enable.png");";
        }
        @FXML
        private void updateProject(MouseEvent event) throws IOException
        {
            System.out.println("hello");
            updateproject.setStyle(updateprojectstyle);
        }
        @Override
        public void initialize(URL location, ResourceBundle resources) {
             //To change body of generated methods, choose Tools | Templates.
        }
    }

更新的问题（MCVE）

我的FXML看起来像：

 <VBox prefHeight="658.0" prefWidth="162.0" styleClass="sidepanel" BorderPane.alignment="CENTER">
               <children>
                  <Pane maxHeight="138.0" maxWidth="162.0" prefHeight="200.0" prefWidth="200.0">
                     <children>
                        <ImageView fx:id="addproject" fitHeight="60.0" fitWidth="66.0" layoutX="48.0" layoutY="39.0" pickOnBounds="true" preserveRatio="true" styleClass="addproject-img" />
                     </children>
                  </Pane>
                  <Pane maxHeight="138.0" maxWidth="162.0" prefHeight="200.0" prefWidth="200.0">
                     <children>
                        <ImageView fx:id="updateproject" fitHeight="57.0" fitWidth="84.0" layoutX="41.0" layoutY="32.0" onMouseClicked="#updateProject" pickOnBounds="true" preserveRatio="true" styleClass="updateproject-img" />
                     </children>
                  </Pane>
                  <Pane layoutX="10.0" layoutY="148.0" maxHeight="138.0" maxWidth="162.0" prefHeight="200.0" prefWidth="200.0">
                     <children>
                        <ImageView fx:id="deleteproject" fitHeight="59.0" fitWidth="80.0" layoutX="41.0" layoutY="32.0" pickOnBounds="true" preserveRatio="true" styleClass="deleteproject-img" />
                     </children>
                  </Pane>
               </children>
     </VBox>

我的控制器看起来像：

public class HomeScreenController implements Initializable {
    @FXML
    public ImageView updateproject;
     @FXML
    public ImageView addproject;
      @FXML
    public ImageView deleteproject;
     public String updateprojectstyle="-fx-image:url("../../../../Images/update-enable.png");";
    public String addprojectstyle="-fx-image:url("../../../../Images/add-disable.png");";
 @FXML
    private void updateProject(MouseEvent event) throws IOException
{
    System.out.println("hello");
    updateproject.setStyle(updateprojectstyle);
     addproject.setStyle(addprojectstyle);
}
    @Override
    public void initialize(URL location, ResourceBundle resources) {
         //To change body of generated methods, choose Tools | Templates.
    }

}

我的CSS看起来像：

.updateproject-img{
   -fx-image:url("../../../../Images/update-disable1.png");
}
.addproject-img{
     -fx-image:url("../../../../Images/add-active.png");
}
.deleteproject-img{
    -fx-image:url("../../../../Images/delete-disable1.png");
}

我想禁用添加项目图标，并在用户单击更新项目图像视图时启用更新项目图标。 click事件正在触发，但它没有加载图像。

答案

这是一个在ImageView上使用css样式的代码。

ImageView上的图像是通过-fx-image:url(...)设置的，而不是通过-fx-background-image:url(...)设置的，正如您在代码中使用的那样。

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


public class ChangeImageViewImage extends Application {


    private static final String IMAGE1 = "http://img1.wikia.nocookie.net/__cb20130120032553/dragonball/images/3/32/Chibi-Ichigo-bleach-anime-33253004-332-400.png";
    private static final String IMAGE2 = "https://40.media.tumblr.com/68f246eef26984be8a44e4367cfedd47/tumblr_n3lsszuyj41txcp2ko1_500.jpg";

    @Override
    public void start(Stage primaryStage) throws Exception {
        ImageView imageView = new ImageView();
        imageView.setFitHeight(400);
        imageView.setFitWidth(300);
        imageView.setStyle("-fx-image: url(""+ IMAGE1 + "");");

        imageView.setOnMouseClicked(event -> {
            imageView.setStyle("-fx-image: url(""+ IMAGE2 + "");");
        });

        Pane pane = new Pane();
        pane.getChildren().add(imageView);

        Scene scene = new Scene(pane, 300, 400);
        primaryStage.setScene(scene);
        primaryStage.show();

    }

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