【问题标题】：JavaFX css border-radius issueJavaFX css边界半径问题
【发布时间】：2016-10-26 13:01:39
【问题描述】：

我正在尝试模拟从这个 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;
}

我得到的效果：

我想要的效果：

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

【问题讨论】：

你能再解释一下吗？ border-radius: 50%; 是做什么的？您有可以嵌入问题的示例图像吗？您是否只想创建一个裁剪为圆形的背景图像（使用 JavaFX CSS）？您是要更改显示背景图像的整个区域的形状，还是保留圆形背景的方形区域？
How to make a javafx button with circle shape of 3xp diameter?的可能重复
@OJKrylow：不，ImageView 不像 Button 那样是 Region...

标签： css javafx javafx-8

【解决方案1】：

看起来 CSS border-radius: 50% 应该创建一个椭圆边框，并且 JavaFX CSS 确实支持 % 简写 -fx-border-radius 或 -fx-background-radius。但是，要获得所需的效果，请使用Path.subtract() 为图像创建一个椭圆形遮罩，如下所示。

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Ellipse;
import javafx.scene.shape.Path;
import javafx.scene.shape.Rectangle;
import javafx.scene.shape.Shape;
import javafx.stage.Stage;

/**
 * @see http://stackoverflow.com/a/38008678/230513
 */
public class Test extends Application {

    private final Image IMAGE = new Image("http://i.imgur.com/kxXhIH1.jpg");

    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Test");
        int w = (int) (IMAGE.getWidth());
        int h = (int) (IMAGE.getHeight());
        ImageView view = new ImageView(IMAGE);
        Rectangle r = new Rectangle(w, h);
        Ellipse e = new Ellipse(w / 2, h / 2, w / 2, h / 2);
        Shape matte = Path.subtract(r, e);
        matte.setFill(Color.SIENNA);
        StackPane root = new StackPane();
        root.getChildren().addAll(view, matte);
        Scene scene = new Scene(root);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

在一行中以Circle 为剪辑。您可以使用 setClip(任何形状)。：

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

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

灵感来自GuiGarage web site。

【讨论】：