• Keine Ergebnisse gefunden

Jedes Node -Objekt hat sein eigenes Koordinatensystem.

N/A
N/A
Info
Herunterladen
Protected

Academic year: 2021

Aktie "Jedes Node -Objekt hat sein eigenes Koordinatensystem."

Copied!
27
0
0

Wird geladen.... (Jetzt Volltext ansehen)

Jetzt herunterladen ( 27 Seite )

Volltext

(1)

JavaFX

Koordinaten und Transformationen

(2)

Koordinaten

Jedes Node -Objekt hat sein eigenes Koordinatensystem.

In Container-Nodes beziehen sich Position und Größe der Kinder immer auf das

Koordinatensystem der enthaltenden Node.

Koordinaten sind double -Werte.

(0, 0) x

y

(3)

Transformationen

Auf jedes Node-Objekt können Transformationen angewendet werden, um as Koordinatensystem zu verändern.

Beispiele:

I

Verschiebung

Der Ursprung des Koordinatensystem wird verschoben.

I

Rotation

Rotation des gesamten Koordinatensystems um einen Punkt.

I

Skalierung

Skalierung des gesamten Koordinatensystems auf einen

Punkt.

(4)

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));

(5)

Transformationen

Beispiel: manuelles Layout in Pane

Pane root = new Pane();

Pane pane = new Pane();

Rectangle r = new Rectangle(20, 20);

Circle c = new Circle(20);

Polygon d = new Polygon(0, 40, 40, 40, 20, 0);

pane.getChildren().addAll(c, r, d);

root.getChildren().add(pane);

r.setFill(Color.RED);

c.setFill(Color.BLUE);

d.setFill(Color.GREEN);

root

pane

(6)

Transformationen

Beispiel: manuelles Layout in Pane

Pane root = new Pane();

Pane pane = new Pane();

Rectangle r = new Rectangle(20, 20);

Circle c = new Circle(20);

Polygon d = new Polygon(0, 40, 40, 40, 20, 0);

pane.getChildren().addAll(c, r, d);

root.getChildren().add(pane);

r.setFill(Color.RED);

c.setFill(Color.BLUE);

d.setFill(Color.GREEN);

r.getTransforms().add(new Translate(40, 20));

root

pane

(7)

Transformationen

Beispiel: manuelles Layout in Pane

Pane root = new Pane();

Pane pane = new Pane();

Rectangle r = new Rectangle(20, 20);

Circle c = new Circle(20);

Polygon d = new Polygon(0, 40, 40, 40, 20, 0);

pane.getChildren().addAll(c, r, d);

root.getChildren().add(pane);

r.setFill(Color.RED);

c.setFill(Color.BLUE);

d.setFill(Color.GREEN);

r.getTransforms().add(new Translate(40, 20));

c.getTransforms().add(new Translate(20, 20));

pane

root

(8)

Transformationen

Beispiel: manuelles Layout in Pane

Pane root = new Pane();

Pane pane = new Pane();

Rectangle r = new Rectangle(20, 20);

Circle c = new Circle(20);

Polygon d = new Polygon(0, 40, 40, 40, 20, 0);

pane.getChildren().addAll(c, r, d);

root.getChildren().add(pane);

r.setFill(Color.RED);

c.setFill(Color.BLUE);

d.setFill(Color.GREEN);

r.getTransforms().add(new Translate(40, 20));

c.getTransforms().add(new Translate(20, 20));

d.getTransforms().add(new Translate(0, 30));

pane

root

(9)

Transformationen

Beispiel: manuelles Layout in Pane

Pane root = new Pane();

Pane pane = new Pane();

Rectangle r = new Rectangle(20, 20);

Circle c = new Circle(20);

Polygon d = new Polygon(0, 40, 40, 40, 20, 0);

pane.getChildren().addAll(c, r, d);

root.getChildren().add(pane);

r.setFill(Color.RED);

c.setFill(Color.BLUE);

d.setFill(Color.GREEN);

r.getTransforms().add(new Translate(40, 20));

c.getTransforms().add(new Translate(20, 20));

d.getTransforms().add(new Translate(0, 30));

pane.getTransforms.add(new Translate(20, 20));

root

pane

(10)

Transformationen

Beispiel: manuelles Layout in Pane

Pane root = new Pane();

Pane pane = new Pane();

Rectangle r = new Rectangle(20, 20);

Circle c = new Circle(20);

Polygon d = new Polygon(0, 40, 40, 40, 20, 0);

pane.getChildren().addAll(c, r, d);

root.getChildren().add(pane);

r.setFill(Color.RED);

c.setFill(Color.BLUE);

d.setFill(Color.GREEN);

r.getTransforms().add(new Translate(40, 20));

c.getTransforms().add(new Translate(20, 20));

d.getTransforms().add(new Translate(0, 30));

pane.getTransforms.add(new Translate(20, 20));

pane.getTransforms.add(new Rotate(20, 0, 0));

root

pane

(11)

Transformationen

Beispiel: manuelles Layout in Pane

Pane root = new Pane();

Pane pane = new Pane();

Rectangle r = new Rectangle(20, 20);

Circle c = new Circle(20);

Polygon d = new Polygon(0, 40, 40, 40, 20, 0);

pane.getChildren().addAll(c, r, d);

root.getChildren().add(pane);

r.setFill(Color.RED);

c.setFill(Color.BLUE);

d.setFill(Color.GREEN);

r.getTransforms().add(new Translate(40, 20));

c.getTransforms().add(new Translate(20, 20));

d.getTransforms().add(new Translate(0, 30));

pane.getTransforms.add(new Translate(20, 20));

pane.getTransforms.add(new Rotate(20, 0, 0));

pane.getTransforms.add(new Scale(1.1, 1.1));

root

pane

(12)

Transformationen

Beispiel: Wir wollen, dass die drei Figuren der Maus folgen.

root pane

... // Aufbau von root und pane wie eben

final Translate translate = new Translate(0, 0);

pane.getTransforms().add(translate);

pane.getTransforms().add(new Rotate(20, 0, 0));

pane.getTransforms().add(new Scale(1.1, 1.1));

root.setOnMouseMoved(event -> { translate.setX(event.getX());

translate.setY(event.getY());

});

(13)

Umrechnen von Koordinaten

Beispiel: Wir wollen, dass die drei Figuren der Maus folgen und dass der Mittelpunkt des Kreises unter dem Mauszeiger

zentriert ist.

Wir müssen dazu die Koordinaten des Kreismittelpunkts bezüglich des Koordinatensystems von root berechnen.

I

Im Koordinatensystem von pane hat der Kreis den Mittelpunkt (20, 20).

I

Durch die Rotation und die Skalierung der pane wird die Umrechnung der

Koordinaten kompliziert.

I

JavaFX stellt Methoden zur

Umrechnung von Koordinaten zur Verfügung.

root

pane

(14)

Umrechnen von Koordinaten

Jedes Node -Objekt hat folgende Methoden:

I

Umwandlung einer Koordinate vom Koordinatensystem der Node in das der ganzen Scene:

Point2D localToScene(double x, double y)

I

Umwandlung in die andere Richtung:

Point2D sceneToLocal(double x, double y) Berechnung des Mittelpunkt des Kreises bzgl. des Koordinatensystems von root :

// pane-Koordinate => Scene-Koordinate Point2D ps = pane.localToScene(20, 20);

// Scene-Koordinate => root-Koordinate

Point2D pr = root.sceneToLocal(ps.getX(), ps.getY());

(Ergebnis:

Point2D [x = 17.930173873901367, y = 38.45138168334961])

(15)

Umrechnen von Koordinaten

Beispiel: Wir wollen, dass die drei Figuren der Maus folgen und dass der Mittelpunkt des Kreises soll unter dem Mauszeiger

zentriert ist.

root.setOnMouseMoved(event -> {

// Mittelpunkt des Kreises in root-Koordinaten berechnen Point2D circleCenterScene = pane.localToScene(20, 20);

Point2D circleCenterRoot = root.sceneToLocal(circleCenterScene);

// Position der Maus in root-Koordinaten berechnen

Point2D mouseRoot = root.sceneToLocal(event.getSceneX(), event.getSceneY());

// Verschiebung von pane um die Differenz

// Am Anfang der Liste anfuegen: Verschiebung vor Rotation und Skalierung pane.getTransforms().add(0,

new Translate(mouseRoot.getX() - circleCenterRoot.getX(), mouseRoot.getY() - circleCenterRoot.getY()));

});

(16)

Zoom und Rotation

Beispiel: Das bisherige Beispiel soll erweitert werden:

I

Bei Linksklick soll auf den Mittelpunkt des Kreises hineingezoomt werden.

I

Bei Rechtsklick soll 10

◦

um den Mittelpunkt des Kreises rotiert werden.

root.setOnMouseClicked(event -> {

if (event.getButton() == MouseButton.PRIMARY) {

pane.getTransforms().add(new Scale(1.1, 1.1, 20, 20));

} else if (event.getButton() == MouseButton.SECONDARY) { pane.getTransforms().add(new Rotate(10, 20, 20));

} });

Hier kann man den Punkt, auf den skaliert bzw. um den rotiert wird, direkt angeben. Oft würde man ihn mit sceneToLocal ,

localToScene und ähnlichen Methoden bestimmen.

(17)

Affine Transformationen

Problem: Die Liste der Transformationen

pane.getTransforms() wird mit jeder Mausbewegung und jedem Klick länger (bis der Speicher irgendwann voll ist)!

Abhilfe: Jede Folge von Translationen, Rotationen und

Skalierungen kann zu einer einzigen Affine -Transformation zusammengefasst werden.

Wir können eine einzige Affine -Transformation verwenden.

Affine affine = new Affine():

pane.getTransforms().add(affine);

affine.append(new Rotate(40));

affine.append(new Scale(1.5, 1.5));

(18)

Affine Transformationen

Translationen, Rotationen und Skalierung sind Spezialfälle affiner Transformationen.

Jede 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

0

, y

0

, z

0

).

x

0

= m

xx

· x + m

xy

· y + m

xz

· z + t

x

y

0

= m

yx

· x + m

yy

· y + m

yz

· z + t

y

z

0

= m

zx

· x + m

zy

· y + m

zz

· z + t

z

(19)

Affine Transformationen

Affine Transformationen werden in JavaFX durch die Klasse Affine repräsentiert.

I

Objekte dieser Klasse können genau wie Transform , Scale und Rotate verwendet werden.

I

Es ist möglich, affine Transformation direkt durch Angabe der 12 Werte definieren.

I

Einfacher ist die Verwendung von Hilfsmethoden.

(20)

Affine Transformationen

Beispiel: Konstruktion einer einzige affinen Transformation, die zuerst verschiebt, dann skaliert und dann dreht.

// Konstruktor erzeugt die Transformation, // die nichts macht:

Affine affine = new Affine();

// Anhaengen einer Translation

affine.append(new Translate(50, 50));

// Anhaengen einer Skalierung

affine.append(new Scale(1.5, 1.5, 10, 10));

// Anhaengen einer Rotation

affine.append(new Rotate(30, 50, 30));

System.out.println(affine);

(21)

Affine Transformationen

Beispiel: Konstruktion einer einzige affinen Transformation, die zuerst verschiebt, dann skaliert und dann dreht.

// Konstruktor erzeugt die Transformation, // die nichts macht:

Affine affine = new Affine();

// Anhaengen einer Translation

affine.append(new Translate(50, 50));

// Anhaengen einer Skalierung

affine.append(new Scale(1.5, 1.5, 10, 10));

// Anhaengen einer Rotation

affine.append(new Rotate(30, 50, 30));

System.out.println(affine);

System.out.println(affine) liefert:

Affine [

1.299038105676658, -0.7499999999999999, 0.0, 77.5480947161671 0.7499999999999999, 1.299038105676658, 0.0, 13.52885682970026 0.0, 0.0, 1.0, 0.0

]

Bedeutung:

Affine [

mxx mxy mxz tx

myx myy myz ty

mzx mzy mzz tz

]

(22)

Affine Transformationen

Erinnerung an Problem:

Die Liste der Transformationen pane.getTransforms() wird mit jeder Mausbewegung und jedem Klick länger, bis der Speicher voll ist!

Lösung:

Verwende eine einzige affine Transformation Affine affine = new Affine():

pane.getTransforms().add(affine);

und nimm folgende Ersetzungen vor:

pane.getTransforms().add(e);

pane.getTransforms().add(0, e);

affine.append(e);

affine.prepend(e);

(vollständiger Programmcode siehe Praktikumshomepage)

(23)

Transformationen und Canvas

Bei Benutzung von Canvas ist zu beachten, dass hier die Pixel des Canvas transformiert werden.

Pane root = new Pane();

Canvas canvas = new Canvas(200, 200);

root.getChildren().add(pane);

GraphicsContext gc = canvas.getGraphicsContext2D();

gc.clearRect(0, 0, canvas.getWidth(), canvas.getHeight());

gc.setFill(Color.RED);

gc.fillRect(40, 20, 20, 20);

... // Zeichnen von Kreis und Dreieck

canvas.getTransforms.add(new Translate(20, 20));

canvas.getTransforms.add(new Rotate(20, 0, 0));

canvas.getTransforms.add(new Scale(2, 2));

root

canvas

(24)

Transformationen und Canvas

Bei Benutzung von Canvas ist zu beachten, dass hier die Pixel des Canvas transformiert werden.

Pane root = new Pane();

Canvas canvas = new Canvas(200, 200);

root.getChildren().add(pane);

GraphicsContext gc = canvas.getGraphicsContext2D();

gc.clearRect(0, 0, canvas.getWidth(), canvas.getHeight());

gc.setFill(Color.RED);

gc.fillRect(40, 20, 20, 20);

... // Zeichnen von Kreis und Dreieck

canvas.getTransforms.add(new Translate(20, 20));

canvas.getTransforms.add(new Rotate(20, 0, 0));

canvas.getTransforms.add(new Scale(2, 2));

root

canvas

(25)

Transformationen und Canvas

Bei Benutzung von Canvas ist zu beachten, dass hier die Pixel des Canvas transformiert werden.

Pane root = new Pane();

Canvas canvas = new Canvas(200, 200);

root.getChildren().add(pane);

GraphicsContext gc = canvas.getGraphicsContext2D();

gc.clearRect(0, 0, canvas.getWidth(), canvas.getHeight());

gc.setFill(Color.RED);

gc.fillRect(40, 20, 20, 20);

... // Zeichnen von Kreis und Dreieck

canvas.getTransforms.add(new Translate(20, 20));

canvas.getTransforms.add(new Rotate(20, 0, 0));

canvas.getTransforms.add(new Scale(2, 2));

root

(26)

Transformationen und Canvas

Rotation und Skalierung einer Canvas-Node führt meist zu schlechten Ergebnissen.

Soll die Anzeige in einem Canvas skaliert werden, so müssen die Koordinaten beim Zeichnen im Canvas skaliert werden.

I

Möglichkeit 1: manuelles Umrechnen der Koordinaten

I

Möglichkeit 2: Canvas erlaubt die Umrechnung von Koordinaten vor dem Zeichnen mit einer affinen

Transformation

(Methode setTransform in GraphicsContext ).

(27)

Transformationen und Canvas

Beispiel für GraphicsContext.setTransform:

Die Anweisungen

GraphicsContext gc = canvas.getGraphicsContext2D();

Affine affine = new Affine();

affine.append(new Translate(5, 10));

affine.append(new Scale(2, 3));

gc.setTransform(affine);

gc.fillRect(10, 20, 30, 40);

haben den gleichen Effekt wie

GraphicsContext gc = canvas.getGraphicsContext2D();

gc.fillRect(2*10 + 5, 3*20 + 10, 2*30 + 5, 3*40 + 10);

Transformationen können also das Umrechnen von Koordinaten

erleichtern.

Referenzen

Jetzt herunterladen ( PDF - 27 Seite - 231.76 KB )

ÄHNLICHE DOKUMENTE

dass der Kanton Bern weiterhin in drei Prämienregionen aufgeteilt wird 2

Lars Guggisberg, Kirchlindach (SVP). Ich möchte herzlich für die konstruktive Diskussion dan- ken. Besonders dankbar bin ich der EDU und der BDP. Auch der SP-Fraktion

das oder dass ?

An der Grenze zu Rundistan öffnete mir ein kugelrunder Wächter _______ große, runde Tor und begrüßte mich überaus freundlich.. _______ Wetter in diesem Land war

dass das das

Man kann das Fürwort „das“ auch durch „dieses“, „dies“, „welches“ oder..

Wir wollen, dass die Menschen in Sachsen auch ohne eigenes Auto mobil sein können. Deshalb brauchen wir einen starken und

Ausgangsbasis zur Finanzierung  des ÖPNV. Eine Dynamisierung  muss künftig aus unserer Sicht  noch stärker den steigenden 

Zeugnis. für: dass du einzigartig bist. dass du unersetzlich bist. dass du nicht sein musst wie alle anderen. dass du wunderbare Fähigkeiten hast.

dass du so großartig durchhältst, dass du so geduldig mit mir bist, dass ich auch von dir lernen kann, dass wir miteinander lachen können, dass du mich so nimmst, wie ich

„Und er/sie/es sah, dass es gut war…“ Gottesbilder im Film als Beispiel für „Diversity“

Damit wird die Gottebenbildlichkeit des Menschen in seiner Vielfalt sehr anschaulich vor Augen geführt und auch im Hinblick auf die Theodizeefrage macht der Film deutlich,

das oder dass - Schildbürger

Jedes Mal, wenn sie am dass Teich vorbeigingen, sahen sie, __________ es sich im Wasser dass hin und her bewegte. Das __________ ganze Schildbürgervolk versammelte sich

das oder dass? Zauberflöte

Sarastro ist überzeugt davon, _____________ Tamino dass Tugend, Verschwiegenheit und