JavaFX 通过透明节点将鼠标事件传递给子节点

Question

在 java 文档中它说 setMouseTransparent这会影响所有 child 以及 parent 。

如何做到只有父级的透明区域(可以看到它下面的其他节点但不响应鼠标事件)对鼠标事件是透明的，以便它下面的节点可以接收它们。

在同一 Pane 中堆叠两个 XY 图表时会发生这种情况。只有最后添加的可以接收事件。

Answer 1

设置 pickOnBounds如果相关节点为 false，则单击节点中的透明区域不会向该节点注册单击。

Defines how the picking computation is done for this node when triggered by a MouseEvent or a contains function call. If pickOnBounds is true, then picking is computed by intersecting with the bounds of this node, else picking is computed by intersecting with the geometric shape of this node.

样本输出

这个示例实际上比演示 pickOnBounds 函数所需的复杂得多 - 但我只是做了一些如此复杂的事情，以便它显示“当堆叠两个 XYCharts 时会发生什么” > 在同一 Pane 中”，如发帖者的问题中所述。

在下面的示例中，两个折线图堆叠在一起，鼠标移动到一个图表中的数据线上，该图表具有附加到它的 mouseenter 事件的发光功能。然后将鼠标从第一个折线图数据上移开，并从其中移除辉光。然后将鼠标放在底层堆叠图表的第二个折线图数据上，并将发光添加到底层堆叠图表中的该折线图。

此示例是使用 Java8 开发的所描述的颜色和行为是我在 Mac OS X 和 Java 8b91 上运行该程序时所经历的。

示例代码

下面的代码只是为了演示 pickOnBounds 确实允许您通过堆叠在不透明节点形状顶部的透明区域传递鼠标事件。对于图表中的样式线，建议不要遵循代码实践(最好使用样式表而不是查找)，也没有必要使用折线图堆栈在单个图表上获取多个系列 - 它只需要或更简单地做这些事情来演示这个答案的边界概念应用程序的选择。

请注意在图表显示在舞台上并创建所有必要节点之后，为图表设置 pickOnBounds 属性的递归调用。

示例代码改编自 JavaFX 2 XYChart.Series and setOnMouseEntered :

import javafx.application.Application;
import javafx.collections.*;
import javafx.event.EventHandler;
import javafx.scene.*;
import javafx.scene.chart.*;
import javafx.scene.effect.Glow;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.StackPane;
import javafx.scene.shape.Path;
import javafx.stage.Stage;

public class LineChartSample 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)
    );
    ObservableList<XYChart.Data> reversedData = FXCollections.observableArrayList(
        new XYChart.Data(1, 25), new XYChart.Data(2, 29), new XYChart.Data(3, 17), new XYChart.Data(4, 43), new XYChart.Data(5, 45), new XYChart.Data(6, 22), new XYChart.Data(7, 36), new XYChart.Data(8, 34), new XYChart.Data(9, 24), new XYChart.Data(10, 15), new XYChart.Data(11, 14), new XYChart.Data(12, 23)
    );

    // create charts
    final LineChart<Number, Number> lineChart        = createChart(data);
    final LineChart<Number, Number> reverseLineChart = createChart(reversedData);
    StackPane layout = new StackPane();
    layout.getChildren().setAll(
      lineChart,
      reverseLineChart
    );

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

    // make one line chart line green so it is easy to see which is which.
    reverseLineChart.lookup(".default-color0.chart-series-line").setStyle("-fx-stroke: forestgreen;");

    // turn off pick on bounds for the charts so that clicks only register when you click on shapes.
    turnOffPickOnBoundsFor(lineChart);
    turnOffPickOnBoundsFor(reverseLineChart);

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

  @SuppressWarnings("unchecked")
  private void turnOffPickOnBoundsFor(Node n) {
    n.setPickOnBounds(false);
    if (n instanceof Parent) {
      for (Node c: ((Parent) n).getChildrenUnmodifiable()) {
        turnOffPickOnBoundsFor(c);
      }
    }
  }

  private void addGlowOnMouseOverData(LineChart<Number, Number> lineChart) {
    // make the first series in the chart glow when you mouse over 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(.8);
      path.setEffect(null);
      path.setOnMouseEntered(new EventHandler<MouseEvent>() {
        @Override public void handle(MouseEvent e) {
          path.setEffect(glow);
        }
      });
      path.setOnMouseExited(new EventHandler<MouseEvent>() {
        @Override public void handle(MouseEvent e) {
          path.setEffect(null);
        }
      });
    }
  }

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

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