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 的内容后，其中写道：

该应用程序提供了一系列 Stops，指定如何沿渐变分布颜色。Stop#offset 变量的范围必须为 0.0 到 1.0，并且充当沿渐变的关键帧。它们标记渐变应该恰好是特定颜色的位置。

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

无论如何，在玩了一会儿之后我得到了这样的结果：

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

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

另外，可以通过 CSS 将节点样式设置为具有渐变背景，因此作为替代解决方案（受到 james_D此处的答案的启发），我也设置了一个区域的样式，最终结果如下：

下面是我创建这三个不同图像的代码（尽管 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();
}

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