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 and after reading about the 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 的答案）我也设置了区域样式结果是这样的：

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

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

JavaFX 创建透明径向渐变

JavaFX create transparent radial gradient

gradient

javafx

transparent