====== Grafikbereich, Koordinatensystem ======
{{ :klassen1:anwenden:pasted:20200828-185832.png?400}}
Grafiken werden immer in einem Grafikbereich auf der rechten Seite dargestellt. Er wird beim Instanzieren eines ''World''-Objekts angelegt, beispielsweise durch
new World(800, 600);
Der **Ursprung des Koordinatensystems** liegt im Zeichenbereich **links oben**, die y-Achse zeigt nach **unten**! (Hier die [[https://gamedev.stackexchange.com/questions/83570/why-is-the-origin-in-computer-graphics-coordinates-at-the-top-left|Erklärung dafür]].) Die Parameter des Konstruktors der Klasse World legen fest, bei welchen Koordinaten sich der rechte bzw. untere Rand befindet (hier: 800 bzw. 600, siehe die Skizze auf der rechten Seite). \\ \\
Du kannst den Grafikbereich an der linken Seite mit der Maus kleiner/größer ziehen. Dadurch ändern sich aber **nicht** die Koordinatengrenzen und auch nicht das Seitenverhältnis des Grafikbereichs. Alle grafischen Objekte werden einfach entsprechend gestreckt. \\ \\
**Tipp: ** Wenn ein Grafikobjekt (z.B. ein Rechteck) instanziert wird bevor der Grafikbereich angelegt wurde, wird automatisch einer erstellt, der die Koordinatengrenzen $x = 800$ und $y = 600$ besitzt.
===== Methoden der World-Klasse =====
==== setCursor ====
Mit dieser Methode kann die Form des Mauscursors verändert werden, wenn er sich über dem Grafikbereich bewegt. Da intern einfach das css-Attribut "cursor" des Grafikbereichs verändert wird, stehen als mögliche Werte alle entsprechenden css-Werte zur Verfügung, z.B.
* default
* pointer (Hand)
* progress
* crosshair (Fadenkreuz)
* move
* not-allowed
* usw.
Alle möglichen Werte findest Du in [[https://developer.mozilla.org/de/docs/Web/CSS/cursor#Werte|dieser Tabelle.]]
==== getWorld-Methode der grafischen Objekte ====
Oft möchte man, dass sich der Mauscursor genau dann ändert, wenn er sich über einem Objekt befindet. Dies erreicht man durch Überschreiben der ''onMouseEnter'' und ''onMouseLeave''-Methoden der entsprechenden Grafikklasse.
**Tipp 1:** Regle die Geschwindigkeit hoch, damit der Cursorwechsel "flott" vonstatten geht! \\ \\
**Tipp 2:** Jedes Grafikobjekt besitzt die Methode ''getWorld'', die das ''World''-Objekt zurückgibt. Damit lässt sich nicht nur der Mauscursor ändern (siehe das Beispiel unten), sondern man erhält über ''getWorld().getWidth()'' und ''getWorld().getHeight()'' auch auf einfache Weise die Grenzen des Koordinatensystems.
=== Beispiel 1: MouseOver-Effekt ===
=== Beispiel 2: getWidth()- und getHeight()-Methode der Klasse World ===