JavaFX：如何使Node部分鼠标透明？

Question

简化问题：

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

真正的问题：

我有一个标签菜单。可以拖动每个选项卡以展开相应的菜单层。因此，每个标签层都是一个具有部分透明背景（基本上是多边形）的窗格，透明部分对于MouseEvents也应该是透明的。

插图（我无法发布，请参见链接：Illustration of tabs，深绿色线条是绿色窗格的边框）显示基本原则：想象一下只有标签可见且图层本身可以向右拉以查看其内容。

所以问题是，如何在不使整个节点透明的情况下使节点区域对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)

  

如果pickOnBounds为true，则通过与此节点的边界相交来计算拾取，否则通过与此节点的几何形状相交来计算拾取。

下面的代码演示了如何使用包含透明像素的ImageView覆盖Image的正方形来使用它。如果ImageView的pickOnBounds设置为true，则即使单击图像中的透明像素，ImageView也会收到mouseClick事件。如果ImageView的pickOnBounds设置为false，则即使单击图像中的透明像素，ImageView也不会处理单击，并且图像后面的节点将接收单击事件。 / p>

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();
  }
}