为什么是“-fx-background-radius: 10;”不工作？

Question

我正在使用场景生成器来设计我的程序。我想添加背景图片，所以我使用了css 文件来添加它。一切工作正常，但是当我尝试向css 文件添加半径时，它不会改变任何事情。所以我尝试添加边框和边框半径，效果很好。我不知道为什么-fx-background-radius:10; 不起作用。

这是我的 CSS 代码：

.signUp{
    -fx-background-image: url('bg.jpg');
    -fx-background-size: cover;
    -fx-background-radius:10;
    -fx-border-width:5;
    -fx-border-color: "white";
    -fx-border-radius: 10;
}

我还尝试在场景构建器上添加背景半径，但是当我已经添加样式表时它不会改变。但是当我删除样式表并添加背景半径时，它就可以工作了。有人知道为什么会这样吗？

Answer 1

好的，基于来自@Alex 和@James_D 的 cmets，现在很明显您无法控制背景图像的半径。但是，如果您非常热衷于获得所需的行为（使背景图像弯曲边缘），您可以将形状设置为节点以模仿，就像在背景图像上应用背景半径一样。

您可以根据所需的半径构建动态形状路径并将样式应用于节点。

请查看以下演示代码。如果你有固定大小的节点，你可以直接调用updateShape方法，如果节点大小发生变化，你可以在宽度/高度监听器上调用它。另请查看图片以快速预览形状路径的构建方式。

[更新：] 根据@Slaw 的 cmets，包括一个更简单的替代方法，将 Rectangle 设置为形状并更新其尺寸。

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

public class BackgroundImageRadiusDemo extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception {
        double radius = 20;
        StackPane signUp = new StackPane();
        signUp.getStyleClass().add("signUp"); // In the .css file it sets -fx-background-

        // APPROACH #1 : Using Rectangle as shape
        Rectangle r = new Rectangle(30, 30);
        r.setArcHeight(radius);
        r.setArcWidth(radius);
        signUp.setShape(r);
        signUp.widthProperty().addListener(p -> r.setWidth(signUp.getWidth()));
        signUp.heightProperty().addListener(p -> r.setHeight(signUp.getHeight()));

        // APPROACH #2 : Using SVG path as shape
        //   signUp.widthProperty().addListener(p -> updateShape(signUp));
        //   signUp.heightProperty().addListener(p -> updateShape(signUp));

        StackPane root = new StackPane(signUp);
        root.setPadding(new Insets(10));
        Scene scene = new Scene(root, 300, 250);
        scene.getStylesheets().add(this.getClass().getResource("cssFile.css").toExternalForm());
        primaryStage.setTitle("BackgroundImage Radius");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    private void updateShape(StackPane signUp) {
        double r = 20; // BACKGROUND IMAGE RADIUS
        double w = signUp.getWidth();
        double h = signUp.getHeight();
        String s = "-fx-shape:\"M " + r + " 0 " +  //p1
                " L " + (w - r) + " " + "0" + //p2
                " Q " + w + " 0 " + w + " " + r + // p3,p4
                " L " + w + " " + (h - r) + //p5
                " Q " + w + " " + h + " " + (w - r) + " " + h + //p6,p7
                " L " + r + " " + h + //p8
                " Q 0 " + h + " 0 " + (h - r) + //p9,p10
                " L 0 " + r + //p11
                " Q 0 0 " + r + " 0 Z\";"; //p0,p1
        System.out.println(s);
        signUp.setStyle(s);
    }
}