JafaFX radial gradient | 易学教程

问题

I would like to reproduce the following screen with JavaFX and tried this (stripped) code:

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

However I have the following problems to reproduce the original picture:

I am not able to generate a circular gradient, since the AnchorPane is a rectangle, the gradient is elliptic. As far I understand the documentation a circular gradient is not possible?
The gradient of the original picture is not a linear but has some circles (a bright circle in the middle and a medium circle outside). I tried to play around and was adding percentage to the stop colors, but when I do (eg. rgb(97,156,188) 30%, rgb(22,51,93)) I get a much brighter visualization of the ellipse which I don't understand. The start of the gradient is always brighter as it should be and I don't know why:

Can anyone explain me whats going on here?

回答1:

Downloading the (800x600 pixel) image from the screen shot you are looking to duplicate, and using a color picker, I get the following (decimal r,g,b) values, traversing from the center (400, 300) to the left edge (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)

That looks close enough to linear to me (there maybe some general fuzziness and jpeg compression will change the values a little).

So this seems a good approximation:

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

I don't see a way to make it circular using percentages: you would have to use actual lengths. If the size may change, then of course you need to respond to that; you can do this with a binding as follows:

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

Be aware that this is not a high-performing way of doing this; inline styles are generally the slowest way to apply CSS to a node, and here you are changing the inline style on every small change in dimension of the node. However, it appears to work just fine on my system; just be aware it might not be a good way to apply a gradient to many nodes in the same view.

来源：https://stackoverflow.com/questions/28989370/jafafx-radial-gradient

标签

css

javafx