JavaFX - 小さな距離を動かすときにマウスの動きに追従する描画形状

Question

GraphicsContext2Dを使用して描画された三角形を、マウスの方向に向けて描画しようとしています。

距離が10以上のピクセルを移動しているときは、すてきで気品があります。しかし、小さな正確な距離を移動しているときには、マウスが正しく向き合っていないときには、形状が乱れてしまいます。

ゲーム：

public class Game extends Application { 

    final static private String GAME_NAME = "Trigon"; 
    final static private int WINDOW_WIDTH = 960; 
    final static private int WINDOW_HEIGHT = 640; 
    private PlayerShip ply; 

    @Override 
    public void start(Stage theStage) throws Exception { 
     // Set title of window & make root, canvas, graphics context 
     theStage.setTitle(GAME_NAME); 
     Group root = new Group(); 
     Scene theScene = new Scene(root, WINDOW_WIDTH, WINDOW_HEIGHT); 
     Canvas canvas = new Canvas(WINDOW_WIDTH, WINDOW_HEIGHT); 
     GraphicsContext gc = canvas.getGraphicsContext2D(); 
     theStage.setScene(theScene); 
     root.getChildren().add(canvas); 

     // Initialize game variables 
     ply = new PlayerShip(WINDOW_WIDTH/2, WINDOW_HEIGHT/2); 

     theScene.setOnMouseMoved(
      new EventHandler<MouseEvent>() { 
       @Override 
       public void handle(MouseEvent e) { 
        ply.setPos(e.getX(), e.getY()); 
       } 
      } 
     ); 

     new AnimationTimer() { 
      @Override 
      public void handle(long currentNanoTime) { 
       gc.setFill(Color.WHITE); 
       gc.fillRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT); 
       ply.draw(gc); 
      } 
     }.start(); 

     theStage.show(); 
    } 

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

} 

PlayerShip：

public class PlayerShip { 
    private double shipLength, shipWidth; 
    private double posX, posY, rotAngle; 

    public PlayerShip(double posX, double posY) { 
     this(posX, posY); 
    } 

    public PlayerShip(double posX, double posY) { 
     this.posX = posX; 
     this.posY = posY; 
     this.shipWidth = 30; 
     this.shipLength = 30; 
    } 

    public void setPos(double posX, double posY) { 
     double distX = posX - this.posX; 
     double distY = posY - this.posY; 
     rotAngle = Math.toDegrees(Math.atan2(distX, -distY)); 
     this.posX = posX; 
     this.posY = posY; 
    } 

    public void draw(final GraphicsContext gc) { 
     // Save 
     gc.save(); 

     // Translate + rotate 
     gc.translate(posX, posY); 
     gc.rotate(rotAngle); 

     // Draw ship 
     gc.beginPath(); 
     gc.moveTo(0, -shipLength/2); 
     gc.lineTo(shipWidth/2, shipLength/2); 
     gc.lineTo(-shipWidth/2, shipLength/2); 
     gc.lineTo(0, -shipLength/2); 
     gc.stroke(); 
     gc.closePath(); 

     // Restore 
     gc.restore(); 
    } 
} 

申し訳ありませんが、テキストのブロックのためか、私は重要な何かを忘れています。

Answer 1

これは、船舶の原点がマウスの位置に近すぎる場合に発生します。マウスの位置が少し変化すると、角度の変化が大きくなり、結果としてシャッター効果が発生します。

あなたは、マウスの場所に船を移動しないことで、この問題を解決するが、マウスに近い地点に移動することができます：

public void setPos(double posX, double posY) { 
    double distX = posX - this.posX; 
    double distY = posY - this.posY; 

    // movement distance 
    double magnitude = Math.sqrt(distX * distX + distY * distY); 

    if (magnitude > 5) { 
     // only move, if the distance is greater than 5 

     // factor to move to distance 5 
     double factor = (magnitude - 5)/magnitude; 

     this.posX += distX * factor; 
     this.posY += distY * factor; 
     rotAngle = Math.toDegrees(Math.atan2(distX, -distY)); 
    } 
}