Grafische Benutzeroberflächen mit JavaFX Canvas, Transformationen, Scene Builder

Transkript

1 Grafische Benutzeroberflächen mit JavaFX Canvas, Transformationen, Scene Builder

2 Anzeige komplexer Grafiken Beispiel: Planstadt-Karte typische Größe: 128x128 = Felder Vergleich: map.json enthält 8209 Way-Objekte Felder können (gerade so) durch einzelne Node-Objekte repräsentiert werden. Hinweis: Die aktuelle Version von JavaFX hat einen Fehler, so dass die Grafikkarte bei vielen kleinen Nodes nicht effizient benutzt wird. Temporäre Abhilfe: Software-Rendering verwenden (In Eclipse in das Textfeld "Run configurations > Arguments > VM arguments" den Text -Dprism.order=sw eintragen)

3 Alternative: Canvas Canvas ist eine Node-Klasse in JavaFX. Sie repräsentiert eine Fläche von Pixeln, auf die direkt gezeichnet werden kann. Vorteile: schnelles Zeichnen komplexe Grafiken Nachteile: keine Interaktion mit geometrischen Objekten (z.b. Klick-Ereignisse für Linie) keine Manipulation / Animation geometrischer Objekte (z.b. Verschieben einer Linie) Skalierung eines Canvas vergrößert Pixel

4 Canvas: Beispiel // Canvas der Groesse 200x100 Pixel anlegen Canvas canvas = new Canvas(200, 100); root.getchildren().add(canvas); // Grafik auf dem Canvas zeichnen: GraphicsContext gc = canvas.getgraphicscontext2d(); gc.setfill(color.bisque); gc.filloval(5, 5, 100, 90); gc.strokeline(50, 50, 70, 60); gc.stroketext("text", 10, 20);

5 Canvas: Aktualisierung Im Gegensatz zu Container-Nodes speichert ein Canvas nicht die gezeichneten Objekte, sondern nur Pixel. Die Aktualisierung eines Canvas erfolgt üblicherweise durch Löschen und Neuzeichnen. Wegen Anti-Aliasing ist das Löschen einzelner Objekte schwierig. Oft ist es das Einfachste, alles zu löschen und alles neu zu zeichnen. // Inhalt loeschen GraphicsContext gc = canvas.getgraphicscontext2d(); gc.clearrect(0, 0, canvas.getwidth(), canvas.getheight()); // alles nochmal zeichnen...

6 Canvas: Aktualisierung Beispiel: schnelle Animation von 100,000 Kreisen Canvas canvas = new Canvas(900, 900); root.getchildren().add(canvas); Random random = new Random(); Point2D[] points = new Point2D[100000]; for (int i = 0; i < points.length; i++) { points[i] = new Point2D(random.nextInt(900), random.nextint(900)); } KeyFrame keyframe = new KeyFrame(Duration.millis(30), event -> { GraphicsContext gc = canvas.getgraphicscontext2d(); gc.clearrect(0, 0, canvas.getwidth(), canvas.getheight()); for (int i = 0; i < points.length; i++) { gc.setfill(color.hsb(i % 255, 1, 1, 0.5)); gc.filloval(points[i].getx(), points[i].gety(), 5, 5); points[i] = points[i].add(random.nextint(3)-1, random.nextint(3)-1); } }) Timeline timeline = new Timeline(keyFrame); timeline.setcyclecount(animation.indefinite); timeline.play();

7 Canvas: Transformationen Transformationen des Canvas betreffen die Pixel. Beispiel: canvas.setscalex(10); canvas.setscaley(10); Möchte man exakt skalieren, so muss man den Canvas vergrößern und alle Koordinaten skalieren (gc.drawoval(x*10, y*10, w*10, h*10)). Einfache Möglichkeit: settransform

8 Wiederholung: Nodes und Transformationen Jedes Node-Objekt hat eine Liste von Transformationen, die nacheinander angewendet werden. Damit können kompliziertere Transformationen leicht zusammengesetzt und verändert werden. // 1. Verschieben um (50, 50) node.gettransforms().add(new Translate(50, 50)); // 2. Skalieren um Faktor 1.5 mit Mittelpunkt (10, 10) node.gettransforms().add(new Scale(1.5, 1.5, 10, 10)); // 3. Rotation um 30 Grad mit Mittelpunkt (50, 30) node.gettransforms().add(new Rotate(30, 50, 30));

9 Wiederholung: Nodes und Transformationen Pane pane = new Pane(); Scene scene = new Scene(pane); // Dreiecke zu pane hinzuegen... scene pane

10 Wiederholung: Nodes und Transformationen Pane pane = new Pane(); Scene scene = new Scene(pane); // Dreiecke zu pane hinzuegen... pane.gettransforms().add(new Translate(-100, -100));

11 Wiederholung: Nodes und Transformationen Pane pane = new Pane(); Scene scene = new Scene(pane); // Dreiecke zu pane hinzuegen... pane.gettransforms().add(new Translate(-100, -100)); pane.gettransforms().add(new Scale(1.5, 1.5, 100, 100));

12 Wiederholung: Nodes und Transformationen Beispiel: Zoom-out auf dem Mittelpunkt der Scene double scenex = scene.getwidth() / 2; double sceney = scene.getheight() / 2; Point2D p = pane.scenetolocal(scenex, sceney); Scale scale = new Scale(0.5, 0.5, p.getx(), p.gety()); pane.gettransforms().add(scale);

13 Canvas: Transformationen Anstatt die Koordinaten in einem Canvas per Hand zu skalieren (oder zu rotieren, etc.) kann man beim Zeichnen eine affine Transformation setzen. GraphicsContext gc = canvas.getgraphicscontext2d(); gc.clearrect(0, 0, canvas.getwidth(), canvas.getwidth()); gc.settransform(new Affine(new Scale(10, 10))); Was bedeutet new Affine(new Scale(10, 10))?

14 Affine Transformationen JavaFX und andere Grafikbibliotheken (z.b. OpenGL) erlauben affine Transformationen. Eine dreidimensionale affine Transformation ist durch 12 Zahlen m xx, m xy, m xz, t x, m yx, m yy, m yz, t y, m zx, m zy, m zz, t z gegeben. Diese Zahlen definieren, wie ein beliebiger gegebener Punkt zu transformieren ist. Der Punkt (x, y, z) wird zu folgendem Punkt (x, y, z ). x = m xx x + m xy y + m xz z + t x y = m yx x + m yy y + m yz z + t y z = m zx x + m zy y + m zz z + t z

15 Affine Transformationen Affine Transformationen werden in JavaFX durch die Klasse Affine repräsentiert. Spezialfälle affiner Transformationen: Direktes Setzen der 12 Werte. Hilfsfunktionen für häufig verwendete Spezialfälle. Translation Skalierung Rotation Es gibt die JavaFX-Klassen Translate, Scale, Rotate, damit man die 12 Werte m xx, m xy,... nicht per Hand angeben muss. Die Klasse Affine hat Konstruktoren wie Affine(Scale scale) zur Umwandlung der Spezialfälle.

16 Affine Transformationen: Komposition Die Klasse Canvas erlaubt nur das Setzen einer einzigen affinen Transformation, nicht einer Liste von Transformationen. Die Nacheinanderausführung affiner Transformationen ist wieder eine affine Transformation. Beispiel: Konstruiere eine einzige affine Transformation, die zuerst verschiebt, dann skaliert und dann dreht. Affine affine = new Affine(); // Identitaetstransformation affine.append(new Translate(50, 50)); affine.append(new Scale(1.5, 1.5, 10, 10)); affine.append(new Rotate(30, 50, 30));

17 Affine Transformationen: Komposition System.out.println(affine) liefert: Affine [ , , 0.0, Die Klasse Canvas erlaubt nur das Setzen einer einzigen affinen , , 0.0, Transformation, nicht einer Liste von Transformationen. 0.0, 0.0, 1.0, 0.0 ] Die Nacheinanderausführung Bedeutung: affiner Transformationen ist wieder eine Affine affine [ Transformation. mxx mxy mxz tx myx myy myz ty Beispiel: Konstruiere mzx mzy mzz einetzeinzige affine Transformation, die zuerst verschiebt, ] dann skaliert und dann dreht. Affine affine = new Affine(); // Identitaetstransformation affine.append(new Translate(50, 50)); affine.append(new Scale(1.5, 1.5, 10, 10)); affine.append(new Rotate(30, 50, 30));

18 Affine Transformationen Beispiel: Zoom-in auf den Mauszeiger double scenex = event.getscenex(); double sceney = event.getsceney(); Point2D p = pane.scenetolocal(scenex, sceney); Scale scale = new Scale(0.5, 0.5, p.getx(), p.gety()); pane.gettransforms().add(scale); Beachte: Die Liste der Transformationen pane.gettransforms() wird mit jedem Klick länger! Abhilfe: Behalte nur eine einzige affine Transformation in der Liste der Transformationen und verändere diese.

19 Affine Transformationen Abhilfe: Behalte nur eine einzige affine Transformation in der Liste der Transformationen und verändere diese. Affine affine = new Affine(): pane.gettransforms().add(affine); double scenex = event.getscenex(); double sceney = event.getsceney(); Point2D p = pane.scenetolocal(scenex, sceney); Scale scale = new Scale(0.5, 0.5, p.getx(), p.gety()); affine.append(scale);

20 FXML und Scene Builder In JavaFX wird das Layout der GUI durch die geeignete Schachtelung von Klassen wie HBox, BorderPane, etc. festgelgt. Die Festlegung von Layoutdetails (Abstände, Anordnung, Farben, etc.) im Programmcode kann recht aufwendig sein. Ansatz zur Vereinfachung: Dateiformat FXML zur Spezifikation der GUI Graphische Tools zur interaktiven Bearbeitung von FXML-Dateien Man muss den Aufbau der GUI immer noch verstehen, kann aber die Details mit Tools festlegen.

21 FXML Beispiel: <?xml version="1.0" encoding="utf-8"?> <?import javafx.scene.shape.*?>... <AnchorPane maxheight="-infinity" maxwidth="-infinity" minheight="-infinity" minwidth="-infinity" prefheight="347.0" prefwidth="382.0" xmlns=" xmlns:fx=" fx:controller="beispielcontroller"> <children> <TextField fx:id="inputfield" layoutx="15.0" layouty="307.0" onaction="#textentered" prefheight="26.0" prefwidth="353.0" AnchorPane.bottomAnchor="14.0" AnchorPane.leftAnchor="15.0" AnchorPane.rightAnchor="14.0" /> <ListView fx:id="listview" layoutx="14.0" layouty="14.0" prefheight="283.0" prefwidth="353.0" AnchorPane.bottomAnchor="50.0" AnchorPane.leftAnchor="14.0" AnchorPane.rightAnchor="15.0" AnchorPane.topAnchor="14.0" /> </children> </AnchorPane>

22 FXML Laden dieser FXML-Datei im public void start(stage primarystage) { try { AnchorPane pane = (AnchorPane) FXMLLoader.load(getClass().getResource("beispiel.fxml")); Scene scene = new Scene(page); primarystage.setscene(scene); primarystage.show(); } catch (IOException ex) { // Problem beim Laden von beispiel.fxml } } Hinweis: Die FXML-Datei erwähnt eine Controller-Klasse BeispielController. Diese muss zunächst angelegt werden (siehe nächste Folien).

23 Scene Builder Tool zur Erstellung von FXML-Dateien entwickelt von Oracle veröffentlicht im Quelltext unter Open-Source Lizenz Jar-Dateien und Installer verfügbar von:

24 Scene Builder: Beispiel 1. Erstellung der GUI-Elemente In der Library (links) kann man verschiedene Node-Typen auswählen und zusammenstellen. In diesem Beispiel: AnchorPane mit zwei Kindern: ListView und TextField Vorschau mit Ctrl+P. Speichern der Datei in dem Verzeichnis, in dem man sonst die View-Klasse anlegen würde. Bei Eclipse: workspace/projekt/src/paket

25 Scene Builder: Beispiel 2. Festlegen des Controllers Wähle links unter "Controller" einen Namen für die Controller-Klasse der gerade erstellten View aus. In diesem Beispiel dort den Namen BeispielController eintragen. Im Controller müssen wir auf das TextField und die ListView zugreifen können. Dazu: Das TextField markieren und rechts bei "Code" (Ctrl-3) unter "fx:id" einen Variablennamen eintragen. Im Beispiel: listview. Die ListView markieren und rechts bei "Code" (Ctrl-3) unter "fx:id" einen Variablennamen eintragen. Im Beispiel: inputfield.

26 Scene Builder: Beispiel 2. Festlegen des Controllers (Fortsetzung) Wenn man im TextField auf Enter drückt, soll der eingegebene Text in die Liste eingetragen werden. Trage dazu bei "Code" unter "On Action" den Namen der aufzurufenden Methode des Controllers ein. Im Beispiel: textentered Den Quelltext der Controller-Klasse kann man sich nur mit "View > Show Sample Controller Skeleton" anzeigen lassen. Lege diese Klasse in Eclipse o.ä. an.

27 Scene Builder: Beispiel 3. Controller fertig implementieren package beispiel; import javafx.event.actionevent; import javafx.fxml.fxml; import javafx.scene.control.listview; import javafx.scene.control.textfield; public class BeispielController { private TextField private ListView<String> void textentered(actionevent event) { listview.getitems().add(inputfield.gettext()); inputfield.clear(); }

28 Scene Builder: Beispiel Die FXML-Datei kann jetzt benutzt werden: package beispiel;... public class Main extends Application { public void start(stage primarystage) { try { AnchorPane page = (AnchorPane) FXMLLoader.load(getClass().getResource("beispiel.fxml")); Scene scene = new Scene(page); primarystage.setscene(scene); primarystage.show(); } catch (Exception ex) { } } Die Controller-Klasse wird beim Laden der FXML-Datei automatisch instantiiert.