JavaFX css border-radius问题

Question

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

border-radius: 50%;

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

我使用-fx-background-image:url(...)将图片设置为背景，然后我想将其制作成圆圈。

我怎样才能做到这一点？

更新

所以我看到我并没有太具体，所以让我试着详细说明：

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

main.fxml：

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

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

的main.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 border-radius: 50%应该创建一个椭圆边框，JavaFX CSS 支持%或-fx-border-radius的简写{1}}。但是，要获得所需效果，请使用-fx-background-radius为图像创建椭圆遮罩，如下所示。

Path.subtract()

Answer 2

仅使用CSS无法做到这一点，因为ImageView不支持任何Region的CSS属性。

但是，Ellipse可以使用ImageView作为clip：

@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();
}

我知道让图片覆盖文字并不好看。这仅用于演示目的。

Answer 3

在一行中Circle为Clip.You可以使用setClip（任何形状）。：

imageView.setClip(new Circle(width,height,radius);

width,height,radius必须小于ImageView大小才能工作。

受GuiGarage web site的启发。