JavaFX - 深色背景上的多盏灯答案

【问题标题】：JavaFX - Multiple lights on a dark backgroundJavaFX - 深色背景上的多盏灯
【发布时间】：2018-07-18 16:18:53
【问题描述】：

我正在尝试使用 JavaFX 创建类似于小地图的东西，即一个（变暗的）背景图像，上面有一些圆圈。其中一些圆圈需要能够照亮背景，露出其中的一小部分。下图显示了我的目标。

我已经使用this SO solution 继续前进，但目前我被卡住了，因为您似乎只能在底层StackPane 上设置javafx.scene.effect.Lighting 的一个实例。

我真的希望尽可能简单，最好只使用 JavaFX。非常感谢任何帮助:)

【问题讨论】：

【解决方案1】：

我建议使用BlendMode.LIGHTEN 将填充有RadialGradient 的Pane 与黑色背景的Circles 相加，并将其与包含“地图”的ImageView 使用BlendMode.MULTIPLY 结合起来：

private Circle circle;

// gradient with yellow in the center and black on the border
private final static RadialGradient GRADIENT = new RadialGradient(0, 0, 0.5, 0.5, 0.5, true, CycleMethod.NO_CYCLE, new Stop(0, Color.YELLOW), new Stop(1, Color.BLACK));

private void newCircle(Pane container) {
    circle = new Circle(50, GRADIENT);
    circle.setBlendMode(BlendMode.LIGHTEN);
    circle.setManaged(false);
    container.getChildren().add(circle);
}

private void setCirclePosition(MouseEvent event) {
    circle.setCenterX(event.getX());
    circle.setCenterY(event.getY());
}

@Override
public void start(Stage primaryStage) {
    Image image = new Image(imageURL);
    ImageView imageView = new ImageView(image);

    Pane mask = new Pane();
    mask.setBlendMode(BlendMode.MULTIPLY);
    mask.setStyle("-fx-background-color: black;");
    mask.setOnMouseMoved(this::setCirclePosition); // move cricle with mouse

    newCircle(mask);

    // create new circle on mouse click
    mask.setOnMouseClicked(evt -> {
        newCircle(mask);
        setCirclePosition(evt);
    });

    StackPane root = new StackPane(imageView, mask);

    Scene scene = new Scene(root);
    primaryStage.setScene(scene);
    primaryStage.show();
}

【讨论】：