在JavaFX canvas中访问GraphicsContext内的元素

Question

我正在实现一个遵循MVC模式的简单曲棍球游戏。我在刷新球员的位置时遇到了麻烦，这是我使用GraphicsContext.drawImage()方法在画布中创建的。我在一个AnimationTimer匿名类中，在handle方法中。

位置和边界都反映到后端，所以我真的不需要在这里做任何特定的逻辑，我只想刷新球员在每一帧上的位置，基于它在模型中计算的位置，但我不能以任何方式访问我之前绘制的图像。代码如下：

DefaultController controller;

@FXML
public void initialize() {
    
    controller = new DefaultController(800, 400);
    
    double playerX = controller.getField().getPlayer().getX();
    double playerY = controller.getField().getPlayer().getY();
    
    double enemyX = controller.getField().getEnemy().getX();
    double enemyY = controller.getField().getEnemy().getY();

    context.drawImage(new Image("player.png"),playerX, playerY);
    context.drawImage(new Image("enemy.png"),enemyX, enemyY);

    AnimationTimer timer = new AnimationTimer() {
        @Override
        public void handle(long now) {
            pane.getScene().addEventHandler(KeyEvent.KEY_PRESSED, (key) -> {
                if (key.getCode() == KeyCode.UP) {
                    controller.getField().getPlayer().setLocation(playerX,playerY-0.1)

                    // how do I update the player image position inside the canvas?
                }
            });
        }
    };
    timer.start();
}

Answer 1

你正在遵循一种完全错误的方法。一旦画布被绘制，就不能更新画布中的任何内容。您可以将其擦除，然后重新绘制。对于你正在尝试做的事情来说，场景图更适合。

Answer 2

以下是演示如何使用UP键在画布上移动图像的mre：

import javafx.animation.AnimationTimer;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.canvas.*;
import javafx.scene.image.Image;
import javafx.scene.input.*;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class Main extends Application {

    private static final int SIZE = 200;
    private static final String FISH_IMAGE = "https://www.shareicon.net/data/128x128/2015/03/28/14104_animal_256x256.png";
    private Image image;
    private Canvas canvas;
    private final double xPos = 250;
    private double yPos = 150;
    private static final double MOVE = 0.8;
    @Override
    public void start(Stage primaryStage) {

        image = new Image(FISH_IMAGE,SIZE,SIZE,false,false);
        canvas = new Canvas(SIZE*3, SIZE*3);
        draw();
        Scene scene = new Scene(new StackPane(canvas));
        scene.addEventHandler(KeyEvent.KEY_PRESSED, (key) -> animate(key));
        primaryStage.setScene(scene);
        primaryStage.show();

        AnimationTimer timer = new AnimationTimer() {
            @Override
            public void handle(long now) {
                //to avoid multiple handlers do not add handler here
                draw();
            }
        };
        timer.start();
    }
    
    private void animate(KeyEvent key){
          if(key.getCode()== KeyCode.UP) {
            yPos -= MOVE;
          }
          //todo add down, left , right 
         //for low rate animation, like response to key-press, invoke draw() here instead of using AnimationTimer 
    }

    private void draw(){
         GraphicsContext gc = canvas.getGraphicsContext2D();
         gc.clearRect(0, 0, canvas.getWidth(), canvas.getHeight());//clear previous
         gc.drawImage(image, xPos, yPos);
    }

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