Как сделать оверлейные узлы Vbox кликабельными?

Question

Я пытаюсь построить триммер javafx, я сделал это, однако, когда я добавил setOnMouseClicked на ImageViews, триммер, который я сделал, скрывает эти узлы, поэтому действие не обрабатывается.

Я установил Rectangle -50, чтобы наложить триммер на ImageView, к сожалению, это событие make не работает.

Rectangle rectangle = new Rectangle(0, -50, 80, 40);

текущий контроллер строит кадр

package app.controller;

import java.io.File;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.scene.Node;
import javafx.scene.control.Label;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.ScrollPane;
import javafx.scene.effect.DropShadow;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;

public class Trimmer2 implements Initializable {
    private Node selectedNode;
    @FXML
    private HBox hboxStream;

    @FXML
    private HBox hboxStreamTrim;

    @FXML
    private Label lblTime;

    public void initialize(URL arg0, ResourceBundle arg1) {
        buidTrimmer();
    }

    private void buidTrimmer() {
        ImageView pic = null;
        HBox hbox = new HBox();
        DropShadow shadow = new DropShadow();
        ClassLoader classLoader = getClass().getClassLoader();
        File path = new File(classLoader.getResource("streams/sub_stream").getPath());
        File [] files = path.listFiles();

        Image[] images = new Image[files.length];
        ImageView[] pics = new ImageView[files.length];

        for (int i = 0; i < files.length; i++) {
            final Image image = images[i] =
                new Image(files[i].toURI().toString(), 80, 40, false, false);
            pic = pics[i] =
                new ImageView(image);
            pic.setEffect(shadow);
            pic.setOnMouseClicked((MouseEvent me) -> {
               System.out.println("do action");
        });
            hbox.getChildren().add(pics[i]);
        }



        Rectangle rectangle = new Rectangle(0, -50, 80, 40);
        rectangle.setFill(Color.rgb(33, 150, 243, 0.5));
        Pane pane = new Pane( rectangle );

        makeSelectable(rectangle, pane);

        VBox vbox = new VBox(); 
        vbox.setSpacing(10);
        vbox.getChildren().addAll(hbox,pane);
        ScrollPane scrollPane = new ScrollPane();
        scrollPane.setContent(vbox);
        scrollPane.setId("my_scrollPane");

        hboxStream.getChildren().add(scrollPane);
    }

    private void makeSelectable(Node node, Pane root) {

            node.setOnMouseClicked(event -> {
                if (selectedNode != node) {
                    root.getChildren().removeIf(candidate -> candidate instanceof ResizingControl);
                    selectedNode = node;

                    node.toFront();
                    ResizingControl resizingControl = new ResizingControl(node);
                    root.getChildren().add(resizingControl);
                }
                System.out.println("here");
                event.consume();
            });

    }
}

Answer 1

События мыши идут к самому верхнему узлу, который не прозрачен для мыши. Просто установите для свойства значение true, и события мыши будут обрабатываться на обычном узле. Еще одна вещь, которая может облегчить вашу жизнь, - это то, что вы также можете размещать узлы внутри макета, на которые не влияет алгоритм компоновки родительского элемента и которые не влияют на вычисления размера. Просто установите managed на false. Это позволяет реализовать выделение следующим образом:

private Node selectedNode;

@Override
public void start(Stage primaryStage) throws Exception {
    HBox container = new HBox();

    File directory = new File("someDirectory");

    Rectangle selection = new Rectangle(80, 40, Color.rgb(100, 100, 255, 0.5));
    selection.setStrokeType(StrokeType.INSIDE);
    selection.setStrokeWidth(4);
    selection.setStroke(Color.WHITE);
    selection.setVisible(false);
    selection.setMouseTransparent(true);
    selection.setManaged(false);

    for (File file : directory.listFiles(f -> f.getName().endsWith(".jpg"))) {
        Image image = new Image(file.toURI().toURL().toExternalForm(), 80, 40, false, false);
        ImageView imageView = new ImageView(image);
        container.getChildren().add(imageView);
        imageView.setOnMouseClicked(evt -> {
            if (selectedNode == imageView) {
                selection.setVisible(false);
                selectedNode = null;
            } else {
                selection.setVisible(true);
                selection.setLayoutX(imageView.getLayoutX());
                selectedNode = imageView;
            }
        });
    }

    container.getChildren().add(selection);

    Scene scene = new Scene(new ScrollPane(container), 400, 400);

    primaryStage.setScene(scene);
    primaryStage.show();
}

Примечание: Я также исключил использование getResource, и это на то есть веская причина. Ресурсы не гарантируются как файлы. Например. если вы используете файл .jar, вы не сможете получить к ним доступ через File. Либо храните вне пути к классам в каталоге, либо сделайте список ресурсов доступным в качестве текстового ресурса, чтобы предоставить вам несколько ресурсов без жесткого кодирования каждого из них. (Не используйте File с последним подходом.)

Answer 2

Попробуйте добавить Hbox и прямоугольник внутри вашей панели, так как эта панель должна быть пустой. надеюсь, это поможет :)

    Rectangle rectangle = new Rectangle(0, 0, imgWidth, imgHeight);
    rectangle.setFill(Color.rgb(33, 150, 243, 0.35));
    Pane pane = new Pane();
    VBox vbox = new VBox(); 
    vbox.getChildren().addAll(pane);
    pane.getChildren().addAll(hbox,rectangle);