JavaFX Timeline II: Verschieben einer ImageView

[hk]

Ich verschiebe mit Timeline eine ImageView um 10 Pixel. Das funktioniert und wird am Bildschirm korrekt angezeigt. Sehe ich mir nachher die Position des ImageView an (.getY()) so steht dort aber immer noch die ursprüngliche Position die nun aber falsch ist. Wie komme ich zu einer richtigen Position des ImageView?

 

[yfons123]

Das Problem ist dass das Update erst nach dem Frame passiert

du kannst einen ChangeEventhandler für die Y position schreiben und auf die New Value reagieren

 

[hk]

Das Problem ist dass das Update erst nach dem Frame passiert

du kannst einen ChangeEventhandler für die Y position schreiben und auf die New Value reagieren

Ich habe ein setOnFinished EventHandler und dort sind die Werte noch die Alten.
Auch wenn ich mir später (auf Klick) die Position ansehe ist sie noch die Alte obwohl sie am Schirm auf der richtigen Position steht.
Aber ich werde das probieren, Danke

 

[yfons123]

https://www.java-forum.org/thema/fenstergroesse-nach-maximieren-erkennen.199180/

hier war auch das problem mit dem Timing

 

[KonradN]

Es wäre wichtig, dass wir genaue Informationen bekommen, was getan wird.

Wenn Du ein setY aufrufst, dann wird ein nachfolgendes getY den neuen Wert zurück geben. Mögliche Probleme kommen nur, wenn Veränderungen asynchron ablaufen:

• Du rufst irgendwas auf. Dies triggert ein Event und im Rahmen des Eventhandlings ändert sich dann etwas
• Da im weiteren Code das Event noch nicht behandelt wurde, gibt es die Änderungen noch nicht
• irgendwann später wird dann das Event bearbeitet. Dann erst ändern sich die Werte,

Das aber nur als einfache Bescheibung worum in in dem anderen Thread ging. Was bei Dir ggf. falsch läuft können wir aber nur sagen, wenn wir den Code sehen. (Ideal ist immer etwas das auch übersetzt und das man selbst ausführen kann zum testen!)

 

[hk]

Es wäre wichtig, dass wir genaue Informationen bekommen, was getan wird.

Hier der Code:

  /**************************************************
   * Eine Schrittfolge links, rechts, links animieren
   */
  public void walkOn() {
//    step();
    makeOneStep(app.schuhOL, 0, -10, 500, 0);      //linker Schritt kurz
    makeOneStep(app.schuhOR, 0, -20, 1000, 500);   //rechter Schritt normal
//    makeOneStep(app.schuhOL, 0, -20, 1000, 1000);  //linker Schritt normal
  } //end walkOn *****************************************************

  /**************************
   * Eine Schritt durchführen
   *
   * @param imgV
   * @param x
   * @param y
   * @param dur : Durchlaufzeit
   * @param del : Wartezeit bis Start
   */
  private void makeOneStep(ImageView imgV, double x, double y, int dur,
          int del) {
    KeyValue kvX = new KeyValue(imgV.translateXProperty(), x);
    KeyValue kvY = new KeyValue(imgV.translateYProperty(), y);
    KeyFrame kf = new KeyFrame(Duration.millis(dur), kvX, kvY);
    Timeline tl = new Timeline(kf);
    tl.setCycleCount(1);
    tl.setAutoReverse(false); 
    tl.setDelay(Duration.millis(del));
    tl.setOnFinished(new EventHandler<ActionEvent>() {
      @Override
      public void handle(ActionEvent t) {
         System.out.println("X: " + newX + " Y: " + newY);    <-- URSPRÜNGLICHE POSITION
      }
    });
    tl.playFromStart();
  } //end makeOneStep *************************************************

 

[KonradN]

Wie sehen keine weiteren Stellen mit newX / newY: Wo sind dieser deklariert? Wann wird diesen etwas zugewiesen?

 

[hk]

Wie sehen keine weiteren Stellen mit newX / newY: Wo sind dieser deklariert? Wann wird diesen etwas zugewiesen?

Das ist ein Rest von meinen Versuchen die Position manuell nachträglich zu setzen. Siehe es als "System.out.println(imgV.getX(), imgV.getY())

 

[KonradN]

Also generell sehe ich mehrere Möglichkeiten:
a) Du nutzt die translate Properties. Schauen wir uns einfach einmal die Dokumentation an:

Node (JavaFX 8)

docs.oracle.com

The node's final translation will be computed as layoutX + translateX, where layoutX establishes the node's stable position and translateX optionally makes dynamic adjustments to that position.

This variable can be used to alter the location of a node without disturbing its layoutBounds, which makes it useful for animating a node's location.

==> Wenn Du also die layoutBounds auswertest (die layoutX Position), dann ist diese nicht verändert.

b) Wenn Du die richtige Abfrage gemacht haben solltest, dann kann natürlich das Problem auch sein, dass du die Variablen nur einmal setzt und danach nie wieder.

Generell kannst Du die Position einer Komponente in der Scene bekommen per:
Bounds boundsInScene = node.localToScene(node.getBoundsInLocal());

Node (JavaFX 8)

docs.oracle.com

Das ist ein Rest von meinen Versuchen die Position manuell nachträglich zu setzen. Siehe es als "System.out.println(imgV.getX(), imgV.getY())

Ok, dann dürfte a) das Problem sein. Hier evtl. noch kurz zu dem Verständnis:

• Du hast Elemente (Nodes), welche eine gewisse Position/Größe u.s.w. haben. Dies wird einmal festgelegt.
• Zur Anzeige wird dies aber weiter angepasst. Das sind dann unter dem Strich Transforms, die dann das Element verschieben, drehen, skalieren, ....

Was Du also da hast ist erst einmal nur die reine Basis-Angabe. Die Anpassungen machst Du ja über die Transformierung. Damit ändert sich nicht die Basis-Angabe sondern nur die Darstellung. Wenn Du jetzt wissen willst, wo der Node dargestellt wird, dann musst Du dies auch verarbeiten. getBoundsInLocal wäre da die erste Methode. Das ganze will man dann aber noch in einem einheitlichen Koordinatensystem haben, also z.B. in der Scene, daher vermutlich noch ein localToScene Aufruf.

 

[hk]

Generell kannst Du die Position einer Komponente in der Scene bekommen per:
Bounds boundsInScene = node.localToScene(node.getBoundsInLocal());

Soll ich diesen Code in den setOnFinished EventHandler einbauen? Mein Parent ist ein BorderPane, ist da "boundsInScene" richtig?

 

[hk]

Wenn Du jetzt wissen willst, wo der Node dargestellt wird, dann musst Du dies auch verarbeiten. getBoundsInLocal wäre da die erste Methode. Das ganze will man dann aber noch in einem einheitlichen Koordinatensystem haben, also z.B. in der Scene, daher vermutlich noch ein localToScene Aufruf.

Die Anpassungen des Code führen zu den Ergebnis, dass das ImageView (nach der richtigen Bewegung) noch einen Sprung um weitere ca. 10 Pixel macht.

  /**************************************************
   * Eine Schrittfolge links, rechts, links animieren
   */
  public void walkOn() {
//    step();
    makeOneStep(app.schuhOL, 0, -10, 500, 0);      //linker Schritt
    makeOneStep(app.schuhOR, 0, -20, 1000, 500);   //rechter Schritt
//    makeOneStep(app.schuhOL, 0, -20, 1000, 1000);  //linker Schritt
  } //end walkOn *****************************************************

  /**************************
   * Eine Schritt durchführen
   *
   * @param imgV
   * @param x
   * @param y
   * @param dur : Durchlaufzeit
   * @param del : Wartezeit bis Start
   */
  private void makeOneStep(ImageView imgV, double x, double y, int dur,
          int del) {
    KeyValue kvX = new KeyValue(imgV.translateXProperty(), x);
    KeyValue kvY = new KeyValue(imgV.translateYProperty(), y);
    KeyFrame kf = new KeyFrame(Duration.millis(dur), kvX, kvY);
    Timeline tl = new Timeline(kf);
    tl.setCycleCount(1);
    tl.setAutoReverse(false); 
    tl.setDelay(Duration.millis(del));
    tl.setOnFinished(new EventHandler<ActionEvent>() {
      @Override
      public void handle(ActionEvent t) {
        Bounds boundsInScene = imgV.localToScene(imgV.getBoundsInLocal());
        final Point2D value = imgV.localToScene(0, 0);    <-- Differenz Start/Ziel
        imgV.setX(imgV.getX() + value.getX());  //Bewegung im ImageView nachvollziehen
        imgV.setY(imgV.getY() + value.getY());    <-- führt zu einem Sprung um weitere 10 pixel
        System.out.println("X: " + imgV.getX() + " Y: " + imgV.getY()); <-- Position ok
      }
    });
    tl.playFromStart();
  } //end makeOneStep *************************************************

 

[KonradN]

Da verstehe ich gerade nicht, was Du genau versuchst. Es geht doch nur um die Bestimmung der Position. Also setzt Du keine Position.

Und die Werte solltest Du in boundsInScene haben. Da Du nur das imgV verschiebst kannst Du auch mit dem localToScene Aufruf feststellen, um wieviel es verschoben wurde und du könntest dann die effektiven x und y Koordinaten berechnen.
Aber diese darfst Du natürlich nicht setzen, denn dann würdest Du es natürlich erneut verschieben.

Sprich: Berechne mit imgV.getX() + value.getX() die effektie X-Koordinate aber setze diese nicht!

 

[hk]

Da verstehe ich gerade nicht, was Du genau versuchst. Es geht doch nur um die Bestimmung der Position. Also setzt Du keine Position.

Wenn ich die Position nach der Animation nicht setze, dann wird bei einer Wiederholung der Animation wieder auf der Ursprungsposition begonnen. Beispiel: Start Animation 1 300/250 Bewegung -10 Pixel Y. Die Animation ist ok. Start Animation 2 wieder bei 300/250. Also muss ich irgendwie die Position um den Animationsfaktor anpassen.

 

[hk]

Ich habe das Problem nun in einer kleinen fertigen App dargestellt. Da sieht man deutlich, dass das Aufeinanderfolgen von Bewegungen nicht stimmt. Allerdings weiß ich nicht warum!

import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.input.MouseButton;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.Pane;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.util.Duration;

/**
 * JavaFX App
 */
public class App extends Application {

  @Override
  public void start(Stage stage) {
    Rectangle r = new Rectangle(300, 200, 20, 20);
    var scene = new Scene(new Pane(r), 640, 480);
    // bei Maus-Klick
    scene.addEventHandler(MouseEvent.MOUSE_RELEASED, e -> {
      if(e.getButton().equals(MouseButton.PRIMARY)) move(r, 10, 0); //nach rechts
      else move(r, 0, 10);  //nach unten
  });   
    stage.setScene(scene);
    stage.show();
  }
  // Eine Bewegung durchführen
  private void move(Rectangle r, double x, double y) {
    KeyValue kvX = new KeyValue(r.translateXProperty(), x);
    KeyValue kvY = new KeyValue(r.translateYProperty(), y);
    System.out.println("Gewünschte Bewegung nach: X= " + x + " Y= " + y);
    KeyFrame kf = new KeyFrame(Duration.millis(500), kvX, kvY);
    Timeline tl = new Timeline(kf);
    tl.setCycleCount(1);
    tl.setAutoReverse(false); 
    tl.setDelay(Duration.millis(500));
    tl.setOnFinished(new EventHandler<ActionEvent>() {
      @Override
      public void handle(ActionEvent t) {
        System.out.println("LayoutX: " + r.getLayoutX() + " LayoutY: " + r.getLayoutY());
        System.out.println("boundsInScene: " + r.localToScene(r.getBoundsInLocal()));
        System.out.println("X: " + r.getX() + " Y: " + r.getY());
      }
    });
    tl.playFromStart();
  }   
  public static void main(String[] args) {
    launch();
  }
}

 

[KonradN]

Noch einmal die Grundlagen, die ich schon einmal versucht habe, zu erläutern:

a) So ein Node hat eine Position im übergeordneten Element. Diese kannst Du mit x / y holen/setzen (also getX, setX, getY, setY)
b) Bei der Anzeige wird das Element aber ggf. noch verschoben. Dazu dienen translateXProperty / translateYProperty.

Diese nutzt Du bei deiner Bewegung. Denn da gibst Du vor, wie etwas verschoben werden soll. Dein Rechteck ist also auf 300, 200, translate x/y ist 0 / 0 --> Rechteck wird bei 300,200 angezeigt.

Nun kommt der erste Klick -> translateX soll auf 10 gehen, translateY soll auf 0 gehen (in der Animation)
==> Das Rechteck wandert nun in der Animation auf 310, 200

Nun kommt der andere Klick -> TranslateX soll wieder auf 0 gehen, translateY soll auf 10 gehen (in der Animation)
==> Das Rechteck wandert nun nach links unten.

Nehmen wir die Problematik, die Du beschrieben hattest:
Das Kästchen wandert von 300,200 nach 310,200 (position ist 300,200 aber translateX ist 10).
Wenn translateX auf 10 ist und Du die Position auf die Dargestellte Position umsetzten, dann hast Du Position bei 310,200 und dargestellt wird das Kästchen durch die translateX 10 bei 320,200
==> Da macht das Kästchen dann einen Sprung.

Was kannst Du jetzt machen?

a) Du kannst die Position jedes Mal neu setzen. Dazu musst Du dann aber nicht nur die Position setzen sondern auch das translateX auf 0 setzen. Also etwas wie:

                r.setX(r.localToScene(r.getBoundsInLocal()).getMinX());
                r.setY(r.localToScene(r.getBoundsInLocal()).getMinY());
                r.translateXProperty().set(0);
                r.translateYProperty().set(0);

b) Du lässt die Position konstant und die Bewegung ist immer relativ - es wird also addiert:

        KeyValue kvX = new KeyValue(r.translateXProperty(), r.translateXProperty().get() + x);
        KeyValue kvY = new KeyValue(r.translateYProperty(), r.translateYProperty().get() + y);

Dadurch würde die erste Bewegung das translateX von 0 auf 10 setzen, die zweite Bewegung wäre dann von 10 auf 20 u.s.w.

Da es Dir ja um die Visualisierung einer Bewegung geht, sollte es eigentlich a) sein aus meiner Sicht.

 

[hk]

a) Du kannst die Position jedes Mal neu setzen. Dazu musst Du dann aber nicht nur die Position setzen sondern auch das translateX auf 0 setzen. Also etwas wie:

Juhu, das war's! Herzlichen Dank.
Aber bitte wo kann man das Nachlesen, ich habe mir zig Beispiele angesehen und nichts dergleichen gefunden.

 

[KonradN]

Juhu, das war's! Herzlichen Dank.
Aber bitte wo kann man das Nachlesen, ich habe mir zig Beispiele angesehen und nichts dergleichen gefunden.

Ich gehe da immer gerne über die Dokumentation. Im JavaDoc findet sich in der Regel alles, was man braucht.

Aber dazu ist wichtig, dass man etwas ein Überblick hat, was wie zusammen hängt - so lange man das noch nicht hat ist es extrem schwer.

Da wäre dann der Weg, zu dem ich raten würde: Nerve uns hier im Forum so lange, bis wir es Dir erklären konnten