是否可以在 JavaFX 中将 ImageView 放在 Canvas 上？

Question

我是 javafx 的新手。我正在开发一个应用程序，其中有一个 canvas 并且我在其中绘制了几张图像。我想在我的 canvas 上添加一个 ImageView 并在单击 ImageView 时实现弹出窗口？

是否有任何可能有或没有 ImageView（按钮或任何控件？）或是否限制使用 canvas 上的控件？

我需要一些建议。

Answer 1

您可以将 ImageView 堆叠在 Canvas 之上。使用 StackPane。您可以稍后将鼠标侦听器添加到 ImageView.

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

包括 Button、ImageView 和 Canvas 在内的所有控件本身都从 Node 扩展而来，可用于添加到 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);
    }
}

输出：

场景有黑色背景
Canvas 有蓝色背景
ImageView 是熊

Answer 2

如果您只想在 canvas 的顶部添加按钮、图片...，您应该使用 StackPane。您首先添加 canvas 然后您可以添加 Button 或任何您想要的。

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

您应该阅读 this 以更好地理解使用 JavaFX 进行布局。

是否可以在 JavaFX 中将 ImageView 放在 Canvas 上？

Is it possible to put ImageView on Canvas in JavaFX?

java

javafx

canvas

popup

imageview