0

I am writing a javafx application in which I want to put a rectangle in a specific place ( coordinates 100, 100) and I want its width to increase on the left side of the rectangle. (I wish to use anchor pane in my program.) This is the code I have, I brought it from this link:

JavaFX rectangle width animation

public class RectangleWidthAnimation extends Application{
    @Override
    public void start(Stage primaryStage) throws Exception {
        Rectangle statusBar = new Rectangle(300, 100);
        Button animationButton = new Button("Animate width increase by 25");
        animationButton.setOnAction(event -> {
            System.out.println("Animation start: width = " + statusBar.getWidth());
            KeyValue widthValue = new KeyValue(statusBar.widthProperty(), statusBar.getWidth() + 25);
            KeyFrame frame = new KeyFrame(Duration.seconds(2), widthValue);
            Timeline timeline = new Timeline(frame);
            timeline.play();
            timeline.setOnFinished(finishedEvent -> System.out.println("Animation end: width = " + statusBar.getWidth()));
        });

        VBox container = new VBox(10, statusBar, animationButton);

        container.setAlignment(Pos.CENTER_RIGHT);

        primaryStage.setScene(new Scene(container, 350, 150));
        primaryStage.show();
    }
}

What I want to change is that I don't want to combine animationButton and statusBar together. I want to have control over the statusbar itself. So I just put this instead:

VBox container = new VBox(statusBar);
container.setLayoutX(100);
container.setLayoutY(100);
container.setAlignment(Pos.CENTER_RIGHT);
primaryStage.setScene(new Scene(new Group(container, animationButton), 350, 150));

But when I do this, the rectangle width increases from the right side, which is not what I want. ( I want the width to increase from left side. In other words, I want to fix the upper right coordinate of the rectangle and make it seem that the upper left coordinate of the rectangle is moving leftwards.)

The first code makes statusBar grow to the left but both statusBar and animationButton are inside one Vbox(container). But I want to put statusBar in a single VBox or HBox and apply the previous code again. I tried this code but it strangely makes the statusBar grow to the right.

public class RectangleWidthAnimation extends Application {
    @Override
    public void start(Stage primaryStage) throws Exception {
        Rectangle statusBar = new Rectangle(300, 100);
        Button animationButton = new Button("Animate width increase by 25");
        animationButton.setOnAction(event -> {
            System.out.println("Animation start: width = " + statusBar.getWidth());
            KeyValue widthValue = new KeyValue(statusBar.widthProperty(), statusBar.getWidth() + 25);
            KeyFrame frame = new KeyFrame(Duration.seconds(0.4), widthValue);
            Timeline timeline = new Timeline(frame);
            timeline.play();
            timeline.setOnFinished(finishedEvent -> System.out.println("Animation end: width = " + statusBar.getWidth()));
        });
        VBox container = new VBox(statusBar);
        container.setLayoutX(100);
        container.setLayoutY(100);
        container.setAlignment(Pos.CENTER_RIGHT);
 AnchorPane anchorPane = new AnchorPane();
        anchorPane.getChildren().add(container);
        anchorPane.getChildren().add(animationButton);
        primaryStage.setScene(new Scene(anchorPane, 500, 350));
        primaryStage.show();
    }
}

Any suggestions on how to solve this?

Wanderer
  • 21
  • 5
  • Sounds like you'll want to use an [AnchorPane](https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/AnchorPane.html)? – Zephyr Jul 04 '21 at 21:38
  • 1
    It's not really clear what the issue is. The code in your first code block does what you describe; the rectangle is aligned to the right of the `VBox` and so it grows to the left. I don't really understand what the code in the second block is supposed to do (or even perhaps what it's supposed to replace). Why are you using a `Group`? And surely `new Group(container, container)` just throws an exception. – James_D Jul 04 '21 at 23:46
  • In the first code, the rectangle does grow to the left, because it is aligned to right. But the container includes both animationButton and statusBar, which is not what I want. I just want to put a single statusBar in a Vbox or Hbox and do the same thing, but it strangely grows to the right. ( The second code I put ) And yes, that should be "new Group(container, animationButton)" , I edited the post. ( I am also using anchorpane in my program. ) – Wanderer Jul 05 '21 at 05:12
  • OK, so just take the first code block and remove the `animationButton`. It's (obviously) the `Group` that is changing the layout. So don't use a `Group`. – James_D Jul 05 '21 at 11:49
  • But in that case, there will be only the rectangle in the scene. I am using anchorpane and I want to seperately add statusBar and animationButton. Is there a way I can add statusBar to anchorpane that doesn't change the layout? ( I edited my post and I want to have sth similar to second code which has anchorpane. ) I mean actually I have an anchorpane which has other nodes inside it too, so I need to somehow add the statusBar without changing its layout. – Wanderer Jul 05 '21 at 12:17
  • The `VBox` is going to be sized to contain its content. So as the rectangle grows, the `VBox` will grow too, to be just large enough to hold the rectangle. If you set the `layoutX` of the `VBox` to `100`, then the left edge of the `VBox` will always be at `100`, and as the rectangle grows it will expand to the right. Possible solutions, depending on what you really want, are to set a right anchor on the `VBox` instead of setting `layoutX`, or set the preferred width: `container.setPrefWidth(325)`. – James_D Jul 05 '21 at 13:15

0 Answers0