JavaFX-如何在节点周围创建可点击区域

Question

I am trying to make the Series in a Line clickable so I can open different options based on the series the user clicked. For example, suppose I have a chart like this:

Currently I have something like this:

    series.getNode().setOnMouseEntered(new EventHandler<MouseEvent>() {
        @Override
        public void handle(MouseEvent event) {
            series.getNode().setCursor(Cursor.HAND);
        }
    });

    series.getNode().setOnMouseExited(new EventHandler<MouseEvent>() {
        @Override
        public void handle(MouseEvent event) {
            series.getNode().setCursor(Cursor.DEFAULT);
        }
    });

So cursor changes when I pass through a series. It is working but sometimes series are too thin and you have to be very accurate to click on them, so I was thinking of creating a small area around them so the click is "approximated" and it doesn't need to be that accurate.

How can I achieve this? This nodes consists of a 2DPath to create the lines so I think every line has it's own bounds but can't figure out a way to modify without modifying line shape.

Answer 1

Layer another (almost transparent) wide path over the top of the path you want to detect mouse events on and instead detect mouse events on the almost transparent path.

private void addGlowOnMouseOverData(LineChart<Number, Number> lineChart) {
    // make the first series in the chart glow when you mouse near it.
    Node n = lineChart.lookup(".chart-series-line.series0");
    if (n != null && n instanceof Path) {
        final Path path = (Path) n;
        final Glow glow = new Glow(0.8);

        final Path mousingPath = new Path();
        mousingPath.setStrokeWidth(24);
        mousingPath.setStroke(Color.rgb(255, 255, 255, 0.01));
        Bindings.bindContent(mousingPath.getElements(), path.getElements());
        ((Group) path.getParent()).getChildren().add(mousingPath);

        mousingPath.setOnMouseEntered(e -> path.setEffect(glow));
        mousingPath.setOnMouseExited(e -> path.setEffect(null));
    }
}

Executable Sample

import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.collections.*;
import javafx.scene.*;
import javafx.scene.chart.*;
import javafx.scene.effect.Glow;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Path;
import javafx.stage.Stage;

public class LineChartMouser extends Application {
    @SuppressWarnings("unchecked")
    @Override
    public void start(Stage stage) {
        // initialize data
        ObservableList<XYChart.Data> data = FXCollections.observableArrayList(
                new XYChart.Data(1, 23), new XYChart.Data(2, 14), new XYChart.Data(3, 15), new XYChart.Data(4, 24), new XYChart.Data(5, 34), new XYChart.Data(6, 36), new XYChart.Data(7, 22), new XYChart.Data(8, 45), new XYChart.Data(9, 43), new XYChart.Data(10, 17), new XYChart.Data(11, 29), new XYChart.Data(12, 25)
        );

        // create chart
        final LineChart lineChart = createChart(data);
        StackPane layout = new StackPane(lineChart);

        // show the scene.
        Scene scene = new Scene(layout, 800, 600);
        stage.setScene(scene);
        stage.show();

        // add a glow when you mouse over the lines in the line chart so that you can see that they are chosen.
        addGlowOnMouseOverData(lineChart);
    }

    private void addGlowOnMouseOverData(LineChart<Number, Number> lineChart) {
        // make the first series in the chart glow when you mouse near it.
        Node n = lineChart.lookup(".chart-series-line.series0");
        if (n != null && n instanceof Path) {
            final Path path = (Path) n;
            final Glow glow = new Glow(0.8);

            final Path mousingPath = new Path();
            mousingPath.setStrokeWidth(24);
            mousingPath.setStroke(Color.rgb(255, 255, 255, 0.01));
            Bindings.bindContent(mousingPath.getElements(), path.getElements());
            ((Group) path.getParent()).getChildren().add(mousingPath);

            mousingPath.setOnMouseEntered(e -> path.setEffect(glow));
            mousingPath.setOnMouseExited(e -> path.setEffect(null));
        }
    }

    private LineChart createChart(ObservableList<XYChart.Data> data) {
        final NumberAxis xAxis = new NumberAxis();
        final NumberAxis yAxis = new NumberAxis();
        xAxis.setLabel("Number of Month");
        final LineChart lineChart = new LineChart<>(xAxis, yAxis);
        lineChart.setTitle("Stock Monitoring, 2010");
        XYChart.Series series = new XYChart.Series(data);
        series.setName("My portfolio");
        lineChart.getData().add(series);
        lineChart.setCreateSymbols(false);
        lineChart.setLegendVisible(false);

        return lineChart;
    }

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