css - JavaFX css 边界半径问题

Question

我正在尝试模拟从这个 CSS 示例中获得的效果:

border-radius: 50%;

通过搜索 API 和阅读包括本论坛在内的论坛帖子，我发现我应该使用 -fx-background-radius。然而，这并没有给我想要的效果。

我使用 -fx-background-image:url(...) 设置一张图片作为背景，然后我想把它做成一个圆圈。

我怎样才能做到这一点？

更新

所以我发现我并不太具体，所以让我尝试详细说明:

我创建了一个 Pane 对象，它确实从 JavaFX 扩展了 Region 类。

ma​​in.fxml:

...
<Pane styleClass="wrapper">
    <Pane layoutX="34.0" layoutY="28.0" styleClass="image" />
</Pane>

对于此 Pane ，我创建了样式类 image，如上所示。

ma​​in.css:

.list-contact .image {
  -fx-alignment:left;
  -fx-pref-height:40px;
  -fx-pref-width:40px;
  -fx-background-radius:50%;
  -fx-background-image:url(...);
  -fx-background-repeat:no-repeat;
}

我得到的效果:

我想要的效果:

我希望这能更好地解释它。

Answer 1

单靠 CSS 是不可能的，因为 ImageView不支持任何 Region 的 CSS 属性。

但是您可以使用 Ellipse 作为 clip对于 ImageView:

@Override
public void start(Stage primaryStage) throws MalformedURLException {
    Image img = new Image("https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Space_Needle_2011-07-04.jpg/304px-Space_Needle_2011-07-04.jpg");
    ImageView iv = new ImageView(img);
    Ellipse ellipse = new Ellipse(img.getWidth() / 2, img.getHeight() / 2, img.getWidth() / 2, img.getHeight() / 2);
    iv.setClip(ellipse);

    Text text = new Text("Space Needle, Seattle, Washington, USA");
    StackPane.setAlignment(text, Pos.TOP_CENTER);

    StackPane root = new StackPane(text, iv);

    Scene scene = new Scene(root, img.getWidth(), img.getHeight());
    scene.setFill(Color.AQUAMARINE);

    primaryStage.setScene(scene);
    primaryStage.show();
}

我知道让图片盖住文字不好看。这样做只是为了演示。