JavaFX 径向渐变

Question

我想用 JavaFX 重现以下 screen 并尝试了这个（剥离的）代码：

public class Main extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception{
        primaryStage.setTitle("Hello World");
        primaryStage.setFullScreen(true);
        primaryStage.setFullScreenExitHint("");

        AnchorPane root = new AnchorPane();
        root.setStyle("-fx-background-color: " +
                "rgb(15,37,74), " +
                "radial-gradient(center 50% 50%, radius 65%, rgb(97,156,188) 10%, rgb(22,51,93));");
        Scene scene = new Scene(root, 600, 400);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

但是我在重现原图时遇到了以下问题：

我无法生成圆形渐变，因为 AnchorPane 是一个矩形，渐变是椭圆形的。据我了解 documentation 圆形渐变是不可能的？
原图的渐变不是直线而是有一些圆圈（中间是亮圈，外面是中圈）。我试着玩弄并为停止颜色添加百分比，但是当我这样做时（例如 rgb(97,156,188) 30%, rgb(22,51,93)），我得到了一个我不理解的更明亮的椭圆可视化。渐变的开始总是更亮，我不知道为什么:

谁能给我解释一下这是怎么回事？

Answer 1

从您要复制的屏幕截图下载（800x600 像素）图像，并使用颜色选择器，我得到以下（十进制 r、g、b）值，从中心（400、300 ) 到左边缘 (0, 300):

(400, 300): (104, 163, 193)
(300, 300): (87, 145, 182)
(200, 300): (60, 113, 163)
(100, 300): (38, 85, 137)
(0, 300): (23, 56, 99)

对我来说这看起来足够接近线性（可能有一些一般的模糊性和 jpeg 压缩会稍微改变值）。

所以这似乎是一个很好的近似值：

    root.setStyle("-fx-background-color: radial-gradient(center 50% 50%, radius 50%, rgb(104, 163, 193) 0%, rgb(23, 56, 99) 100%);");

我看不到使用百分比使其循环的方法：您必须使用实际长度。如果大小可能会发生变化，那么您当然需要对此做出回应；您可以使用如下绑定来执行此操作：

    root.styleProperty().bind(Bindings.createStringBinding(() -> 
        String.format("-fx-background-color: radial-gradient(center %dpx %dpx, radius %dpx, rgb(104, 163, 193) 0%%, rgb(23, 56, 99) 100%%);",
                (int) (root.getWidth()/2), (int) (root.getHeight()/2), (int)(Math.max(root.getWidth(), root.getHeight())/2)), 
                root.widthProperty(), root.heightProperty()));

请注意，这不是执行此操作的高性能方法；内联样式通常是将 CSS 应用于节点的最慢方式，在这里您要在节点维度的每个小变化上更改内联样式。但是，它似乎在我的系统上运行良好；请注意，将渐变应用于同一视图中的多个节点可能不是一个好方法。

JavaFX 径向渐变

JafaFX radial gradient

css

javafx