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.
====== Grafikobjekte ======
===== Kreis/Ellipse (Füllfarbe, Linienfarbe) =====
{{ :api:documentation:grafik:pasted:20210105-111046.png?400 }}
<WRAP center round info 100%>
Durch ''new Circle(400, 300, 150)'' wird ein Kreis mit Mittelpunkt $(400/300)$ und Radius $150$ gezeichnet, durch ''new Ellipse(400, 300, 150, 50)'' eine Ellipse mit den Radien 150 in x-Richtung und 50 in y-Richtung. \\ \\ 
**Füllfarbe**
Jedes grafische Objekt hat eine Füllfarbe. Sie kann mit der Methode ''setFillColor'' gesetzt werden. Mit diesem Bezeichner gibt es insgesamt vier überlagerte Methoden, die die Angabe der Farbe auf verschiedene Arten gestatten:
<code myJava>
setFillColor(String Color)
setFillColor(String Color, double alpha)
setFillColor(int Color)
setFillColor(int Color, double alpha)
</code>
Wird die Farbe als String-Wert angegeben, so versteht das System verschiedene Varianten:
<code myJava>
c.setFillColor(Color.red);               // Farbkonstanten der Klasse Color
c.setFillColor("#ff8000");               // RGB-Wert als Hex Triplet (siehe unten)
c.setFillColor("rgb(255, 128, 0)");      // Dezimale Angabe des Rot-, Grün- und Blauwerts (jeweils zwischen 0 und 255)
c.setFillColor("rgba(255, 128, 0, 0.3)");      // Dezimale Angabe, zusätzlich mit Alpha-Wert (siehe unten)
c.setFillColor(new Color(255, 128, 0));  // Erzeugen eines neuen Color-Objekts 
</code>

Wird die Farbe als ''int''-Wert angegeben, so wird dieser Wert als [[https://en.wikipedia.org/wiki/Web_colors#Hex_triplet| Hex Triplet]] interpretiert. Hier ein [[https://blog.upperlinecode.com/encoding-a-color-with-hexadecimal-digits-6ec8b59d32fe|Artikel, der diese Kodierung gut erklärt]]. Am besten schreibst Du den int-Wert als Hexadezimalzahl (Zahl mit führendem '0x'), dann entsprechen die ersten beiden Hexadezimalziffern dem Rot-Wert, die nächsten beiden dem Grün-Wert und die letzten beiden dem Blau-Wert. Diese drei Farbkomponenten werden [[https://de.wikipedia.org/wiki/Additive_Farbmischung|additiv gemischt]]. ''setFillColor(0x80ff00)'' füllt den Kreis mit der Farbe 80ff00, d.h. 50 % rot (80), 100 % grün (ff) und 0 % blau. Die Darstellung als ''int''-Wert ist dann besonders praktisch, wenn man eine **Zufallsfarbe setzen** möchte. Man ermittelt dazu einfach eine zufällige Zahl zwischen 0 und ''0xffffff'' (== dezimal 65535):
<code myJava>
c.setFillColor(Math.floor(Math.random()*0xffffff));
</code>
 \\ 
**Alpha-Wert:** \\ 
Der Alpha-Wert gibt die Undurchsichtigkeit (engl. "opacity") an. $\alpha = 0$ bedeutet völlig durchsichtig (d.h. unsichtbar!), $\alpha = 1.0$ bedeutet völlig undurchsichtig. \\ \\ 
**Tipp: **Möchtest Du ein Objekt unsichtbar machen, so setze nicht seinen Alpha-Wert auf 0, sondern benutze ''setVisible(false)''. Damit wird das Objekt nicht mehr gezeichnet (=> Performancegewinn!). Möchtest Du, dass nur der Rand eines Objekts gezeichnet wird, so benutze ''setFillColor(null)''.
 \\ \\ 
**Rand:** \\ 
Jedes Objekt besitzt einen Rand, der standardmäßig nicht gezeichnet wird (''setBorderColor(null)''). Sobald Du eine Randfarbe mit ''setBorderColor'' setzt, ist er sichtbar. Seine Dicke kann mit der Methode ''setBorderWith'' verändert werden.
 \\ \\ 
**Standardwerte:** \\ 
Standardmäßig wird jedes gefüllte graphische Objekt initial in blauer Farbe ohne Rand sichtbar gezeichnet. Diese Standardwerte lassen sich mit den Methoden
  * ''Shape.setDefaultVisibility(boolean visibility)''
  * ''FilledShape.setDefaultFillColor'' und
  * ''FilledShape.setDefaultBorder'' 
verändern.

</WRAP>

<HTML>
<div style="clear: both"></div>
</HTML>

<HTML>
<div class="java-online" style="height: 400px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'Grundobjekte_Kreis'}">

<script type="text/plain" title="Grundobjekte_Kreis.java">
World w = new World(800, 600);         // Grafikbereich anlegen
w.setBackgroundColor(Color.white);

Circle c1 = new Circle(100, 100, 80);
c1.setFillColor(0xff8000);
c1.setBorderColor(Color.blue);
c1.setBorderWidth(20);

Ellipse e1 = new Ellipse(500, 300, 150, 50);
e1.setFillColor(Color.red);

Circle c2 = new Circle(200, 200, 150);
c2.setFillColor("rgb(50, 100, 50)", 0.5);

Circle c3 = new Circle(400, 200, 150);
c3.setFillColor("rgba(0, 0, 255, 0.8)");

for(int i = 1; i <= 10; i++) {
   Circle c = new Circle(70 * i, 500, 50);
   c.setFillColor(Math.floor(Math.random()*0xffffff), 0.1*i);
}
</script>
</div>

</HTML>

===== Gegenseitiges Überdecken =====
<WRAP center round tip 80%>
Grundsätzlich überdecken Objekte, die später gezeichnet werden, jene, die davor gezeichnet wurden. Mit der Methode ''bringToFront'' kannst Du ein früher gezeichnetes Objekt in den Vordergrund (d.h. ganz "nach oben") bringen, mit der Methode ''sendToBack'' kannst Du ein später gezeichnetes Objekt in den Hintergrund (d.h. ganz "nach unten") bringen.
</WRAP>

<HTML>
<div class="java-online" style="height: 250px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'Reihenfolge'}">
<script type="text/plain" title="Reihenfolge.java">
// Tipp: Führe dieses Programm mit sehr niedriger Geschwindigkeit aus!
Circle c1 = new Circle(100, 100, 80);
c1.setFillColor(Color.blueviolet);

Circle c2 = new Circle(200, 200, 150);
c2.setFillColor(Color.firebrick);

while(true){
   c1.sendToBack();
   c1.bringToFront();
}
</script>
</div>
</HTML>

 \\ 
===== Rechteck (Rectangle) =====
{{ :api:documentation:grafik:pasted:20210105-132515.png?500}}
<WRAP left round info 60%>
**Rectangle:** \\ 
Ein ''Rectangle''-Objekt wird mithilfe der Angaben ''top'', ''left'' (Koordinaten der linken oberen Ecke) und ''width'', ''height'' (Breite, Höhe) instanziert. Es wird zunächst als achsenparalleles Rechteck dargestellt, kann dann aber mit der Methode ''rotate'' gedreht werden (siehe weiter unten). \\ \\ 
**RoundedRectangle:** \\ 
Ein ''RoundedRectangle''-Objekt stellt ein Rechteck mit abgerundeten Ecken dar. Beim Instanzieren wird dem Konstruktor zusätzliche zu den vier Angaben ''top'', ''left'', ''width'' und ''height'' noch der Eckenradius als fünfter Parameter übergeben, siehe die letzte Zeile im nachfolgenden Beispielprogramm.
</WRAP>

<HTML>
<div class="java-online" style="height: 350px; width: 60%" data-java-online="{'withBottomPanel': false, 'id': 'Rectangle'}">
<script type="text/plain" title="Rectangle.java">
World w = new World(800, 600);
w.setBackgroundColor(Color.white);

Rectangle r = new Rectangle(200, 100, 500, 300);

for(int i = 0; i < 25; i++) {
   Rectangle r1 = new Rectangle(0, 0, 40, 40);
   r1.setFillColor(Color.lime, 0.5);
   r1.rotate(20*i);
   r1.move(20 + 40 * i, 280 + 250 * Math.sin(Math.PI / 10 * i));
}

RoundedRectangle rr = new RoundedRectangle(420, 450, 300, 100, 30);

</script>
</div>
</HTML>

<HTML>
<div style="clear: both"></div>
</HTML>

 \\ 

===== Textfeld =====
<WRAP left round info 60%>
**Text:** \\ 
Oft möchte man in der Grafikausgabe auch Text unterbringen, z.B. um in einem Spiel eine Überschrift, das Level oder die erreichten Punkte anzuzeigen. 
Ein ''Text''-Objekt wird mithilfe der Koordinaten (x, y) der linken oberen Ecke sowie der Schriftgröße (in Pixeln) instanziert. Optional kann als fünfter Parameter auch eine Schriftart/Schriftfamilie angegeben werden, z.B.
<code myJava>
Text t1 = new Text(400, 300, 50, "Das ist ein Text");
Text t2 = new Text(400, 300, 50, "Das ist ein Text", "Courier");
</code>

  * Die Ausrichtung des Textfeldes (linksbündig, zentriert, rechtsbündig) kann mit der Methode ''setAlignment'' gesetzt werden, z.B. ''setAlignment(Alignment.center)''. Entsprechend ist die x-Koordinate, die im Konstruktor angegeben wurde, dann nicht die linke Kante des Textes (linksbündig), sondern die Mitte (Ausrichtung zentriert) bzw. rechte (Ausrichtung rechtsbündig) Kante.
  * Der Textinhalt des Textfeldes kann mit der Methode ''setText'' gesetzt werden.

</WRAP>

<HTML>
<div class="java-online" style="height: 350px; width: 60%" data-java-online="{'withBottomPanel': false, 'id': 'Text'}">
<script type="text/plain" title="Text.java">
Text t1 = new Text(400, 20, 50, "linksbündig");
Text t2 = new Text(400, 100, 50, "zentriert");
t2.setAlignment(Alignment.center);
Text t3 = new Text(400, 180, 50, "rechtsbündig");

Text t4 = new Text(400, 280, 50, "", "Courier");
t4.setAlignment(Alignment.center);
t4.setFillColor(Color.white);
t4.rotate(45);

int z = 0;
while(true) {
   z++;
   t4.setText(z + "");
}
</script>
</div>
</HTML>

 \\ 


===== Dreieck (Triangle) =====
{{ :api:documentation:grafik:pasted:20210105-134329.png?420}}
<WRAP left round info 60%>
**Triangle:** \\ 
Ein ''Triangle''-Objekt wird mithilfe der Koordinaten (x1, y1), (x2, y2) und (x3, y3) seiner drei Eckpunkte instanziert, z.B. 
<code myJava>
Triangle t = new Triangle(200, 100, 100, 450, 600, 300);
</code>
</WRAP>

<HTML>
<div class="java-online" style="height: 150px; width: 60%" data-java-online="{'withBottomPanel': false, 'id': 'Triangle'}">
<script type="text/plain" title="Triangle.java">
Triangle t = new Triangle(200, 100, 100, 450, 600, 300);
</script>
</div>
</HTML>

<HTML>
<div style="clear: both"></div>
</HTML>

 \\ 
===== Vieleck (Polygon) =====
<WRAP left round info 80%>
**Polygon:** \\ 
Ein ''Polygon''-Objekt wird mithilfe der Koordinaten aller seiner Punkte instanziert. Diese können entweder einzeln als Parameter oder als Array von ''double''-Werten angegeben werden. Der erste Parameter des Konstruktors ("closeAndFill") bestimmt, ob das Polygon geschlossen und gefüllt werden soll. Daher können mithilfe dieser Klasse auch Linienzüge dargestellt werden. \\ \\ 
**Hinzufügen von Punkten:** \\ 
Mit den Methoden ''addPoint(int x, inty)'' und ''addPoints(double[] points)'' können dem Polygon jederzeit Punkte hinzugefügt werden.
</WRAP>

<HTML>
<div class="java-online" style="height: 150px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'Polygon'}">
<script type="text/plain" title="Polygon.java">
Polygon p1 = new Polygon(true, 10, 10, 350, 100, 700, 50, 600, 150, 300, 300, 10, 200);

double[] punkte = new double[] { 100, 450, 400, 500, 50, 550 };
Polygon p2 = new Polygon(false, punkte);
p2.addPoint(800, 600);
p2.setBorderColor(Color.white);
</script>
</div>
</HTML>

<HTML>
<div style="clear: both"></div>
</HTML>

===== Strecke (Line) =====
<WRAP left round info 80%>
**Line:** \\ 
Ein Line-Objekt wird unter Angabe der Koordinaten seiner zwei Endpunkte instanziert, z.B. ''Line k = new Line(10, 20, 600, 400);'' \\ \\ 
**Ändern von Punkten:** \\ 
Mit den Methoden ''setPoint(double x, double y, int index)'' und ''setPoints(double x1, double y1, double x2, double y2)'' können die Koordinaten der Endpunkte verändert werden.
</WRAP>

<HTML>
<div class="java-online" style="height: 250px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'Line'}">
<script type="text/plain" title="Line.java">
new World(600, 600);
for(int i = 0; i <= 600; i += 40) {
   Line l1 = new Line(0, i, 600 - i, 0);
   l1.setBorderColor(Color.white, 0.5);
   Line l2 = new Line(i, 0, 600, i);
   l2.setBorderColor(Color.white, 0.5);
}
</script>
</div>
</HTML>


===== Bitmap (Feld aus Quadraten) =====
<WRAP left round info 80%>
**Bitmap:** \\ 
Ein Bitmap-Objekt stellt ein in viele kleine Quadrate aufgeteiltes Rechteck dar. Die Anzahl der Quadrate in x- bzw. y-Richtung sowie left, top (Position der linken oberen Ecke), width (Breite) und height (Höhe) der Bitmap werden im Konstruktor festgelegt. Anschließend können die Quadrate einzeln beliebig eingefärbt werden.
</WRAP>

<HTML>
<div class="java-online" style="height: 550px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'Bitmap', 'speed': 'max'}">
<script type="text/plain" title="Bitmap.java">
// Beispiel: Mandelbrotmenge
// Am besten mit voller Geschwindigkeit starten!
new World(1000, 1000);
int auflösung = 150;
Bitmap bm = new Bitmap(auflösung, auflösung, 0, 0, 1000, 1000);

double left = -2.2;
double right = 1;
double top = 1.6;
double bottom = -1.6;

for(int x = 0; x < auflösung; x++) {
   double r = left + (right - left) / auflösung * x;
   for(int y = 0; y < auflösung; y++) {
      double i = bottom + (top - bottom) / auflösung * y;
      int n = 0;
      double r1 = r; double i1 = i;
      double c;
      double d;
      double l = 0; 
      while(l <= 4.0 && n <= 254) {
         c = r1;
         d = i1;
         r1 = c * c - d * d + r;
         i1 = 2 * c * d + i;
         l = r1 * r1 + i1 * i1;
         n++;
      }
      int color = n / 16 * 0x80000 + n % 16 * 0x10;
      if(n == 255) {
         color = 0;
      }
      bm.setColor(x, y, color, 1.0);
   }
}
</script>
</div>
</HTML>

===== Turtle (Schildkröte) =====
<WRAP left round info 80%>
**Turtle:** \\ 
Objekte der Klasse ''Turtle'' stellen eine "Schildkröte" dar (gleichschenkliges Dreieck), die Anfangs nach rechts blickt. Sie lässt sich mit den Methoden
  * ''forward(double länge)'' ( Vorwärtsbewegen)
  * ''turn(double winkelInGrad)'' (Blickrichtung ändern)
steuern lässt. Ihr Weg wird mit der aktuellen Stiftfarbe und -breite mitgezeichnet, die mit den Methoden
  * ''setBorderColor(farbe)'' (Stiftfarbe), 
  * ''setAlpha(alphaWert)'' (Undurchsichtigkeit, zwischen 0 == durchsichtig und 1 == undurchsichtig) und
  * ''setBorderWidth(breite)'' (Stiftbreite)
geändert werden können.
</WRAP>

<HTML>
<div class="java-online" style="height: 400px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'Turtle1'}">
<script type="text/plain" title="Turtle1.java">

for(int seitenzahl = 3; seitenzahl < 9; seitenzahl++) {
   Turtle t = new Turtle(-100 + 80 * seitenzahl, 700 - 60 * seitenzahl);
   t.showTurtle(true);
   t.setAlpha(0.3);
   t.setBorderColor(Color.randomColor());
   for(int seite = 0; seite < seitenzahl; seite++) {
      t.forward(600 / seitenzahl);
      t.turn(360 / seitenzahl);
   }
}
</script>
</div>
</HTML>



===== Kreisbogen (Arc) und Kreissektor (Sector) =====
<HTML>
<div class="java-online" style="height: 400px; width: 100%" data-java-online="{'withBottomPanel': false, 'id': 'ArcSector'}">
<script type="text/plain" title="ArcSector.java">
Arc a1 = new Arc(300, 200, 50, 100, 45, 225);
a1.setFillColor(0x4B0082);
Arc a2 = new Arc(500, 200, 50, 100, 300, 90);
a2.setFillColor(null);
a2.setBorderColor(Color.red);

Sector s1 = new Sector(300, 500, 100, 45, 180);
s1.setFillColor(0xCD5C5C);

Sector s2 = new Sector(500, 500, 100, 45, 180);
s2.setFillColor(null);
s2.setBorderColor(Color.green);
s2.drawRadii(false);
</script>
</div>
</HTML>