Geek asks and answers

JavaFX: How to make Node partially transparent mouse?

Simplified problem:

Make one Node "A" which on top of the other Node "B" will be half transparent for MouseEvents, so the events will reach the base Node "B". Both nodes are the same size, but Node "A" has a translucent background image, so half of Node "B" is visible.

The real problem:

I have a tab menu. Each tab can be dragged to expand the corresponding menu layer. Therefore, each tab layer is a panel with a partially transparent background (mainly a polygon), the transparent part of which must also be transparent for MouseEvents.

The illustration (which I still can’t publish, see the link: Tabs illustration , the dark green line is the border of the green Panel) shows the basic principle: just imagine that only the tabs are visible, and the layer itself can be pulled to the right to view its contents.

So the question is how to make the Node region transparent to MouseEvents without the transparency of the entire Node?

Thank you for your help!

Update:

To clarify a simple problem, here is the corresponding code:

//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..

Hope this helps.

+5
source share
1 answer

Consider a property pickOnBounds, it can help in your situation, but it is not clear to me without seeing an attempt at your code, which is not suitable for a simplified problem.

node.setPickOnBounds (true)

pickOnBounds , node, node.

, , , ImageView Image, . ImageView pickOnBounds true, , ImageView mouseClick. ImageView pickOnBounds false, , ImageView , click node .

mousepick

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

More articles:


All Articles