从原点坐标中找出表示行进方向的角度

Question

我正在制作一个动画，其中有许多三角形物体在屏幕上移动。为了确保每个面向它的行进方向，我需要以适当的角度旋转图像。

我的问题是我的代码返回的角度不能准确地执行此操作。返回的值不会改变超过几度。

var wasCleared = false;
function doUpdate() {
    // Empty existing data
    if (!wasCleared) {
        storedData.length = 0;
        wasCleared = true;
    }
...

Answer 1

// calc the deltas as next minus current
double delta_x = next.xPos - current.xPos;
double delta_y = next.yPos - current.yPos;

// Calc the angle IN RADIANS using the atan2
double theta = Math.atan2(delta_y, delta_x);

// this.angle is now in degrees
// or leave off *180/Math.PI if you want radians
this.angle = theta*180/Math.PI;

Answer 2

以下是如何创建完整示例。

移动节点（三角形）的路径（Uluk的椭圆路径）。在每次移动期间，计算并调整节点的旋转。

public class Main extends Application {

    double prevX = 0;
    double prevY = 0;

    double radiusX = 200;
    double radiusY = 100;

    double centerX = 600;
    double centerY = 200;

    @Override
    public void start(Stage primaryStage) {

        try {

            // race track
            Path path = new Path();

            MoveTo moveTo = new MoveTo(centerX - radiusX, centerY - radiusY);

            ArcTo arcTo = new ArcTo();
            arcTo.setX(centerX - radiusX + 1); // to simulate a full 360 degree celsius circle.
            arcTo.setY(centerY - radiusY);
            arcTo.setSweepFlag(false);
            arcTo.setLargeArcFlag(true);
            arcTo.setRadiusX(radiusX);
            arcTo.setRadiusY(radiusY);

            path.getElements().add(moveTo);
            path.getElements().add(arcTo);
            path.getElements().add(new ClosePath());

            path.setFill(Color.TRANSPARENT);
            path.setStroke(Color.LIGHTGRAY);
            path.setStrokeWidth(40);


            Pane root = new Pane();

            // car: arrow pointing right
            Polygon arrow = new Polygon(0, 0, 20, 10, 0, 20);

            root.getChildren().addAll( path, arrow);

            // lawn
            Scene scene = new Scene(root, 800, 400, Color.GREEN);
            primaryStage.setScene(scene);
            primaryStage.show();

            // movement: car path on race track
            PathTransition pathTransition = new PathTransition();
            pathTransition.setDuration(Duration.millis(4000));
            pathTransition.setPath(path);
            pathTransition.setNode(arrow);
            pathTransition.setCycleCount(Timeline.INDEFINITE);
            pathTransition.setAutoReverse(true);

            // rotate car during movement
            pathTransition.currentTimeProperty().addListener(e -> {

                double rad = angle(new Point2D(prevX, prevY), new Point2D(arrow.getTranslateX(), arrow.getTranslateY()));
                double deg = Math.toDegrees(rad);

                arrow.setRotate(deg);

                prevX = arrow.getTranslateX();
                prevY = arrow.getTranslateY();

            });

            pathTransition.play();

        } catch (Exception e) {
            e.printStackTrace();
        }
    }

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

    /**
     * Calculate angle between source and target point in radians.
     * @param source
     * @param target
     * @return
     */
    public static double angle(Point2D source, Point2D target) {

        double dx = target.getX() - source.getX();
        double dy = target.getY() - source.getY();

        double angle = Math.atan2(dy, dx);

        return angle;

    }

}