【问题标题】：moving an image with arrows in JAVAFX在 JAVAFX 中移动带有箭头的图像
【发布时间】：2014-05-20 21:14:25
【问题描述】：

我正在这里开发一个小游戏，我正在尝试使用左右箭头移动图像。

图像已被声明为 ImageView，正如您将在附加代码中看到的那样。

请随意纠正我！

package wordsfalling;

    import java.*; 
    import java.net.URL;  
    import java.util.*;
    import java.util.ResourceBundle; 
    import javafx.event.*; 
    import javafx.event.EventHandler; 
    import javafx.fxml.*; 
    import javafx.fxml.Initializable; 
    import javafx.scene.image.ImageView;
    import javafx.scene.input.KeyCode; 
    import javafx.scene.input.KeyEvent; 
    import javafx.scene.input.*; 
    import javafx.scene.*; 

/**  * FXML Controller class  * 
      * @author ad  */

      public class WordsFallingFXMLController implements Initializable {

        @FXML
        private ImageView bar;

       // char [] alphapet = "ABCDEFGHIKLMNOPQRSTUVWXYS".toCharArray();


        public void initialize(URL url, ResourceBundle rb) {



            bar.setOnKeyPressed(new EventHandler<KeyEvent>()
        {
            @Override
            public void handle(KeyEvent ke)
            {
                if (ke.getCode().equals(KeyCode.RIGHT))
                {
                    bar.setX(4);
                }
            }
        }
            );

        } }

我也努力修改和实施这个 JavaFX: Moving image with arrow keys and spacebar

但是没用！！

有什么建议吗？

提前致谢

【问题讨论】：

标签： javafx

【解决方案1】：

快速修复

如果您使用调试器进行检查，即使在按键时也不会执行 bar.setX(4); 行。图像视图永远不会收到 KeyEvent，因为它没有收到焦点。因此，如果您在设置事件处理程序后添加行 image.setFocusTraversable(true);，那么您的问题将被“修复”：

public class WordsFallingFXMLController implements Initializable {   
    @FXML
    private ImageView image;

    @Override
    public void initialize(URL location, ResourceBundle resources) {
        assert image != null : "fx:id=\"image\" was not injected: check your FXML file 'FXMLDocument.fxml'.";
        image.setOnKeyPressed(new EventHandler<KeyEvent>() {
            @Override
            public void handle(KeyEvent ke) {
                if (ke.getCode().equals(KeyCode.RIGHT)) {
                    image.setX(4);
                }
            }
        });
        image.setFocusTraversable(true);
    }
}

更长的修复

但是，如果您尝试将图像视图向右移动，bar.setX(4); 行并不是最好的方法，因为它只会将图像移动到 (0,0) 右侧 4px，并且因此，即使您再次按右箭头键，图像也不会移动。此外，将模型与视图分开通常是一个好主意。我的意思是你不想直接操作图像视图。相反，您应该设置一个对象（模型）来存储图像的 x 和 y 坐标的整数值。关键事件应该修改模型的 x 和 y 坐标。然后你应该更新图像视图以反映模型的新位置。

最小重构

理想情况下，您希望将模型移至其自己的类，但这里有一个最小示例，可满足您通过控制器请求的操作。

public class FXMLDocumentController implements Initializable {

    @FXML
    private ImageView image; 
    int imageX = 0;
    int imageY = 0;

    @Override
    public void initialize(URL location, ResourceBundle resources) {
        image.setOnKeyPressed(new EventHandler<KeyEvent>() {
            @Override
            public void handle(KeyEvent key) {
                if (key.getCode().equals(KeyCode.RIGHT)) {
                    imageX += 5;
                } else if (key.getCode().equals(KeyCode.LEFT)) {
                    imageX -= 5;
                }
                updateImageView();
            }

            private void updateImageView() {
                image.setX(imageX);
                image.setY(imageY);
            }
        });
        image.setFocusTraversable(true);
    }
}

最后的评论

此外，当您在 SO 上发布代码时，格式化您的代码通常是个好主意。如果您使用诸如 Netbeans 或 Eclipse 之类的 IDE，则应该有一个选项可以通过顶部的菜单栏自动格式化代码。一般来说，人们在看到格式化代码时会更愿意提供帮助。

【讨论】：