アニメーション用のJavaFX 2円のパス

Question

円（または楕円）を作成するにはjavafx.scene.shape.PathをJavaFX 2で作成しますか？

私はCubicCurveToを使用していくつかの例を見つけた：

Path path = new Path(); 
path.getElements().add(new CubicCurveTo(30, 10, 380, 120, 200, 120)); 

が、私はベジェ座標ことを理解していません。私はアニメーションのための完全な円のパスが必要です。

Answer 1

あなたは円または楕円パスを描画するためにArcToパス要素を利用することができますArcToの機能の

public class ArcToDemo extends Application { 

    private PathTransition pathTransitionEllipse; 
    private PathTransition pathTransitionCircle; 

    private void init(Stage primaryStage) { 
     Group root = new Group(); 
     primaryStage.setResizable(false); 
     primaryStage.setScene(new Scene(root, 600, 460)); 

     // Ellipse path example 
     Rectangle rect = new Rectangle(0, 0, 40, 40); 
     rect.setArcHeight(10); 
     rect.setArcWidth(10); 
     rect.setFill(Color.ORANGE); 
     root.getChildren().add(rect); 

     Path path = createEllipsePath(200, 200, 50, 100, 45); 
     root.getChildren().add(path); 

     pathTransitionEllipse = PathTransitionBuilder.create() 
       .duration(Duration.seconds(4)) 
       .path(path) 
       .node(rect) 
       .orientation(OrientationType.ORTHOGONAL_TO_TANGENT) 
       .cycleCount(Timeline.INDEFINITE) 
       .autoReverse(false) 
       .build(); 


     // Cirle path example 

     Rectangle rect2 = new Rectangle(0, 0, 20, 20); 
     rect2.setArcHeight(10); 
     rect2.setArcWidth(10); 
     rect2.setFill(Color.GREEN); 
     root.getChildren().add(rect2); 

     Path path2 = createEllipsePath(400, 200, 150, 150, 0); 
     root.getChildren().add(path2); 

     pathTransitionCircle = PathTransitionBuilder.create() 
       .duration(Duration.seconds(2)) 
       .path(path2) 
       .node(rect2) 
       .orientation(OrientationType.ORTHOGONAL_TO_TANGENT) 
       .cycleCount(Timeline.INDEFINITE) 
       .autoReverse(false) 
       .build(); 
    } 

    private Path createEllipsePath(double centerX, double centerY, double radiusX, double radiusY, double rotate) { 
     ArcTo arcTo = new ArcTo(); 
     arcTo.setX(centerX - radiusX + 1); // to simulate a full 360 degree celcius circle. 
     arcTo.setY(centerY - radiusY); 
     arcTo.setSweepFlag(false); 
     arcTo.setLargeArcFlag(true); 
     arcTo.setRadiusX(radiusX); 
     arcTo.setRadiusY(radiusY); 
     arcTo.setXAxisRotation(rotate); 

     Path path = PathBuilder.create() 
       .elements(
       new MoveTo(centerX - radiusX, centerY - radiusY), 
       arcTo, 
       new ClosePath()) // close 1 px gap. 
       .build(); 
     path.setStroke(Color.DODGERBLUE); 
     path.getStrokeDashArray().setAll(5d, 5d); 
     return path; 
    } 

    @Override 
    public void start(Stage primaryStage) throws Exception { 
     init(primaryStage); 
     primaryStage.show(); 
     pathTransitionEllipse.play(); 
     pathTransitionCircle.play(); 
    } 

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

良いの参照がArcTo (JavaFX 8)です。バージョン8であるにもかかわらず、機能の意味は似ています。
出力：

Answer 2

私は、コンテナのrotatePropertyの動画で同じ問題を解決しました。アニメーションを作成するためのわずか2行。

animationTimeLine = new Timeline(60, new KeyFrame(Duration.seconds(5), new KeyValue(circlePane.rotateProperty(), 360.0))); 

    animationTimeLine.setCycleCount(INDEFINITE);