根据旋转角度更改 ImageView 位置

huangapple go评论60阅读模式
英文:

Changing ImageView position based on angle of rotation

问题

我正在尝试根据ImageView所面向的方向改变其位置。

import javafx.animation.AnimationTimer;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.stage.Stage;

public class Demo extends Application {

    public void start(Stage window) {
        window.setTitle("根据旋转角度改变ImageView位置");

        int speed = 10; // 您可以在此处修改速度

        ImageView imageView = new ImageView(new Image("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTBJoRKh1UKimWTSLdabW2b8RSLDeSgMfSqqg&usqp=CAU"));
        imageView.setX(100);
        imageView.setY(100);

        imageView.setRotate(65); // 这里您可以更改旋转角度

        Group root = new Group();
        root.getChildren().add(imageView);
        Scene scene = new Scene(root);
        window.setScene(scene);

        final long[] lastNanoTime = {System.nanoTime()};

        new AnimationTimer() {
            @Override
            public void handle(long currentTime) {
                double elapsedTime = (currentTime - lastNanoTime[0]) / 1000000000.0;
                lastNanoTime[0] = currentTime;

                imageView.setX(imageView.getX() + Math.sin(Math.toRadians(imageView.getRotate())) * speed * elapsedTime);
                imageView.setY(imageView.getY() + Math.cos(Math.toRadians(imageView.getRotate())) * speed * elapsedTime);

            }
        }.start();

        window.show();
    }

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

上面的代码基于我正在使用的代码。您可以相应地调整角度以查看问题。ImageView不会沿着其面向的方向移动。请注意:我在网上找到了一个随机的.png文件,用于这个演示的目的。您可以在自己的代码中用不同的图像进行替换,以更好地可视化问题。

问题是,ImageView不会沿着其面向的方向移动。当垂直定向(0度或180度)时,ImageView向后移动,但当水平定向(90度或270度)时,它会直接向前移动,就像应该的那样。当定向为对角线时,它会在两者之间移动。

我做错了什么,如何修复它?

英文:

I am trying to make an ImageView change its position based on the direction it is facing.

import javafx.animation.AnimationTimer;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.stage.Stage;

public class Demo extends Application {

    public void start(Stage window) {
        window.setTitle("Changing ImageView position based on angle of rotation");

        int speed = 10; // You can modify the speed here

        ImageView imageView = new ImageView(new Image("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTBJoRKh1UKimWTSLdabW2b8RSLDeSgMfSqqg&usqp=CAU"));
        imageView.setX(100);
        imageView.setY(100);

        imageView.setRotate(65); // This is where you can change the angle of rotation

        Group root = new Group();
        root.getChildren().add(imageView);
        Scene scene = new Scene(root);
        window.setScene(scene);

        final long[] lastNanoTime = {System.nanoTime()};

        new AnimationTimer() {
            @Override
            public void handle(long currentTime) {
                double elapsedTime = (currentTime - lastNanoTime[0]) / 1000000000.0;
                lastNanoTime[0] = currentTime;

                imageView.setX(imageView.getX() + Math.sin(Math.toRadians(imageView.getRotate())) * speed * elapsedTime);
                imageView.setY(imageView.getY() + Math.cos(Math.toRadians(imageView.getRotate())) * speed * elapsedTime);

            }
        }.start();

        window.show();
    }


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

The above code is based on the code I am using. You can adjust the degrees accordingly to see the issue. The ImageView does not move in the direction it is facing. Note: I found a random .png file online for the purpose of this demo. You can substitute with a different image in you own code in order to better visualize the problem.

The issue is, the ImageView does not move in the direction it is facing. When oriented vertically (0° or 180°) the ImageView moves backward, but when oriented horizontally (90° or 270°) it moves straight ahead like it should. When oriented diagonally, it moves somewhere in between.

What am I doing wrong and how do I fix it?

答案1

得分: 1

y 轴的方向是向下的。因此,当角度为 0 且增加 y 值时,图像会向下移动。要使图像在角度为 0 时向上移动,只需将增量的符号从以下方式更改:\n\n
imageView.setY(imageView.getY() + Math.cos(Math.toRadians(imageView.getRotate())) * speed * elapsedTime);

改为

imageView.setY(imageView.getY() - Math.cos(Math.toRadians(imageView.getRotate())) * speed * elapsedTime);

因此,0 度角应将图像向上移动,90 度角向右移动,180 度角向下移动,依此类推。

英文:

The direction of the y axis is down. So when the angle is 0 and you increase y value you'll get down movement. <br/>
To make the image move up when the angle is 0 simplט change the increment sign from: <br/>
imageView.setY(imageView.getY() + Math.cos(Math.toRadians(imageView.getRotate())) * speed * elapsedTime);

to <br/>
imageView.setY(imageView.getY() - Math.cos(Math.toRadians(imageView.getRotate())) * speed * elapsedTime);

<br>
so angle of 0 should move the image up, 90 right, 180 down and so on.

huangapple
  • 本文由 发表于 2020年7月24日 07:55:38
  • 转载请务必保留本文链接:https://go.coder-hub.com/63064805.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定