javafxのシーングラフ「カメラ」の中央に配置する方法

Question

私は2つの円があるグループを持っています。私は翻訳の遷移でそれらの1つを動かすと、固定されたものが中央に残りますシーングラフ）、もう一方は動く。その代わりに、「カメラ」が動いている円に沿って動いているので、両方が離れているように見えます。

カメラを0,0の中心に置く方法はありますか？円に沿ってではなく、そのままにする方法はありますか？

import javafx.animation.Interpolator; 
import javafx.animation.TranslateTransition; 
import javafx.application.Application; 
import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.scene.layout.BorderPane; 
import javafx.scene.paint.Color; 
import javafx.scene.shape.Circle; 
import javafx.stage.Stage; 
import javafx.util.Duration; 

public class Test extends Application 
{ 
public static void main(String[] args) 
{ 
    launch(args); 
} 

public void start(Stage stage) 
{ 
    BorderPane root = new BorderPane(); 
    root.setStyle("-fx-background-color: Black"); 
     Group graph = new Group(); 
     root.setCenter(graph); 
     graph.setLayoutX(250); 
     graph.setLayoutY(250); 

     Circle circle = new Circle(0,0,5); 
     circle.setFill(Color.ORANGE); 
     graph.getChildren().add(circle); 

     Circle circle2 = new Circle(0, 0, 5); 
     circle2.setFill(Color.AQUA); 
     graph.getChildren().add(circle2); 

    TranslateTransition t = new TranslateTransition(Duration.millis(1000), circle); 
    t.setFromX(0); 
    t.setToX(100); 
    t.setFromY(0); 
    t.setToY(0); 

    t.setInterpolator(Interpolator.LINEAR); 
    t.play(); 

    stage.setTitle("Circle Test"); 
    stage.setScene((new Scene(root, 500, 500))); 
    stage.show(); 
} 
} 

Answer 1

ここレイアウトで何が起こっているのかを理解するには、最初のノートあなたがレイアウトコンテナー（BorderPane）でを置くためGroup のレイアウト座標は、完全に無視されていること。 （setLayoutXとsetLayoutYの行をコメントアウトすると、違いはありません）。レイアウトコンテナは、その子ノードのサイズを1に応じて調整します。そのノードのスペース量、2.子ノードのmin、preferred、およびmaxサイズ。 BorderPaneはこの例では他の子ノードを持たないため、利用可能なすべての領域をに割り当てる必要があります。 が中心にあるので、スペースがあればそれに割り当てることはできません。スペースの残りの部分を使用せずに、スペースを中央に配置します。

Group sが（Control秒、Pane秒、およびそれらのサブクラスを含む）にRegion秒に異なる動作を：彼らは彼らの子供の集団境界上サイズ変更可能ではないとテイクですdocumentationによります。アニメーションの開始時に

、両方の円は、一致(0,0)を中心と半径5と次のとおりである：彼らのバウンディングボックス（とGroupの結果、バウンディングボックス）が(-5,-5)と幅と10の高さで左上隅を持っています。この四角形10x10の境界ボックスは大きくすることはできません（サイズ変更不可のGroupです）。画面中央に配置します。 BorderPaneには500ピクセルの利用可能な幅がありますので、Groupの両側に均等に分割して中央に配置すると、右側に245、右側には245の幅があり、使用されていない幅のピクセルは490です。したがって、両方の円の左端であるGroupの左端はBorderPane座標系のx=245にあります。他の右に100画素を翻訳されているので、そのバウンディングボックスが(95, -5)から(105, 5)に延びているアニメーションの終了時

一円は、幅10x10と(-5,-5)のままです。その結果、Groupのバウンディングボックスは、その子ノードの集合境界を占め、(-5, -5)、幅が110、高さが10の左上があります。このボックスのサイズを変更することはできませんので、BorderPaneのレイアウトメカニズムは、このボックスを使用可能な領域の中央に配置します。BorderPaneの幅は500ピクセルであるため、左右に均等に分割された未使用ピクセル390個があります（Groupの左側に195、右側に195）。この時点で、Groupの左端は翻訳されていない円の左端であり、BorderPane座標系のx=195にあります。その結果、アニメーションが終了すると、BorderPaneの座標系では、未翻訳の円が50ピクセル（翻訳距離の半分）だけ左に移動しています。

もっと自然なことはGroupの代わりにPaneを使用することです。 Paneはサイズ変更が可能ですので、BorderPaneは利用可能なすべての領域を埋めるように拡張します。したがって、それはBorderPaneの左上にあり、BorderPaneを記入します。 Paneの境界は(0,0)から始まり、その幅と高さに及ぶ。したがって、GroupをPaneに変更するだけで、アニメーション中に翻訳されていない円は移動しません。

ただし、円は中心の代わりに枠の左上に開始されます。あなたがそれらを中心に開始したい場合は、円そのものの座標を変更することができますので、彼らは(250, 250)を中心に開始します。別の方法として

import javafx.animation.Interpolator; 
import javafx.animation.TranslateTransition; 
import javafx.application.Application; 
import javafx.scene.Scene; 
import javafx.scene.layout.BorderPane; 
import javafx.scene.layout.Pane; 
import javafx.scene.paint.Color; 
import javafx.scene.shape.Circle; 
import javafx.stage.Stage; 
import javafx.util.Duration; 

public class Test extends Application { 
    public static void main(String[] args) { 
     launch(args); 
    } 

    public void start(Stage stage) { 
     BorderPane root = new BorderPane(); 
     root.setStyle("-fx-background-color: Black"); 
     Pane graph = new Pane(); 
     root.setCenter(graph); 
     // graph.setLayoutX(250); 
     // graph.setLayoutY(250); 

     Circle circle = new Circle(250, 250, 5); 
     circle.setFill(Color.ORANGE); 
     graph.getChildren().add(circle); 

     Circle circle2 = new Circle(250, 250, 5); 
     circle2.setFill(Color.AQUA); 
     graph.getChildren().add(circle2); 

     TranslateTransition t = new TranslateTransition(Duration.millis(1000), circle); 
     t.setFromX(0); 
     t.setToX(100); 
     t.setFromY(0); 
     t.setToY(0); 

     t.setInterpolator(Interpolator.LINEAR); 
     t.play(); 

     stage.setTitle("Circle Test"); 
     stage.setScene((new Scene(root, 500, 500))); 
     stage.show(); 
    } 
} 

、あなたは代わりに、ルートとしてPaneを使用することができますBorderPane。プレーンPaneはレイアウトを行わないため、この場合はlayoutXとlayoutYの設定が有効になります。したがって、サークルの中心を(0,0)に戻して、のレイアウト設定を使用して中心に配置できます。

import javafx.animation.Interpolator; 
import javafx.animation.TranslateTransition; 
import javafx.application.Application; 
import javafx.scene.Scene; 
import javafx.scene.layout.BorderPane; 
import javafx.scene.layout.Pane; 
import javafx.scene.paint.Color; 
import javafx.scene.shape.Circle; 
import javafx.stage.Stage; 
import javafx.util.Duration; 

public class Test extends Application { 
    public static void main(String[] args) { 
     launch(args); 
    } 

    public void start(Stage stage) { 
     Pane root = new Pane(); 
     root.setStyle("-fx-background-color: Black"); 
     Pane graph = new Pane(); 
     root.getChildren().add(graph); 
     graph.setLayoutX(250); 
     graph.setLayoutY(250); 

     Circle circle = new Circle(0, 0, 5); 
     circle.setFill(Color.ORANGE); 
     graph.getChildren().add(circle); 

     Circle circle2 = new Circle(0, 0, 5); 
     circle2.setFill(Color.AQUA); 
     graph.getChildren().add(circle2); 

     TranslateTransition t = new TranslateTransition(Duration.millis(1000), circle); 
     t.setFromX(0); 
     t.setToX(100); 
     t.setFromY(0); 
     t.setToY(0); 

     t.setInterpolator(Interpolator.LINEAR); 
     t.play(); 

     stage.setTitle("Circle Test"); 
     stage.setScene((new Scene(root, 500, 500))); 
     stage.show(); 
    } 
} 

Answer 2

クラス名は任意に変更できます。

問題は、自動的に中心をペインの中央にする方法setCenter()によって追加したことでした。

時間が来たことを願っています。

import javafx.animation.Interpolator; 
import javafx.animation.TranslateTransition; 
import javafx.application.Application; 
import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.scene.layout.BorderPane; 
import javafx.scene.paint.Color; 
import javafx.scene.shape.Circle; 
import javafx.stage.Stage; 
import javafx.util.Duration; 

public class NewClass extends Application { 

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

    public void start(Stage stage) { 
     BorderPane root = new BorderPane(); 
     root.setStyle("-fx-background-color: #efefef"); 
     Group graph = new Group(); 
     root.getChildren().add(graph); 
     graph.setLayoutX(250); 
     graph.setLayoutY(250); 

     Circle circle = new Circle(0, 0, 5); 
     circle.setFill(Color.ORANGE); 
     graph.getChildren().add(circle); 

     Circle circle2 = new Circle(0, 0, 5); 
     circle2.setFill(Color.AQUA); 
     graph.getChildren().add(circle2); 

     TranslateTransition t = new TranslateTransition(Duration.millis(1000), circle); 
     t.setFromX(0); 
     t.setToX(100); 
     t.setFromY(0); 
     t.setToY(0); 

     t.setInterpolator(Interpolator.LINEAR); 
     t.setCycleCount(5); 
     t.play(); 

     stage.setTitle("Circle Test"); 
     stage.setScene((new Scene(root, 500, 500))); 
     stage.show(); 
    } 
}