एनीमेशन के लिए जावाएफएक्स 2 सर्कल पथ

Question

मैं JavaFX 2 में सर्कल (या अंडाकार) javafx.scene.shape.Path कैसे बना सकता हूं?

मैं कुछ CubicCurveTo के उपयोग के उदाहरण मिल गया है:

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

लेकिन मुझे समझ नहीं आता कि Bézier समन्वय करता है। मुझे एनिमेशन के लिए एक पूर्ण सर्कल पथ चाहिए।

Answer 1

आप वृत्त या अंडाकार पथ आकर्षित करने के लिए 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 की विशेषताओं में से अच्छा संदर्भ ArcTo (JavaFX 8) है। हालांकि यह संस्करण 8 है, सुविधाओं का अर्थ समान है।
आउटपुट:

Answer 2

मैं कंटेनर के rotateProperty का एनीमेशन द्वारा एक ही समस्या हल हो। एनीमेशन बनाने के लिए बस दो लाइनें।

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

    animationTimeLine.setCycleCount(INDEFINITE);