Rotating image affects location

Question

Following up on the animated half image and placing labels on the curve I finally got the layout right. Though the curious thing is, when rotating the wheel, the control y position changes.
First I thought that this might be a similar effect, that could be solved with setting the inset, but that is not true.
My theory is that, as the image is square, when the square rotated by 45 degrees the height is larger. How can I counteract this. I tried to update the translateY property but that had no effect.

Answer 1

What I have figured out so far is the following: As the image is basically a rectangle, when rotating the square by 45° it's height is larger than unrotated. This application demonstrates it:
package javafxtest;
import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.geometry.Bounds;
import javafx.geometry.Point2D;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
public class RotatedClippedArea extends Application {
    @Override
    public void start(Stage stage) {
        stage.setTitle("Steering Wheel");
        Group root = new Group();
        Scene scene = new Scene(root, 1000, 350);
        scene.setFill(Color.LIGHTBLUE);
        HBox hBox = new HBox();
        hBox.setSpacing(10);
        //Group g = new Group(background);
        for (int i = 0; i<=90; i += 20) {
            VBox vbox = new VBox();
            SteeringWheelGroup background = new SteeringWheelGroup(200, i);
            Label angle = new Label("Angle: "+i+"°");
            final Label heigth = new Label("Heigth: "+background.getBoundsInLocal().getHeight()+"px");
            heigth.boundsInLocalProperty().addListener(new ChangeListener<Bounds>(){
                @Override
                public void changed(ObservableValue<? extends Bounds> ov, Bounds t, Bounds t1) {
                    heigth.setText("Heigth: "+t1.getHeight()+"px");
            vbox.getChildren().addAll(background, angle, heigth);
            hBox.getChildren().add(vbox);
        root.getChildren().addAll(hBox);
        stage.setScene(scene);
        stage.show();
    private Point2D calculateBasePoint(Point2D center, double radius,
            double angle) {
        float newX = (float) (center.getX() + radius * Math.cos(Math.toRadians(angle)));
        float newY = (float) (center.getY() + radius * Math.sin(Math.toRadians(angle)));
        return new Point2D(newX, newY);
    private class SteeringWheelGroup extends Group {
        private double scale;
        public SteeringWheelGroup(int destinationWidth, double angle) {
            //InputStream is = getClass().getResourceAsStream("SteeringWheel.png");
            //Image unscaled = new Image(is);
            Rectangle rect = new Rectangle(getImageWidth(), getImageWidth(), Color.RED);
            scale = destinationWidth / rect.getWidth();
            //ImageView steeringWheel = new ImageView(unscaled);
            rect.setScaleX(scale);
            rect.setScaleY(scale);
            rect.setRotate(angle);
            Group rotationGroup = new Group(rect);
            int width = getImageWidth();
            Rectangle clip = new Rectangle(0, 0, width, width / 2);
            rotationGroup.setClip(clip);
            this.getChildren().add(rotationGroup);
        public double getScale() {
            return scale;
        public final int getImageWidth() {
            return 479;
    public static void main(String[] args) {
        Application.launch(args);
This will create this application.
What seems inconsistent that the clipping initialized with half the height in the unrotated state, will always clip half the height. I would have expected to only get the the top 200 pixels of the image irrelevant of the current state of the rendering.
But the basic question is: How can I figure out the current height? The boundsInLayout will always return the same value. I could calculate the height of the visible part using the angle of the rotation but would like to avoid that.
If I get the current height I can apply a second clip which basically translated the the whole thing. While this may not make sense for this example, my use case involves an image with a centered circle, so the most top visible part of the image will always be at the same height above the (clipped) bottom line.