image - JavaFX - 深色背景上的多盏灯

Question

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

我已经使用这个 SO 解决方案向前推进了，但目前，我被卡住了，因为您似乎只能javafx.scene.effect.Lighting在底层设置一个实例StackPane。

我真的希望尽可能简单，最好只使用 JavaFX。任何帮助是极大的赞赏 ：）

标签： imagejavafx-8effectslighting

Answer 1

我建议将在黑色背景上Circle填充有 a 的 s添加在一起，并将其与包含“地图”的 a 结合使用：RadialGradientPaneBlendMode.LIGHTENImageViewBlendMode.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();
}