Benutzer-Werkzeuge

Webseiten-Werkzeuge


api:documentation:grafik:world

Grafikbereich, Koordinatensystem

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

api/documentation/grafik/world.txt · Zuletzt geändert: 2021/01/06 11:41 von Martin Pabst