event-handling - JavaFX : How to make a Node partially mouse transparent?

Question

简化问题:

使位于另一个节点“B”之上的一个节点“A”对鼠标事件半透明，因此事件将到达底层节点“B”。两个节点大小相同，但节点“A”具有半透明背景图像，因此节点“B”的一半可见。

实际问题:

我有一个选项卡菜单。可以拖动每个选项卡以展开相应的菜单层。因此，每个选项卡层都是一个带有部分透明背景(基本上是一个多边形)的 Pane ，其中的透明部分也应该对 MouseEvents 透明。

插图(我还不能发布，请参阅链接:Illustration of tabs，深绿色线是绿色 Pane 的边框)显示了基本原理:想象一下只有选项卡可见并且图层本身可以被拉到查看其内容的权利。

所以问题是，如何在不使整个节点透明的情况下使节点的区域对 MouseEvents 透明？

感谢您的帮助!

更新:

为了澄清这里的简单问题是相应的代码:

//Create parent group
Group root = new Group();

//Create linear gradient, so one side is transparent
Stop[] stops = new Stop[] { new Stop(0, Color.rgb(0, 255, 0, 0.0)), new Stop(1, Color.rgb(0, 255, 0, 1.0))};
LinearGradient lg1 = new LinearGradient(0, 0, 1, 0, true, CycleMethod.NO_CYCLE, stops);

//Create the rectangles
Rectangle A = new Rectangle(100, 50, lg1);
Rectangle B = new Rectangle(100,50, Color.RED);

//Add eventHandlers
A.setOnMouseClicked(new EventHandler<MouseEvent>() {
    @Override
    public void handle(MouseEvent e) {
        System.out.println("Clicked A");
    }
});
B.setOnMouseClicked(new EventHandler<MouseEvent>() {
    @Override
    public void handle(MouseEvent e) {
        System.out.println("Clicked B");
    }
});
root.getChildren().addAll(B, A);

//Add to Scene..

希望这可以帮助。

Answer 1

考虑 pickOnBounds属性，它可能对您的情况有所帮助，但如果没有看到您的代码尝试因简化问题而失败，我就不清楚了。

node.setPickOnBounds(true)

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.

下面的代码演示了如何通过创建一个由 ImageView 覆盖的正方形来使用它。对于 Image其中包含透明像素。如 pickOnBounds ImageView 设置为true，那么，即使你点击了图片中的透明像素，ImageView 也会收到 mouseClick 事件。如 pickOnBounds ImageView设置为false，那么即使点击图片中的透明像素，ImageView也不会处理点击，点击事件会被图片后面的节点接收。

import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.event.EventHandler;
import javafx.geometry.Pos;
import javafx.scene.*;
import javafx.scene.control.*;
import javafx.scene.image.ImageView;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.*;
import javafx.scene.paint.*;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

public class PickOnBoundsDemo extends Application {
  public static void main(String[] args) { Application.launch(args); }
  @Override public void start(Stage stage) {
    final Rectangle back  = new Rectangle(128, 128);
    back.setFill(Color.FORESTGREEN);
    final ImageView front = new ImageView("http://icons.iconarchive.com/icons/aha-soft/free-large-boss/128/Wizard-icon.png");
    // icon: Linkware (Backlink to http://www.aha-soft.com required)

    final StackPane pickArea = new StackPane();
    pickArea.getChildren().addAll(
      back, 
      front
    );

    final ToggleButton pickTypeSelection = new ToggleButton("Pick On Bounds");
    final Label pickResult = new Label();

    Bindings.bindBidirectional(front.pickOnBoundsProperty(), pickTypeSelection.selectedProperty());

    front.setOnMouseClicked(new EventHandler<MouseEvent>() {
      @Override public void handle(MouseEvent t) {
        pickResult.setText("Front clicked");
      }
    });

    back.setOnMouseClicked(new EventHandler<MouseEvent>() {
      @Override public void handle(MouseEvent t) {
        pickResult.setText("Back clicked");
      }
    });

    VBox layout = new VBox(10);
    layout.setStyle("-fx-background-color: cornsilk; -fx-padding: 10;");
    layout.getChildren().setAll(
      pickArea,
      new Label("Click inside the above area to test mouse picking."),
      pickTypeSelection,
      pickResult
    );
    layout.setAlignment(Pos.CENTER);

    stage.setScene(new Scene(layout));
    stage.show();
  }
}