Transformed Border Layout

Question

I scaled a node in the panel. But the panel layout takes into account borders without any transformation. I want it to take into account the transformed boundaries.

For instance:

And the code:

import javafx.application.Application; import javafx.geometry.Pos; import javafx.scene.Scene; import javafx.scene.control.Label; import javafx.scene.layout.HBox; import javafx.scene.layout.VBox; import javafx.scene.shape.Circle; import javafx.scene.transform.Scale; import javafx.scene.transform.Translate; import javafx.stage.Stage; public class HBoxApp extends Application { public static void main(String[] args) { launch(args); } @Override public void start(Stage stage) throws Exception { double scale = 0.75; HBox box1 = createBox(); box1.getChildren().add(new Circle(20)); box1.getChildren().add(new Label("Test without any scale")); HBox box2 = createBox(); Circle c2 = new Circle(20); c2.setScaleX(scale); c2.setScaleY(scale); box2.getChildren().add(c2); box2.getChildren().add(new Label("Test with the setScaleX/Y methods")); HBox box3 = createBox(); Circle c3 = new Circle(20); c3.getTransforms().add(new Scale(scale, scale)); box3.getChildren().add(c3); box3.getChildren().add(new Label("Test with the Scale transform")); HBox box4 = createBox(); Circle c4 = new Circle(20); c4.getTransforms().addAll(new Scale(scale, scale), new Translate(-20*(1-scale), 0)); box4.getChildren().add(c4); box4.getChildren().add(new Label("Test with the Scale and Translate transform")); HBox box5 = createBox(); box5.getChildren().add(new Circle(20 * scale)); box5.getChildren().add(new Label("My Goal")); VBox vBox = new VBox(10); vBox.getChildren().addAll(box1, box2, box4, box5); stage.setScene(new Scene(vBox, 300, 200)); stage.show(); } private HBox createBox() { HBox box = new HBox(5); box.setAlignment(Pos.CENTER_LEFT); return box; } } 

The solution may be to use translations in a circle and on a label, but this method seems too complicated to do such a simple thing, and using Pane ( HBox ) seems more painful than using a basic Group with a hard-coded layout.

Answer 1

I found the answer in a JavaFX1.2 post: Understanding Boundaries :

If you want the layoutBounds to match the physical boundaries of the node (including effects, a clip, and transforms), then wrap it in a group (for example, if you want the node to grow when you hover over it and you want its neighbors to shoot to make room for enlarged node).

So, to solve my problem, I wrote:

 ... HBox box5 = createBox(); Circle c5 = new Circle(20); c5.setScaleX(scale); c5.setScaleY(scale); box5.getChildren().add(new Group(c5)); box5.getChildren().add(new Label("Test with the Scale transform and a group")); ... 

and I got the expected result.

Answer 2

If you changed the settings for the layoutX and layoutY properties after calling the show show method, you could achieve the same effect.

  ... stage.show(); c2.setLayoutX(c2.getLayoutX()-c2.getRadius()*(1-c2.getScaleX())); } 

Or Translate it:

 c2.getTransforms().add(new Translate(-c2.getRadius()*(1-c2.getScaleX()), 0)); //Replace getScaleX() with scale for c3 

Since the width of the node does not change with scaling (check Node.getLayoutBounds () ).