JafaFX径向梯度

Question

我想用JavaFX重现以下屏幕，并尝试了以下（剥离）代码：

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是一个矩形，渐变是椭圆形的。据我所知留档一个圆形渐变是不可能的？
• 原始图片的渐变不是线性的而是有一些圆圈（中间是一个明亮的圆圈，外面是一个中等的圆圈）。我试着玩，并添加百分比停止颜色，但当我这样做（例如。rgb（97,156,188) 30%，rgb（22,51,93））我得到了一个更明亮的椭圆可视化，我不明白。渐变的开始总是应该更亮，我不知道为什么：

谁能解释一下这里发生了什么事？

Answer 1

从要复制的屏幕截图下载（800x600像素）图像，并使用颜色选择器，我得到以下（十进制r、g、b）值，从中心（400300）到左边缘（0300）：

• （400300）：（104163193）

这看起来足够接近线性（可能有一些模糊性和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应用于节点的最慢的方式，在这里，您将在节点维度的每一个小更改上更改内联样式。然而，它似乎在我的系统上工作得很好；请注意，将渐变应用于同一视图中的多个节点可能不是一个好方法。