JavaFX 创建透明径向渐变

Question

我想创建一个模拟光的圆，我需要一个径向渐变。我希望它在中心是黄色的，在外侧是透明的。

我试过了，但没有得到预期的结果。

RadialGradient gradient1 = new RadialGradient(0, 0, 0.5, 0.5, 1, true, CycleMethod.NO_CYCLE, new Stop[] {
            new Stop(0, Color.YELLOW),
            new Stop(1, Color.TRANSPARENT)
});

Answer 1

我没有与 RadialGradient 一起工作过之前所以我很好奇，老实说，当第一次阅读文档而不看你的代码时，我做了和你完全一样的事情，结果是:


我阅读了 RadialGradient 的文档并在阅读有关 stop#offset 后其中说:

The application provides an array of Stops specifying how to distribute the colors along the gradient. The Stop#offset variable must be the range 0.0 to 1.0 and act like keyframes along the gradient. They mark where the gradient should be exactly a particular color.

我想，如果我在 0 和 1 处设置止损，那么黄色将在中途透明 50%。看起来情况并非如此，至少如果我有白色背景。如果背景是白色，那么我什至看不到外边缘的黄色圆圈是透明的(例如，将背景颜色更改为绿色使其更明显，但这仍然不是我期望的结果，但也许只是我认为它会更透明)。

无论如何，在玩了一会儿之后，我最终得到了这个:



我所要做的就是将第二个停止点从 1 更改为 0.5。我不确定它是否足够好，但从你写的内容来看，它可能是:

I want to create a circle simulating a light, and I need a radial gradient. I want it to be yellow in the center and transparent in the outer side.

此外，可以通过 CSS 为节点设置样式以具有渐变背景，以便作为替代解决方案(受 james_D here 的答案启发)我也设置了一个区域的样式，结果如下所示:


下面是我创建这三个不同图像的代码(即使 CSS 解决方案可能不是你想要的，我仍然包含它)。请注意，我只是为了创建一个快速示例而使用内联样式。

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

@Override
public void start(Stage aStage) throws Exception {
    Label label = new Label("RadialGradient: stops at 0 and 1");
    RadialGradient yours = new RadialGradient(0, 0, 0.5, 0.5, 1, true, CycleMethod.NO_CYCLE, new Stop[] {
            new Stop(0, Color.YELLOW),
            new Stop(1, Color.TRANSPARENT)
    });
    Circle yourCircle = new Circle(100, yours);

    // Changed the stops from 0 and 1 to now go between 0 and 0.5, thats all really. I played around with some more stops but I 
    // didn't really get any results that I was happy with. 
    Label label2 = new Label("RadialGradient: stops at 0 and 0.5");
    RadialGradient gradient = new RadialGradient(0, 0, 0.5, 0.5, 1, true, CycleMethod.NO_CYCLE, new Stop[] {
            new Stop(0, Color.YELLOW),
            new Stop(0.5, Color.TRANSPARENT)
    });
    Circle circle = new Circle(100, gradient);

    // Another way of getting the desired gradient effect can be achieved with CSS. 
    Label label3 = new Label("Alternate way, Region + CSS");
    Region region = new Region();
    region.setStyle(""
            + "-fx-background-color: radial-gradient(center 50% 50%, radius 50%, rgb(251, 255, 0) 0%, rgb(243, 241, 94) 25%,rgba(245, 228, 0, 0) 100%);"
            + "-fx-background-radius:50;");
    region.setPrefWidth(200);
    region.setPrefHeight(200);

    final VBox root = new VBox();
    //  root.setStyle("-fx-background-color:green"); // I just used this so that I could "see" how transparent the circles actually were.
    root.getChildren().addAll(label, yourCircle, label2, circle, label3, region);
    final Scene scene = new Scene(root, 200, 640);
    aStage.setScene(scene);
    aStage.show();
}

也许是一个不必要的长答案，说您可能只需要更改一个值。