Is it possible to put ImageView on Canvas in JavaFX?

Question

I am a newbie to javafx. I am developing an application in which I have a canvas and I have drawn several images in it. I want to add an ImageView on my canvas and implement a popup while clicking on the ImageView?

Is there any possibilities with or without ImageView (buttons or any controls?) or is it restricted to use controls over canvas?

I need some suggestions please.

Answer 1

You can stack an ImageView on top of a Canvas . Use a StackPane . You can later add mouse listeners to the ImageView .

Is there any possibilities with or without ImageView (buttons or any controls?) or is it restricted to use controls over canvas?

All controls including Button , ImageView and Canvas itself extend from Node and can be used to add in the StackPane .

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.image.ImageView;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class Main extends Application {

    int count = 1;

    @Override
    public void start(Stage stage) {

        StackPane root = new StackPane();
        Scene s = new Scene(root, 400, 400, Color.BLACK);

        final Canvas canvas = new Canvas(300, 300);
        GraphicsContext gc = canvas.getGraphicsContext2D();

        gc.setFill(Color.BLUE);
        gc.fillRect(10, 10, 300, 300);

        ImageView image = new ImageView("https://cdn0.iconfinder.com/data/icons/toys/256/teddy_bear_toy_6.png");

        // Listener for MouseClick
        image.setOnMouseClicked(e -> {
            Stage popup = new Stage();
            popup.initOwner(stage);
            popup.show();
        });

        root.getChildren().addAll(canvas, image);

        stage.setScene(s);
        stage.show();
    }

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

Output:

• Scene has Black Background
• Canvas has Blue Background
• ImageView is the bear.

Answer 2

If you just want add button, image ... on the top of your canvas you should use StackPane . You first add your canvas and then you can add Button or whatever you want.

 StackPane stack = new StackPane();
 stack.getChildren().addAll(yourCanvas, yourButton);

You should read this for a better understanding of Layouting with JavaFX.