JavaFX 2 animasyon için daire yolu

Question

JavaFX 2'de bir daire (veya elips) javafx.scene.shape.Path nasıl oluşturabilirim?

Ben CubicCurveTo kullanarak bazı örnekler bulduk:

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

ama Bézier koordinatları anlamıyorum. Animasyonlar için tam bir çevre yoluna ihtiyacım var.

Answer 1

Sen çember veya elips yolunu çizmek için ArcTo yol elementi yararlanabilirler: ArcTo özelliklerinden

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); 
    } 
} 

İyi referans ArcTo (JavaFX 8) olduğunu. Her ne kadar sürüm 8, özelliklerin anlamları benzerdir.
Çıkış:

Answer 2

bir kabın rotateProperty canlandırılmasıyla aynı sorun çözüldü. Animasyon oluşturmak için sadece iki satır.

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

    animationTimeLine.setCycleCount(INDEFINITE);