3.4 Schleifen mit Graphiken

Ein paar schöne Graphiken

Wir wollen unsere Fertigkeiten im Umgang mit Schleifen nun in einer graphischen Umgebung vertiefen. Betrachten wir eine sehr einfache Java-Anwendung, die Linien, Rechtecke und Kreise darstellt. Hier der Quelltext, den Sie sich bitte in ein neues Java-Projekt hineinkopieren und ausprobieren.

import java.awt.*;
import javax.swing.*;

public class Anwendung extends JPanel
{
    public static void main(String[] args)
    {
        JFrame f = new JFrame("Einfachste Java-Anwendung");
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.setSize(800, 600);
        f.add(new Anwendung());
        f.setVisible(true);
    }

    @Override
    protected void paintComponent(Graphics g)
    {
        super.paintComponent(g);
        
        // Horizontale Linie
        g.drawLine( 50, 50,700, 50);
        
        // Senkrechte Linie
        g.drawLine(250,50,250,500);
        
        // roter Rahmen mit 10 Pixel Abstand zum Rand
        // Fenstergröße wird als konstant angesehen 800 x 600 Pixel
        g.setColor(Color.RED);
        g.drawRect(10,10,780,550);
        
        // hellgelbes Quadrat mit schwarzem Rand
        g.setColor(new Color(230,230,191));
        g.fillRect(300,300,200,200);
        g.setColor(Color.BLACK);
        g.drawRect(300,300,200,200);
        
        // roter Kreis mit dickem blauen Rand
        g.setColor(Color.BLUE);
        g.fillOval(300,100,50,50);
        g.setColor(new Color(255,0,0));
        g.fillOval(305,105,40,40);
    }
}

Sie werden sicherlich sehr schnell herausbekommen, wie man den Titel des Fensters und seine Breite und Höhe ändern kann. Für Sie wichtig sind die Beispiel-Graphiken in der Methode paintComponent(). Machen Sie sich die fünf elementaren Graphik-Befehle der Klasse Graphics klar:

1. drawLine(xStart,yStart,xEnde,yEnde);
2. drawRect(xLinksoben, yLinksoben, breite, hoehe);
3. fillRect(xLinksoben, yLinksoben, breite, hoehe);
4. drawOval(xLinksoben, yLinksoben, breite, hoehe);
5. fillOval((xLinksoben, yLinksoben, breite, hoehe);

Dabei zeichnen drawRect() und drawOval() leere Rechtecke und Ovale mit einem 1 Pixel breiten Rand in der aktuellen Farbe. Die Methoden fillRect() und fillOval() dagegen zeichnen Rechtecke und Ovale, die mit der aktuellen Farbe ausgefüllt sind.

Für das Ändern der Farbe gibt es den Befehl setColor(), der als Parameter entweder eine Farb-Konstante wie Color.RED oder Color.BLACK annimmt, oder ein "frisch" erzeugtes Objekt der Klasse Color. Bei der Erzeugung eines Color-Objektes müssen Sie die drei Farbwerte für Rot, Grün und Blau als Zahlen zwischen 0 und 255 übergeben. Beispielweise erzeugen Sie mit new Color(255,255,0) die Farbe Gelb und mit new Color(255,255,191) ein sehr helles Gelb. Mit (0,0,0) haben wir die Farbe Schwarz, und mit (255,255,255) die Farbe Weiß.

Aufgaben

Diese Aufgaben stehen übrigens auch als Arbeitsblatt zur Verfügung, das Sie sich hier herunter laden können.

Bei den nächsten Aufgaben müssen Sie nur die Methode paintComponent()bearbeiten. Sie können zunächst alle Befehle in der kopierten Vorlage löschen und durch eigene ersetzen. Allerdings muss der Aufruf super.paintComponent() weiterhin der erste Befehl in der Methode bleiben, da hier die entsprechende Methode der übergeordneten Klasse aufgerufen wird.

Diese Graphik wurde mit einer for-Schleife erzeugt. Für die nächste Aufgabe eignet sich vielleicht eine while-Schleife besser.

Diese Graphik wurde mit einer while-Schleife erstellt. Auch der Fenster-Titel wurde angepasst.

Jetzt spielen wir zusätzlich mal mit den Farben herum.

Hier wurden die Farben mit dem Color(r,g,b)-Befehl erzeugt, wobei die Werte von r und g von den Laufvariablen der beiden for-Schleifen bestimmt werden.

Nach diesen noch recht einfachen Übungen wird es jetzt etwas schwerer.

Für Fortgeschrittene, nicht klausurrelevant!

Projekt Funktionsplotter

Dieser Teil der Folge 3.3 ist für Fortgeschrittene gedacht, die bereits recht große Java-Kenntnisse haben.

Wir sehen hier eine einfache Java-Anwendung mit einem Textfeld, einem Button und einem Zeichen-Panel:

Die graphische Benutzeroberfläche der Java-Anwendung (GUI)

In die Editbox gibt man einen String ein, und wenn man auf den OK-Button klickt, dann wird dieser String in der Zeichenfläche oben links in großer Schrift angezeigt.

Hier der von ChatGPT erzeugte und von mir dann etwas überarbeitete und kommentierte Quelltext der gesamten Anwendung:

import java.awt.*;
import javax.swing.*;
import java.awt.event.*;

public class Anwendung implements ActionListener
{
    private double wert = 0.0; // Default-Wert
    private JTextField tf;
    private JButton ok;
    private JPanel hauptPanel, zeichenPanel;
    private JFrame dieApp;

    public Anwendung()
    {
        // Fenster der App definieren
        dieApp = new JFrame("App mit Textfeld, Button und Zeichenfläche");
        dieApp.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        dieApp.setSize(800, 630);


        // Ein Panel ist eine Fäche innerhalb eines Fensters, auf der man
        // Inhalte anzeigen oder anordnen kann.
        // Alle Panel-Objekte sind Objekte der Klasse JPanel.

        // 1. Haupt-Panel
        hauptPanel = new JPanel(null);
        hauptPanel.setBackground(new Color(220, 220, 220)); // grauer Hintergrund
        dieApp.setContentPane(hauptPanel);

        // 2. Zeichen-Panel 560 x 560, weiß. Hier kann gezeichnet werden.
        zeichenPanel = new JPanel()
        {
            @Override
            protected void paintComponent(Graphics g)
            // Dies ist die wichtigste Methode der ganzen App!
            // Hier bauen Sie die Lösungen der folgenden Aufgaben ein.
            {
                super.paintComponent(g);
                g.setFont(new Font("SansSerif", Font.BOLD, 24));
                g.setColor(Color.BLACK);
                g.drawString(String.valueOf(wert), 30, 50);
            }
        };
        
        zeichenPanel.setBackground(Color.WHITE);
        zeichenPanel.setBounds(220, 20, 560, 560);

        // Jetzt wird das Zeichen-Panel dem Haupt-Panel hinzugefügt
        hauptPanel.add(zeichenPanel);

        // Hier werden dem Haupt-Panel ein Textfeld und ein Button
        // hinzugefügt.

        // 1. Textfeld 160 x 40
        tf = new JTextField();
        tf.setBounds(20, 20, 160, 40);
        hauptPanel.add(tf);

        // 2. OK-Button 160 x 40
        ok = new JButton("OK");
        ok.setBounds(20, 70, 160, 40);
        ok.addActionListener(this);
        hauptPanel.add(ok);

        dieApp.setVisible(true);
    }
    
    @Override
    public void actionPerformed(ActionEvent event)
    // Diese Methode dient zum Abfangen von Ereignissen
    // In dieser App ist eigentlich nur das Anklicken des OK-Buttons
    // das entscheidende Ereignis
    {
       if (event.getSource() == ok) // wurde der OK-Button geklickt?
       {
           // Achtung: Hier findet keine Überprüfung des Textes statt,
           // ob es sich dabei wirklich um eine Zahl handelt.
           // Falscheingaben führen zu einem Laufzeitfehler.

           // Die Instanzvariable wert wird in eine double-Zahl umgewandelt
           // Dazu wird die Methode getText() der Klasse JTextField aufgerufen
           // Das Umwandeln macht die Methode parseDouble() der Klasse Double. 
           wert = Double.parseDouble(tf.getText());

           // Neuzeichnen des Zeichen-Panels
           zeichenPanel.repaint();
       }
    }
    
    public static void main(String[] args)
    {
        SwingUtilities.invokeLater(() -> new Anwendung());
    }
}

Dank der vielen Kommentare, die ich eingefügt habe, muss dieser Quelltext eigentlich nicht mehr beschrieben werden. Wie bereits in den Kommentaren gesagt, ist die folgende paintComponent()-Methode für Sie die wichtigste:

   protected void paintComponent(Graphics g)
   {
      super.paintComponent(g);
      g.setFont(new Font("SansSerif", Font.BOLD, 24));
      g.setColor(Color.BLACK);
      g.drawString(String.valueOf(wert), 30, 50);
   }

Wenn Sie den angezeigten Text durch ein rotes Quadrat ersetzen wollen, ändern Sie die paintComponent()-Methode folgendermaßen:

   protected void paintComponent(Graphics g)
   {
      super.paintComponent(g);
      g.setColor(Color.RED);
      g.fillRect(50,50,100,100);
   }

Machen Sie sich mit der Anwendung vertraut und bauen Sie noch ein paar andere Graphiken in das Zeichen-Panel ein. Danach können Sie sich dem nun folgenden Projekt zuwenden.

Eine erste Version des Funktionsplotters

Hier sehen wir schon eine erste Version des Funktionsplotters.

protected void paintComponent(Graphics g)
{
   super.paintComponent(g);
   zeichneAchsen(g);
   zeichneFunktion(g);
}

Nun können wir uns ganz auf das Zeichnen der Koordinatenachsen konzentrieren. Also auf zur nächsten "richtigen" Aufgabe.

        // Beschriftung der x-Achse
        g.setFont(new Font("SansSerif", Font.PLAIN, 12));
        g.drawString("-10", yAchseX - skalierung*10-10, xAchseY + 30);
        g.drawString("-5",  yAchseX - skalierung* 5-7,  xAchseY + 30);
        g.drawString("5",   yAchseX + skalierung* 5-3,  xAchseY + 30);
        g.drawString("10",  yAchseX + skalierung*10-7,  xAchseY + 30);

Falls Sie bereits über fortgeschrittene Java-Kenntnisse verfügen, können Sie ja mal versuchen, den Funktionsplotter in verschiedener Hinsicht zu erweitern. Beispielsweise könnte man den Definitionsbereich der Funktion über zwei Textfelder einlesen und dann den Skalierungsfaktor entsprechend berechnen lassen. Oder Sie zeichnen nicht nur die Funktion, sondern in einer anderen Farbe auch deren 1. Ableitung ein. Vielleicht haben Sie selbst ja auch noch interessante Ideen, die Sie dann bei der nächsten Sitzung einmal vorführen.

Zur Klausur

Das Funktionsplotter-Projekt geht weit über die Anforderungen hinaus, die in der Klausur gestellt werden, es ist eigentlich für Leute gedacht, die sich in der Vorlesung langweilen, weil sie schon alles mal gehört haben. Also geraten Sie nicht in Panik, wenn Sie Probleme mit diesem Projekt haben. In der Klausur werden nur Aufgaben mit Konsolen-Ausgabe behandelt.