Layout using the transformed bounds

问题

I have scaled a node in a Pane. But the layout of the Pane take into account the bounds without any transformation. I want it to take into account the transformed bounds.

For example :

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

A solution could be to apply translations on the circle and on the label, but this way seems too hard for doing a so simple thing, and using a Pane(HBox) seems more painful than using a basic Group with an hardcoded layout.

回答1:

I found the answer in the post JavaFX1.2: Understanding Bounds :

If you want layoutBounds to match a node's physical bounds (including effects, clip, and transforms) then wrap it in a Group (ex. if you want a node to scale up on mouse-over and you want its neighbors to scoot over to make room for the magnified node).

So for solving 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.

回答2:

If you change set the layoutX and layoutY Properties after calling the stage's 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

As the node's width is not changed by the scaling (check Node.getLayoutBounds()).

来源：https://stackoverflow.com/questions/17699623/layout-using-the-transformed-bounds