JavaFX的。当我点击imageview时，如何制作imageview的边框？

Question

在javaFX中，我想创建一个可以在单击时更改边框的imageview。 单击一次，然后imageview有一个边框。 再次点击时，imageview没有边框。

我该怎么做？ 提前谢谢！

Answer 1

你需要：

1. 用于切换CSS状态的PseudoClass
2. 包裹Region，因为ImageView本身既不支持背景也不支持边框。

---

一个简单的工作示例（PseudoClass的切换是在BooleanProperty的帮助下完成的，这是常见做法，可以更轻松地管理其状态：

@Override
public void start(Stage primaryStage) {

    PseudoClass imageViewBorder = PseudoClass.getPseudoClass("border");

    ImageView imageview = new ImageView(
            new Image("http://upload.wikimedia.org/wikipedia/commons/1/16/Appearance_of_sky_for_weather_forecast,_Dhaka,_Bangladesh.JPG"));

    BorderPane imageViewWrapper = new BorderPane(imageview);
    imageViewWrapper.getStyleClass().add("image-view-wrapper");

    BooleanProperty imageViewBorderActive = new SimpleBooleanProperty() {
        @Override
        protected void invalidated() {
            imageViewWrapper.pseudoClassStateChanged(imageViewBorder, get());
        }
    };

    imageview.setOnMouseClicked(ev -> imageViewBorderActive
            .set(!imageViewBorderActive.get()));

    BorderPane root = new BorderPane(imageViewWrapper);
    root.setPadding(new Insets(15));

    Scene scene = new Scene(root, 700, 400);
    scene.getStylesheets().add(
            getClass().getResource("application.css").toExternalForm());
    primaryStage.setScene(scene);
    primaryStage.show();
}

和必要的CSS：

.image-view-wrapper:border {
    -fx-border-color: black;
    -fx-border-style: solid;
    -fx-border-width: 5;
}