Java lernen durch Ausprobieren!

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Zuletzt angesehen:
api:documentation:grafik:start

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
Nächste Überarbeitung		Vorhergehende Überarbeitung
api:documentation:grafik:start [2021/01/05 10:39] – [getWorld-Methode der grafischen Objekte] Martin Pabstapi:documentation:grafik:start [2021/12/29 11:29] (aktuell) – Externe Bearbeitung 127.0.0.1
Zeile 1: Zeile 1:
 ====== Grafikprogrammierung ====== ====== Grafikprogrammierung ======
-===== Grafikbereich, Koordinatensystem ===== +  * [[:api:documentation:grafik:world|World, Koordinatensystem]] \\ Hier zeige ich Dir, wie Du ein World-Objekt zur Ausgabe von Grafiken instanzierst und welche nützlichen Methoden es hat. \\ \\  
-{{ :klassen1:anwenden:pasted:20200828-185832.png?400}} +  * [[:api:documentation:grafik:hierarchie|Vererbungshierarchie der Grafikklassen]] \\ Hier gebe ich Dir einen Überblick über den Zusammenhang der Grafikklassen. \\ \\  
-<WRAP center round tip 60%> +  * [[:api:documentation:grafik:grundobjekte|Grafikobjekte]] \\ In diesem Kapitel erfährst Du, welche Grafikobjekte (Circle, Rectangle, Polygon, Bitmap, ...) es gibt und wie Du sie verwenden kannst. \\ \\  
-Grafiken werden immer in einem Grafikbereich auf der rechten Seite dargestellt. Er wird beim Instanzieren eines ''World''-Objekts angelegt, beispielsweise durch +  * [[:api:documentation:grafik:transformationen|move, rotate, scale]] \\ Grafikobjekte kann man verschieben, drehen und strecken (d.h. vergrößern/verkleinern). Hier erfährst Du, wie das geht. \\ \\  
-<code myJava> +  * [[:api:documentation:grafik:gruppierung|Gruppierung von Objekten]] \\ Oft möchte man mehrere Grafikobjekte zu einem neuen Objekt zusammenfügen. Dafür gibt es die Klasse Group, deren Anwendung in diesem Kapitel gezeigt wird. \\ \\  
-new World(800, 600); +  * [[:api:documentation:grafik:animation|Animation (die act-Methode)]] \\ Schreibe Programmcode, der 30-mal pro Sekunde ausgeführt wird und Deine Grafikobjekte animiert wie in einem Trickfilm! \\ \\  
-</code> +  * [[:api:documentation:grafik:mausereignisse|Reagieren auf Maus- und Tastaturereignisse]] \\ Wie erreicht man, dass etwas geschieht, wenn ein Benutzer auf ein Grafikobjekt mit der Maus klickt oder darüberfährt? Hier erfährst Du, wie Du Event-Handler programmierst! \\ \\  
-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). \\ \\  +  * [[:api:documentation:grafik:animation|Animation (act-Methode)]] \\ Hier erfährst Du, wie man Grafikobjekte bewegt und damit einfach Animationen erstellen kann. \\ \\  
-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. \\ \\  +  * [[:api:documentation:grafik:keystate|Steuerung mit der Tastatur]] \\ Wie steuert man Objekte mit der Tastatur? \\ \\  
-**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. +  * [[:api:documentation:grafik:compound|Zusammengesetzte Grafikobjekte]] \\ Hier zeige ich Dir, wie Du aus Rechtecken, Kreisen usw. ein interaktives Panzer-Objekt mit drehbarem Geschützturm bauen kannst. \\ \\ 
-</WRAP> +
- +
-<HTML> +
-<div style="clear: both"></div> +
-</HTML> +
- +
-<HTML> +
-<div class="java-online" style="height: 200px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'Grafik1'}"> +
- +
-<script type="text/plain" title="Grafik1.java"> +
-World w = new World(800, 600);         // Grafikbereich anlegen +
-w.setBackgroundColor(Color.white); +
- +
-new Circle(400, 200, 100);   // Kreis mit Mittelpunkt (300, 200) und Radius 100 +
-new Circle(400, 400, 50);    // Kreis mit Mittelpunkt (300, 400) und Radius 50 +
- +
-Rectangle r = new Rectangle(50, 20, 100, 160);    // Rechteck; linke obere Ecke bei (10, 20);  +
-// 100 breit, 160 hoch +
-r.setFillColor(Color.green); +
-</script> +
-</div> +
- +
-</HTML> +
- +
-===== 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.]] +
- +
-<HTML> +
-<div class="java-online" style="height: 200px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'Grafik_cursor'}"> +
- +
-<script type="text/plain" title="Cursor.java"> +
-World w = new World(800, 600);         // Grafikbereich anlegen +
-w.setCursor("pointer"); +
- +
-new Circle(400, 200, 100);   // Kreis mit Mittelpunkt (300, 200) und Radius 100 +
-</script> +
-</div> +
- +
-</HTML> +
- +
-==== 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. +
- +
-<WRAP center round tip 80%> +
-**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. +
- +
-</WRAP> +
- +
-=== Beispiel 1: MouseOver-Effekt === +
-<HTML> +
-<div class="java-online" style="height: 400px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'Grafik_cursor2'}"> +
- +
-<script type="text/plain" title="Cursor2.java"> +
-World w = new World(800, 600);         // Grafikbereich anlegen +
- +
-new MeinKreis(400, 300, 200); +
-while(true){} +
- +
-class MeinKreis extends Circle { +
- +
-   public void onMouseEnter(double x, double y) { +
-      getWorld().setCursor("pointer"); +
-   } +
- +
-   public void onMouseLeave(double x, double y) { +
-      getWorld().setCursor("default"); +
-   } +
- +
-} +
-</script> +
-</div> +
- +
-</HTML> +
- +
-=== Beispiel 2: getWidth()- und getHeight()-Methode der Klasse World === +
-<HTML> +
-<div class="java-online" style="height: 400px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'Grafik_widthHeight'}"> +
- +
-<script type="text/plain" title="WidthHeight.java"> +
-World w = new World(1000, 1000); +
-w.setBackgroundColor(Color.antiquewhite); +
- +
-for(int i = 0; i < 1000; i++) { +
-   double x = Math.random() * w.getWidth(); +
-   double y = Math.random() * w.getHeight(); +
-    +
-   int color = Math.floor(Math.random() * 0xffffff);    // zufällige Farbe +
-   double alpha = Math.random();                        // 0 => komplett durchsichtig; 1 => komplett undurchsichtig +
-    +
-   Circle c = new Circle(x, y, 20); +
-   c.setFillColor(color, alpha); +
-}</script> +
-</div> +
- +
-</HTML> +
  
api/documentation/grafik/start.1609839578.txt.gz · Zuletzt geändert: 2021/12/29 11:29 (Externe Bearbeitung)
Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki