Java lernen durch Ausprobieren!

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
====== Grafikbereich, Koordinatensystem ======
{{ :klassen1:anwenden:pasted:20200828-185832.png?400}}
<WRAP center round tip 40%>
Grafiken werden immer in einem Grafikbereich auf der rechten Seite dargestellt. Er wird beim Instanzieren eines ''World''-Objekts angelegt, beispielsweise durch
<code myJava>
new World(800, 600);
</code>
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.
</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

var k = new MeinKreis(400, 300, 200);
k.setFillColor(Color.blue);

while(true) { }

class MeinKreis extends Circle {

   public void onMouseEnter(double x, double y) {
      getWorld().setCursor("pointer");
      setFillColor(Color.white);
   }

   public void onMouseLeave(double x, double y) {
      getWorld().setCursor("default");
      setFillColor(Color.blue);
   }

}
</script>
</div>

</HTML>

=== Beispiel 2: getWidth()- und getHeight()-Methode der Klasse World ===
<HTML>
<div class="java-online" style="height: 300px; 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>