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.

Do you want to place the `ImageView` on top of `Canvas`? – ItachiUchiha May 06 '15 at 06:35 — ItachiUchiha, May 06 '15 at 06:35

score 7 · Accepted Answer · edited Aug 26 '16 at 23:19

7

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.

enter image description here

edited Aug 26 '16 at 23:19

SpaceCore186

586
1
8
22

answered May 06 '15 at 07:05

ItachiUchiha

36,135
10
122
176

Hi , thanks a lot for the solution .. I have a doubt , consider I am using an anchorpane as parent, inside that can I use this stackpane and rest of the operations? – Viz_Kid May 06 '15 at 09:29
Yes, you can. Just add StackPane as the child of AnchorPane. – ItachiUchiha May 06 '15 at 09:32
Hi i have added imageview but I cannot position it with the x and y co ordinates , it always appears in the center. I have used setLayoutX and setLayoutY properties . How to position it? – Viz_Kid May 07 '15 at 06:30
1

Please go through [JavaFX : How to position a component/node?](http://stackoverflow.com/a/29934733/1759128) and once you are done with it, go through [JavaFX issue when placing square at coordinates](http://stackoverflow.com/a/29716180/1759128) – ItachiUchiha May 07 '15 at 06:36
Yes setTranslateX and setTranslateY works !!! thumps up ! but still taking the values with respect to the center of the stackpane , is it like that? – Viz_Kid May 07 '15 at 06:50
Oops yes translation w.r.t. origin ryt ? :) – Viz_Kid May 07 '15 at 06:52
I didn't get your question. Using a StackPane will always place their children in the center and to move them you can use translate properties. – ItachiUchiha May 07 '15 at 06:55

score 2 · Answer 2 · answered May 06 '15 at 07:05

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.

Is it possible to put ImageView on Canvas in JavaFX?

2 Answers2

Linked