5.1 - Java-Applets, Teil 2

Wir wollen jetzt eine Linie in die Anwendung zeichnen, und zwar eine Linie, die von oben links nach rechts unten geht. Der Befehl zum Zeichnen von Linien heißt drawLine und ist eine weitere Methode der Klasse Graphics. Ergänzen Sie die paint-Methode Ihrer Anwendung um folgende Zeile:

g.drawLine(0,0,500,500); 

Man kann auch Figuren mit Hilfe von Linien zeichnen.

So richtig sieht das aber noch nicht aus. Die diagonale Linie sollte von oben links nach unten links gehen. Oben ist die Linie aber ein paar Pixel nach rechts verschoben.

Die Ursache hat man mit ein paar Experimenten schnell herausgefunden: Die oberen 22 Pixel werden von dem oberen Fensterrand in Beschlag genommen. Betrachten Sie dazu folgenden Quelltext einer besseren paint-Methode:

    public void paint(Graphics g)
    {
        g.drawString("Hallo Welt",200,200);

        g.drawLine(2,24,498,498);     // Diagonale  
        g.drawLine(2,24,2,498);       // Senkrechte links
        g.drawLine(2,24,498,24);      // Waagerechte oben
        g.drawLine(498,24,498,498);   // Senkrechte rechts
        g.drawLine(2,498,498,498);    // Waagerechte unten        
    }

Diese paint-Methode zeichnet jetzt die korrigierte Diagonale sowie einen Kasten um die Diagonale. Das Ergebnis kann sich sehen lassen:

Die erste Y-Koordinate, mit der man in der Java-Anwendung wirklich etwas anfangen kann, liegt bei 22. Alle Pixel, die einen kleineren Y-Wert haben, werden nicht angezeigt bzw. werden von der Fensterleiste überdeckt. Nach links, rechts und unten gibt es keine solche Begrenzung.

Wir wollen jetzt ein Gittermuster zeichnen.

Zuerst machen wir uns klar, wie man eine senkrechte Linie zeichnet:

g.drawLine(100,22,100,500); 

Bei einer senkrechten Linie stimmen die X-Koordinate des Startpunktes und die des Endpunktes überein, hier im Beispiel haben beide X-Koordinaten den Wert 100. Die Y-Koordinate des Startpunktes liegt ganz oben im Applet, also bei der Position 22, und die Y-Koordinate des Endpunktes liegt entsprechend am unteren Ende, also bei 500.

Wir wollen nun eine zweite senkrechte Linie zeichnen, und zwar bei X = 150:

g.drawLine(100,22,100,500);
g.drawLine(150,22,150,500); 

Hier sehen wir die Befehle für die beiden Linien. Sie stimmen genau überein - nur die X-Werte unterscheiden sich.

Wir wollen jetzt die ganze Zeichenfläche mit senkrechten Linien ausfüllen. Dazu könnte man jetzt ja einfach neun mal den drawLine-Befehl hinschreiben. Für den Y-Startwert können wir auch ruhigen Gewissens 0 einsetzen; die ersten 21 Pixel werden dann eben nicht angezeigt:

g.drawLine( 50,0, 50,500);
g.drawLine(100,0,100,500);
g.drawLine(150,0,150,500);
…
g.drawLine(450,0,450,500); 

Aber wozu haben wir eigentlich in Folge 4 die for-Schleifen kennengelernt?

for (int x = 50; x <= 450; x = x + 50) 
   g.drawLine(x,0,x,500); 

Mit dieser Zeile erreicht man das Gleiche wie mit den neun Zeilen oben. Die Laufvariable wurde aus nahliegenden Gründen x genannt, der Startwert wurde auf die X-Koordinate der ersten Linie festgelegt, nämlich 50, und das Inkrement wurde auf den Abstand zwischen den Linien festgelegt, ebenfalls 50.

Auf die gleiche Weise zeichnen wir jetzt die waagerechten Linien:

for (int y = 50; y <= 450; y = y + 50)
   g.drawLine(0,y,500,y);

Als Laufvariable wurde jetzt y gewählt, und beim drawLine-Befehl wurden die X-Werte konstant gewählt (0 und 500), während die Y-Werte durch die Laufvariable vorgegeben werden.

Zum Zeichnen von Kreisen gibt es einen einprägsamen Befehl: drawOval:

g.drawOval(50,100,400,300);

Mit diesem Befehl zeichnet man ein Oval in das Applet oder die Java-Anwendung:

Die Art und Weise, mit der man in Java Kreise und Ovale zeichnet, ist etwas gewöhnungsbedürftig. Normalerweise würde man denken, dass man für einen Kreis die Koordinaten des Mittelpunkts sowie den Radius angeben muss. In Java dagegen gibt man die Koordinaten der linken oberen Ecke des Rechteckes an, das den Kreis / das Oval umschreibt, und außerdem die Breite und die Höhe dieses Rechteckes.

In Schritt 7 haben Sie einfache Kreise und Ovale kennen gelernt. Neben dem Befehl drawOval gibt es auch noch den Befehl fillOval , der ausgefüllte Kreise zeichnet. Dieser Befehl wird mit den selben Parametern aufgerufen wie drawOval. Die mit fillOval gezeichneten Ovale haben allerdings keinen schwarzen Rand, es wird nur die Innenfläche gezeichnet.

Wir wollen jetzt mal einen grünen Kreis zeichnen:

public void paint(Graphics g) 		
{
   g.setColor(Color.GREEN);
   g.fillOval(50,50,400,400); 	
}

Und so sollte das Applet bzw. die Java-Anwendung dann aussehen:

Die Klasse Graphics besitzt eine Methode zum Verändern der aktuellen Zeichenfarbe. Bisher hatten wir setColor noch nicht aufgerufen, daher wurde immer alles in Schwarz gezeichnet. Wollen wir eine andere Zeichenfarbe haben, müssen wir setColor aufrufen und als Parameter die gewünschte Farbe übergeben. Dazu gibt es zwei Möglichkeiten.

Möglichkeit 1: Die Farbkonstanten

Die Klasse Color enthält einige Farbkonstanten, die wir direkt in den setColor-Befehl einsetzen können, beispielsweise mit g.setColor(Color.RED):

• Color.BLACK
• Color.DARK_GRAY
• Color.GRAY
• Color.LIGHT_GRAY
• Color.WHITE
• Color.MAGENTA
• Color.RED
• Color.PINK
• Color.ORANGE
• Color.YELLOW
• Color.GREEN
• Color.CYAN
• Color.BLUE

Eigentlich müssen die Farbkonstanten (wie bei Konstanten üblich) groß geschrieben werden, so wie oben dargestellt. Man kann die Namen aber auch klein schreiben, also beispielsweise Color.black statt Color.BLACK. Das Wort "Color" muss allerdings zwingend mit einem großen "C" geschrieben werden, da es sich um den Namen einer Klasse handelt.

Möglichkeit 2: Den Konstruktor der Klasse Color verwenden

Wenn Sie statt dessen den Konstruktor der Klasse Color verwenden, können sie viele andere Farbtöne erzeugen, nicht nur die wenigen durch die Farbkonstanten vorgegebenen Farben. Hier zunächst ein Beispiel zur Verwendung des Konstruktors:

Color neueFarbe = new Color(134,233,20);
g.setColor(neueFarbe);
g.fillOval(50,50,100,100); 

Der Konstruktor erwartet drei Parameter, die Sie vielleicht schon aus dem HTML-Kurs kennen. Diese drei Parameter stehen für den Rot-, den Grün- und den Blau-Anteil der Farbe (RGB-System). Jeder Parameter muss einen Wert zwischen 0 und 255 haben. Wenn Sie die Farbe Schwarz erzeugen wollen, schreiben Sie newColor(0,0,0), wenn Sie Weiß haben wollen: Color(255,255,255). Einen schönen Grauton erhalten Sie mit newColor(127,127,127). Wenn Sie ein knalliges Rot haben wollen: newColor(255,0,0), und für ein entsprechendes Grün: newColor(0,255,0).

Ich denke, diese Beispiele sollten reichen. Am besten experimentieren Sie mal mit den verschiedenen Farben.

Übrigens ist es nicht unbedingt nötig, eine eigene Variable vom Typ Color zu verwenden, man kann die neue Farbe auch direkt beim Aufrufen des setColor-Befehls erzeugen, wie das folgende Beispiel zeigt:

g.setColor(new Color(255,0,127));
g.fillOval(50,50,100,100); 

Probieren Sie es selbst mal aus!

Wenn wir den Befehl drawOval verwenden, erhalten wir einen Kreis mit einem Rand, aber ohne Innenfläche. Verwenden wir statt dessen den Befehl fillOval, erhalten wir einen Kreis mit einer Innenfläche, aber ohne Rand.

Wir wollen nun einen Kreis mit einem schwarzen Rand und einer farbigen Innenfläche zeichnen. Dazu verwenden wir folgenden Trick: Zunächst zeichnen wir mit fillOval die farbige Innenfläche. Vorher müssen wir die Farbe der Innenfläche natürlich mit setColorbestimmen. Wenn wir den farbigen Kreis gezeichnet haben, zeichnen wir anschließend mit drawOval den schwarzen Rand auf den farbigen Kreis. Vorher müssen wir noch setColor(Color.BLACK) aufrufen, damit als Zeichenfarbe Schwarz genommen wird.

Hier der komplette Quelltext:

g.setColor(Color.GREEN);
g.fillOval(50,50,400,400);
g.setColor(Color.BLACK);
g.drawOval(50,50,400,400);