JavaFx canvas mouse events

Question

I would like to intercept mouse events on canvas only where I've drawn some shape, but in all other transparent area I would like to have behaviour like with property mouseTransparent true. I can achieve that with ImageView, transparent areas doesn't intercept mouse events.

public void start(Stage primaryStage) throws Exception {
    primaryStage.setTitle("Drawing Operations Test");
    Pane root = new Pane();
    root.setStyle("-fx-background-color: #C9E3AF");
    root.setMinSize(1000, 1000);
    root.setOnMouseClicked(event -> {
        System.out.println("Clicked on root pane");
    });

    Canvas canvas1 = new Canvas(512, 512);

    canvas1.getGraphicsContext2D().setFill(Color.BLACK);
    canvas1.getGraphicsContext2D().fillRect(250, 250, 250, 250);
    canvas1.setOnMouseClicked(event -> {
        System.out.println("Clicked on canvas1");
    });
    canvas1.setPickOnBounds(false);

    Canvas canvas2 = new Canvas(512, 512);

    canvas2.getGraphicsContext2D().setFill(Color.RED);
    canvas2.getGraphicsContext2D().fillRect(200, 200, 250, 250);
    canvas2.setOnMouseClicked(event -> {
        System.out.println("Clicked on canvas2");
    });
    canvas2.setPickOnBounds(false);


    SnapshotParameters param1 = new SnapshotParameters();

    param1.setFill(Color.TRANSPARENT);
    WritableImage image1 = canvas1.snapshot(param1, new WritableImage(512, 512));

    SnapshotParameters param2 = new SnapshotParameters();

    param2.setFill(Color.TRANSPARENT);
    WritableImage image2 = canvas2.snapshot(param2, new WritableImage(512, 512));

    ImageView view1 = new ImageView(image1);
    view1.setOnMouseClicked(event -> {
        System.out.println("Clicked on view1");
    });
    view1.setPickOnBounds(false);

    ImageView view2 = new ImageView(image2);
    view2.setOnMouseClicked(event -> {
        System.out.println("Clicked on view2");
    });
    view2.setPickOnBounds(false);

    // ImageView test
    // root.getChildren().addAll(view1, view2);

    // Canvas test
    root.getChildren().addAll(canvas1, canvas2);
    Scene sc = new Scene(root);

    primaryStage.setScene(sc);
    primaryStage.setX(0);
    primaryStage.setY(0);
    primaryStage.show();
}

Is it even possible with Canvas?

Answer 1

As far as I'm concerned it is impossible to achieve using Canvas , but using Group and Shape s within gives you all the features of Canvas plus behaviour you expect.

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;

public class ShapesApp extends Application {

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

    @Override
    public void start(Stage stage) throws Exception {
        Circle circle = new Circle(100);
        circle.setFill(Color.BLUE);

        Group group = new Group(circle);
        group.setOnMouseMoved(System.out::println);

        StackPane stackPane = new StackPane(group);
        stackPane.setPrefSize(400, 400);

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