在JavaFX中添加到組的路徑轉換

Question

我正在編寫一些javaFX代碼，並且我已經向組添加了一些路徑，該組已添加到已添加到根的另一組中，並且正在屏幕上顯示。現在，我希望使用PathTransition將這個最低級別的組動畫到一個新的位置。我無法爲轉換找出正確的座標。我已經讀過PathTransition將從其中心點動畫化節點，而不是左上角，所以我嘗試將Group.getLayoutX（）/ 2添加到起始x和Group.getLayoutY（）/ 2到起始y座標中但它似乎仍然使該組在動畫開始之前跳到新的起始位置。 最終的目的地似乎也有點關閉。 是否有更好的方法來爲包含多個路徑的組設置動畫效果？

Answer 1

根據路徑的節點的一半佈局邊界調整layoutX和layoutY的路徑。

rect.setLayoutX(rect.getLayoutX() + rect.getLayoutBounds().getWidth()/2); 
rect.setLayoutY(rect.getLayoutY() + rect.getLayoutBounds().getHeight()/2); 

---

從JavaFX 2 circle path for animation嘗試的Uluk的圈子路徑轉換代碼的修改。

代碼將在節點原始佈局的左上角遵循路徑。

import javafx.animation.PathTransition.OrientationType; 
import javafx.animation.*; 
import javafx.application.Application; 
import javafx.scene.*; 
import javafx.scene.paint.Color; 
import javafx.scene.shape.*; 
import javafx.stage.Stage; 
import javafx.util.Duration; 

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.NONE) 
       .cycleCount(Timeline.INDEFINITE) 
       .autoReverse(false) 
       .build(); 

     rect.setLayoutX(rect.getLayoutX() + rect.getLayoutBounds().getWidth()/2); 
     rect.setLayoutY(rect.getLayoutY() + rect.getLayoutBounds().getHeight()/2); 

     // Circle 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.NONE) 
       .cycleCount(Timeline.INDEFINITE) 
       .autoReverse(false) 
       .build(); 

     rect2.setLayoutX(rect2.getLayoutX() + rect2.getLayoutBounds().getWidth()/2); 
     rect2.setLayoutY(rect2.getLayoutY() + rect2.getLayoutBounds().getHeight()/2); 
    } 

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

---

實現注意

1. 的代碼假定正在動畫節點的原始佈局位置是0,0（如果它不是，那麼你將需要相應調整）。
2. 對於非方形節點，節點和路徑之間存在細微的間隙（因爲計算是基於佈局邊界矩形而不是節點的可見形狀）。
3. 此外，路徑轉換使用的方向爲NONE而不是ORTHOGONAL_TO_TANGENT（否則佈局計算在節點開始旋轉時會產生奇怪的效果，並且好像節點正在向路徑發散）。

取而代之的是上面的方法，可以使節點的角落遵循的路徑，而不是中心，並沒有修改節點的定義Transition一個自定義的子類，修改節點的TranslateX和TranslateY性質佈局是必需的，但是這將是更多的工作。