JavaFX Changing the pivot rotation makes the rectangle jump

Question

I'd want to drag the pivot on a rectangle rotation. I did the rectangle rotate around the new pivot but the rectangle makes a jump. I guess I need also to make a translation on the rectangle but don't know how. I'd want the rectangle to stand still in his previous position for the next rotation. Help please and thank you.

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Line;
import javafx.scene.shape.Rectangle;
import javafx.scene.transform.Rotate;
import javafx.stage.Stage;

import java.io.IOException;

public class T5_4_Rotar_PivotXY_2 extends Application {

    double anguloFinal = 0;
    double pivoteX = 250; // initial rotate pivotX
    double pivoteY = 150; // initial rotate pivotY

    @Override
    public void start(Stage stage) throws IOException {

        Pane pane = new Pane();
        Scene scene = new Scene(pane,500,500);

        double x0 = 50;
        double y0 = 50;
        double ancho = 200; // width
        double alto = 100; // height
        Rectangle r = new Rectangle(x0, y0, ancho, alto);
        r.setFill(Color.YELLOW);

        // pivot simbol
        Circle circle1 = new Circle(pivoteX,pivoteY,4);
        circle1.setFill(Color.TRANSPARENT);
        circle1.setStroke(Color.BLACK);
        Line line1 = new Line(pivoteX-6,pivoteY,pivoteX+6,pivoteY);
        Line line2 = new Line(pivoteX,pivoteY-6,pivoteX,pivoteY+6);
        Group centro = new Group(circle1,line1,line2);

        pane.getChildren().addAll(r,centro);

        Rotate rotacion = new Rotate();
        rotacion.setPivotX(pivoteX);
        rotacion.setPivotY(pivoteY);

        r.getTransforms().add(rotacion);


        // Rotation event
        pane.setOnMousePressed(e1 -> {

            pane.setOnMouseDragged(e2 -> {

                double anguloPressed = Math.toDegrees(Math.atan2((e1.getSceneY() - pivoteY),(e1.getSceneX() - pivoteX))); 
                double anguloDragged = Math.toDegrees(Math.atan2((e2.getSceneY() - pivoteY),(e2.getSceneX() - pivoteX))); 
                double angulo = anguloDragged - anguloPressed + anguloFinal;

                rotacion.setAngle(angulo);

                pane.setOnMouseReleased(e3 -> {
                    anguloFinal = angulo;
                });
            });
        });

        // Dragging the pivot
        centro.setOnMousePressed(e1 -> {

            centro.setOnMouseDragged(e2 -> {
                centro.setTranslateX(e2.getSceneX() - e1.getSceneX());
                centro.setTranslateY(e2.getSceneY() - e1.getSceneY());
                e2.consume();

                centro.setOnMouseReleased(e3 -> {
                    centro.setLayoutX(centro.getLayoutX() + centro.getTranslateX());
                    centro.setLayoutY(centro.getLayoutY() + centro.getTranslateY());
                    centro.setTranslateX(0);
                    centro.setTranslateY(0);

                    // new pivot
                    pivoteX = centro.getLayoutX() + 250;
                    pivoteY = centro.getLayoutY() + 150;

                    rotacion.setPivotX(pivoteX);
                    rotacion.setPivotY(pivoteY);

                    // some rectangle translation here, correct? Help please.

                });
            });
        });

        stage.setTitle("T5 4 Rotate PivotXY 2");
        stage.setScene(scene);
        stage.show();
    }

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

Answer 1

+1 for all the points what @jewelsea mentioned in comments. I believe the main problem for your issue lies when you update the pivotX/Y of rotation.

Currently the behavior is:

• You have the default pivotX/Y (lets say px and py) and when you drag the pane you calculate and update the angle (lets say r0) to the rotation. And your Rectangle rotates with this parameters (px, py, r0).

• Now when you finish draging your pivot to new point, you are calculating the new pivotX/Y. (So far so good.., lets say px1,py1) And updating to rotation transform.

Now the rotation transform parameters are (px1, py1, r0). This is where your issues lies.. You have new pivotX/Y values with old angle r0(computed from px & py).

So when you apply the new pivot values, it is doing correctly using the values px1, py1 and r0.

So my question is: how you are expecting the rectangle to behave when a new pivot value is updated? Do you want the rectangle to be in same position ? Or do you want the rectangle move along with the pivot, to maintain the same rotation?