JavaFX拖动旋转节点

Question

In JavaFX I'm trying to move a node by clicking and dragging it. It works well if the node isn't rotated, but when i rotate it it starts to behave weirdly.

At around 45° it starts to jitter when I move it, at 60° it jerks back and forth violently. And at 90° the Node flies of the screen as soon as I start to move it.

Here is the code that I use to rotate and move the node. It's from a MouseListener connected to the node.

if( event.getEventType() == MouseEvent.MOUSE_RELEASED) {
    ( this.lastEvent == MouseEvent.MOUSE_PRESSED ) {
        if(getRotate() == 0) {
            setRotate(90d);
        } else {
            setRotate(0d);
        }
    }
}
if( event.getEventType() == MouseEvent.MOUSE_DRAGGED ) {
    if(getRotate() == 0) {
        setTranslateX( getTranslateX() + event.getX() );
        setTranslateY( getTranslateY() + event.getY() );
        System.out.print(" trX: " + getTranslateX());
        System.out.print(" evX: " + event.getX());
        System.out.println(" evY: " + event.getY());
    } else {
        setTranslateX(getTranslateX() + event.getX() );
        setTranslateY(getTranslateY() + event.getY() );
        System.out.print(" trX: " + getTranslateX());
        System.out.print(" evX: " + event.getX());
        System.out.println(" evY: " + event.getY());
    }
}

---

Edit: Here is some sample output, as well as picture showing the different nodes.

Output when not rotated and moving slowly to the left:

 trX: 333.0 evX: -1.0 evY: 0.0
 trX: 333.0 evX: 0.0 evY: -1.0
 trX: 332.0 evX: -1.0 evY: 0.0
 trX: 332.0 evX: 0.0 evY: -1.0
 trX: 331.0 evX: -1.0 evY: 0.0
 trX: 330.0 evX: -1.0 evY: -1.0
 trX: 330.0 evX: 0.0 evY: 1.0

Output when moving slowly to the left while rotated:

 trX: 102.0 evX: 142.0 evY: -245.0
 trX: 489.0 evX: 387.0 evY: -102.0
 trX: 978.0 evX: 489.0 evY: 286.0
 trX: 1181.0 evX: 203.0 evY: 776.0
 trX: 607.0 evX: -574.0 evY: 979.0
 trX: -947.0 evX: -1554.0 evY: 405.0
 trX: -2905.0 evX: -1958.0 evY: -1149.0
 trX: -3714.0 evX: -809.0 evY: -3106.0
 trX: -1417.0 evX: 2297.0 evY: -3914.0
 trX: 4795.0 evX: 6212.0 evY: -1617.0
 trX: 12623.0 evX: 7828.0 evY: 4595.0
 trX: 15857.0 evX: 3234.0 evY: 12423.0
 trX: 6668.0 evX: -9189.0 evY: 15658.0
 trX: -18180.0 evX: -24848.0 evY: 6469.0
 trX: -49497.0 evX: -31317.0 evY: -18378.0
 trX: -62436.0 evX: -12939.0 evY: -49694.0
 trX: -25681.0 evX: 36755.0 evY: -62632.0
 trX: 73706.0 evX: 99387.0 evY: -25876.0
 trX: 198969.0 evX: 125263.0 evY: 73512.0
 trX: 250720.0 evX: 51751.0 evY: 198776.0
 trX: 103694.0 evX: -147026.0 evY: 250526.0
 trX: -293858.0 evX: -397552.0 evY: 103501.0
 trX: -794910.0 evX: -501052.0 evY: -294051.0
 trX: -1001912.0 evX: -207002.0 evY: -795103.0
 trX: -413811.0 evX: 588101.0 evY: -1002104.0

And here is aa picture of the program:

The outer box is the 'parent' Node, while the inner black box with the text "Not a Gnome" is the node I'm trying to move. The mouse event listener is added to the inner node.

Answer 1

I finally came up with a solution myself.

Instead of moving the Node based on where the mouse is based on its position the instance before, I now calculate how much it has changed with coordinates from the scene.

Here is the updated code, everything about context is the same as in the question.

if( event.getEventType() == MouseEvent.MOUSE_PRESSED ) {
    this.mouseInSceneX = event.getSceneX();
    this.mouseInSceneY = event.getSceneY();

    Card.this.setCursor(Cursor.MOVE);
}
if( event.getEventType() == MouseEvent.MOUSE_DRAGGED ) {
    double xChange = event.getSceneX() - mouseInSceneX;
    double yChange = event.getSceneY() - mouseInSceneY;

    setTranslateX(getTranslateX() + xChange);
    setTranslateY(getTranslateY() + yChange);

    mouseInSceneX = event.getSceneX();
    mouseInSceneY = event.getSceneY();

    System.out.print(" trX: " + Card.this.getTranslateX());
    System.out.print(" trY: " + Card.this.getTranslateY());
    System.out.print(" cgpX: " + mouseInSceneX);
    System.out.print(" cgpY: " + mouseInSceneY);
    System.out.println(); 
}