Overview
JavaFX bietet uns eine sehr einfache Möglichkeit, zweidimensionale Formen in unsere Anwendung zu zeichnen.
Es gibt hierbei ganz unterschiedliche 2D Formen, die im Paket javafx.scene.shape repräsentiert werden:Rechtecke, Kreise, Linien, Kurven, Polygone usw. Diese können von uns genauso einfach wie ein Label oder Button als Nodes den JavaFX Containern hinzugefügt werden.
Shapes für JavaFX
Grundlage für unsere 2D-Formen ist die JavaFX-Klasse Shape im Paket javafx.scene.shape.
Die Unterklassen repräsentieren dann ganz konkret folgende Formen:
- Rectangle (Rechteck)
- Circle (Kreis)
- Ellipse
- Arc (Bogen)
- Polygon (Polygon)
- Line (Linie)
- Quad Curve (Quadratische Bézierkurve)
Als Nodes können diese Formen genauso einfach wie ein Label oder Button unseren JavaFX Containern hinzugefügt werden.
Die Shape-Klasse ermöglicht dabei eine sehr einfache Gestaltung der Formen: Durch das Setzen der Füllung (Fill) und der Außenlinie (Stroke) werden die Formen sichtbar.
Wie das konkret abläuft, schauen wir uns jetzt für einige Shapes jetzt einmal genauer an.
Rectangle
Fangen wir mit einem Rechteck an, das durch die Klasse Rectangle repräsentiert wird. Um ein Rechteck Node zu erstellen, können wir folgende Konstruktor-Methode verwenden:
Rectangle(double x, double y, double width, double height)
Die Werte x und y geben die Position des Rechteckts in Pixeln an, während width und height die Maße in Länge und Höhe speichern.
Unser Rechteck braucht aber noch eine Farbe und/ oder einen Rahmen, sonst bleibt es unsichtbar. Mit den Methoden setFill() und setStroke() können wir das einfach lösen.
Und schon haben wir unser Rechteck fertig:
Rectangle rectangle = new Rectangle(40, 40, 200, 200);
rectangle.setFill(Color.DEEPPINK);
rectangle.setStroke(Color.BLACK);
rectangle.setStrokeWidth(2);
Group g = new Group();
g.getChildren().add(rectangle);
Scene s = new Scene(g, 400, 300);
primaryStage.setScene(s);
primaryStage.show();
Natürlich können wir alle Werte des Rechtecks nach seiner Erstellung auch wieder ändern. Folgende Methoden machen's möglich:
- setX()
- setY()
- setWidth()
- setHeight()
Circle
Die Klasse Circle erstellt einen neuen Kreis mit einem bestimmten Radius. Die Pixel-Position des Kreises wird über sein Zentrum festgelegt. Der folgende Code erstellt einen Kreis mit dem Radius von 120 Pixeln. Das Zentrum des Kreises soll bei den Koordinaten 150 (x) und 150(y) liegen:
Circle circle = new Circle(150,150,120);
circle.setFill(Color.DEEPPINK);
Group g = new Group();
g.getChildren().add(circle);
Scene s = new Scene(g, 400, 300);
primaryStage.setScene(s);
primaryStage.show();
Auch bei Circle können wir das Aussehen mit folgenden Methoden nachträglich noch modifizieren:
- setCenterX()
- setCenterY()
- setRadius()
Ellipse
Eine Ellipse ist in der Geometrie eine geschlossene ovale Kurse. Ein sehr bekanntes Beispiel sind etwa die Planeten-Umlaufbahnen, die als Ellipsen um die Sonne laufen. Vereinfacht kann man aber sagen: Ellipsen sind Kreise, die nicht "gerade aussehen".
Die Eigenschaften, die wir brauchen, um eine Ellipse in JavaFX zu erzeugen sind:
| Eigenschaft | Beschreibung | Setter Methode |
| centerX | Horizontale Position des Zentrums der Ellipse in Pixel | setCenterX() |
| centerY | Vertikale Position des Zentrums der Ellipse in Pixel | setCenterY() |
| radiusX | Definiert die Breite der Ellipse in Pixel | setRadiusX() |
| radiusY | Definiert die Höhe der Ellipse in Pixel | setRadiusY() |
Eine Ellipse erstellen wir damit ganz easy:
Ellipse elipse = new Ellipse();
elipse.setFill(Color.DEEPPINK);
elipse.setCenterX(100); // X-Position des Zentrums
elipse.setCenterY(100); // Y-Position des Zentrums
elipse.setRadiusX(100); // width of the Ellipse
elipse.setRadiusY(60); // height of the Ellipse
Group g = new Group();
g.getChildren().add(elipse);
Arc
Mit der Klasse Arc können wir in JavaFX einen Bogen erzeugen. Ein Bogen bezeichnet ein Kreissegment, also eine Teilfläche eines Kreises.
Zwei Beispiele:
- Ein Halbkreis bildet die Hälfte der Fläche eines Kreises, ist also ein Bogen.
- Du kennst sicherlich das Retro-Pac-Man Icon: Dies ist ebenfalls eine Teilfäche eines Kreises.
Um einen Bogen mit JavaFX zu erstellen, kannst du die folgenden Eigenschaften und Methoden der Klasse Arc verwenden:
| Eigenschaft | Beschreibung | Setter Methode |
| centerX | Horizontale Position des Zentrums des Bogens in Pixel | setCenterX() |
| centerY | Vertikale Position des Zentrums des Bogens in Pixel | setCenterY() |
| radiusX | Definiert die Breite des Bogens Ellipse in Pixel | setRadiusX() |
| radiusY | Definiert die Höhe des Bogens in Pixel | setRadiusY() |
| startAngle | Winkeldrehung des Bogens | setStartAngle() |
| length | Bestimmt die Winkel-Ausdehnung (maximal 360 = geschlossener Kreis) | setLength() |
| type | Legt den Typ des Bogens fest (ROUND, CHORD, ...) | setType() |
Im folgenden Beispiel wollen wir einen fast zum Kreis geschlossenen Bogen erzeugen, der die Form von PacMan hat 😀
Arc arc = new Arc();
arc.setType(ArcType.ROUND);
arc.setFill(Color.DEEPPINK);
arc.setCenterX(150); // Mittelpunkt X
arc.setCenterY(150); // Mittelpunk Y
arc.setRadiusX(140); // Breite
arc.setRadiusY(140); // Höhe
arc.setStartAngle(30); // Winkel der Drehung
arc.setLength(300); // Winkel-Ausdehnung
Group g = new Group();
g.getChildren().add(arc);
Polygon
Polygone sind Vielecke, also geometrische Figuren mit mindestens drei Seiten und Ecken, die einen geschlossenen Streckenzug bilden.Streng genommen sind auch Dreicke und Vierecke Polygone.
In JavaFX können Polygone mit der Klasse javafx.scene.shape.Polygon erstellt werden. Dazu müssen wir bei der Objekterstellung ein Array aus Double-Werten in den Konstruktor übergeben, die die X-Y Koordinaten aller Ecken des Polygons repräsentieren.
Hier ein Beispiel für ein dreieckiges Polygon:
double ecken[] = {
10.0, 10.0, // Koordinaten 1. Ecke
100.0, 200.0, // Koordinaten 2. Ecke
200.0, 100.0 // Koordinaten 3. Ecke
};
Polygon polygon = new Polygon(ecken);
polygon.setFill(Color.DEEPPINK);
Group g = new Group();
g.getChildren().add(polygon);Und so sieht das spitze Teil dann aus:
Alternativ zur Übergabe im Konstruktor können wir die einzelnen Eckpunkte im Double-Array auch über die Methode getPoints().addAll(); festsetzen. Das Array muss dann aber von der Double Wrapper-Klasse sein, sonst funktioniert es nicht:
Double[] ecken = {
10.0, 10.0, // Koordinaten 1. Ecke
100.0, 200.0, // Koordinaten 2. Ecke
200.0, 100.0 // Koordinaten 3. Ecke
};
Polygon polygon = new Polygon();
polygon.getPoints().addAll(ecken);
polygon.setFill(Color.DEEPPINK);
Group g = new Group();
g.getChildren().add(polygon);Line
Eine Linie ist schlicht eine Strecke, die von zwei Punkten verbunden ist.
Folgende Eigenschaften und Methoden lassen dich eine Linie erstellen:
| Eigenschaft | Beschreibung | Setter Methode |
| startX | x-Koordinate des Anfangspunkts der Linie | setStartX() |
| endX | y-Koordinate des Anfangspunkts der Linie | setEndX() |
| startY | x-Koordinate des Endpunkts der Linie | setStartY() |
| endY | y-Koordinate des Endpunkts der Linie | setEndY() |
Die entsprechenden Werte dieser Eigenschaften können wir auch gleich bei der Instanziierung des Objekts in den Konstruktor übergeben:
Line line = new Line(20, 20, 200, 250);
line.setStroke(Color.DEEPPINK);
Group g = new Group();
g.getChildren().add(line);
QuadCurve
Die Klasse QuadCurve repräsentiert eine Bézierkurve, eine parametrisch modellierte Kurve. Wegen ihres leichtes Handlings wird sie sehr häufig in der Computergrafik eingesetzt.
Um eine Bézierkurve in JavaFX zu zeichnen, benötigen wir die Start- und Endpunkt einer Linie und die Koordinaten eines Kontrollpunkts, der die Line "biegen" lässt, also zur Kurve macht:
QuadCurve quad = new QuadCurve();
quad.setStartX(100);
quad.setStartY(200);
quad.setEndX(350);
quad.setEndY(200);
quad.setControlX(100); // Kontrollpunkt X
quad.setControlY(0); // Kontrollpunkt Y
quad.setFill(Color.DEEPPINK);
quad.setStroke(Color.BLACK);
Group g = new Group();
g.getChildren().add(quad);
