Java: Farbübergänge selbst erstellen

22Apr/090

Java: Farbübergänge selbst erstellen

In diesem kleinen Beispiel möchte ich zeigen, wie man mit Java Farbübergänge der marke Eigenbau ertstellen kann. Klar, es gibt natürlich schon vorgefertigte Funktionen wie etwa GradientPaint() die einem genau das lefern was man braucht, aber ich wollte mal probieren selbst eine ähnliche Funktion zu basteln.

Alles wa wir brauchen ist ein Klasse die ein JFrame, also ein Fenster bereitstellt, auf dem wir zeichnen können. Wenn das Ereldigt ist plazieren wir noch einen Knopf (JButton) auf dem Formular in dessen Klick-Ereignis wir die Funktion aufrufen, die den Farbverlauf generiert.

Erstmal zum Verständnis: Wie funktioniert ein Farbverlauf? Eine Farbe setzt sich aus 3 Grundwerten zusammen: Rot, Grün und Blau. Die so genannten RGB-Werte aus diesen drei Farben kann man alle uns bekannten Farben zusammenmischen. Hier könnt ihr damit ein bisschen experementieren und mal verschiedene Farbwerte eingeben und gucken was rauskommt.

In HTM zum Beispiel werden Farben in der Hexadezimalen Schreibweise angegeben (zB. #2F13C4). In unserem Java Beispiel werden die zahlen in Dezimaler Schreibweise angegeben, diese können Werte von 0 - 255 enthalten. Diese Werte geben jeweils die Intensität der Farbe an. So ist zum Beispiel die Farbe Rot so deklariert: 255, 0, 0 - Der Rotanteil ist voll und die Grün und Blau Anteile leer. Somit erhalten wir ein leuchtendes Rot! Wenn man die nullen durch andere Zahlen ersetzt erhällt man weitere Farben. Die Farben Weiss und Schwarz sind die einfachsten: Weiss ist wenn alle drei Werte voll sind (255, 255, 255) und Schwarz das Gegenteil! (0, 0, 0)

Und so funktioniert auch ein Farbverlauf. Wenn man zB. einen Farbverlauf von Rot in Weiss haben möchte muss man ledeglich eine Schleife erstellen die für uns einen zB. waagerechten Streifen von Rot auf Weis Streicht. Sagen wir der Streifen soll 255 pixel breit und 100 Pixel hoch sein. Somuss man um einen Verlauf zu bekommen jeden Pixel der Rechts von dem Aktuellen liegt nur minimal anders färben.

Pixel 1: (255, 0, 0) Pixel 2: (255, 1, 1) Pixel 3: (255, 2, 2) usw.

Um etwas zeichnen zu können muss man ein Graphics-Objekt anlegen, welches uns die nötigen Funktionen bereitstellt. So würde unsere Funktion aussehen:


public void paintComponent(Graphics gr){

        //Schleife sorgt dafür, dass der Übergang nach rechts erfolgt
        for (int i = 0; i< 255; i++){
                //Eine neue Farbe generieren
                gr.setColor(new Color(255,i,i));
                //Einen horizontalen Balken malen
                gr.fillRect(i, 0, 1, 100);
        }

    }

Oben sehen Sie die Funktion, diese erwartet einen Parameter vom Typ Graphics, mit dem wir dann zeichnen können. Die Schleife fängt an und läuft 255 mal durch und macht unseren Übergang also 255 Pixel Breit.

In Zeile 8 wird dann eine Farbe generiert. Mit dem Operator new wird eine neue Instanz der Klasse Color erzeugt, die als Konstruktor 3 RGB-Werte erwartet. Der Erste Wert ist bei uns konstatnt 255 damit wir die Farbe rot bekommen. Die anderen beiden Werte (Grün und Blau) steigen dann zusammen mit i bis sie 255 erreichen.

In Zeile 10 wird dann schließlich Balken gemalt, der 100 Pixel hoch ist. die erten beiden Werte geben die Koordinaten (x,y) des anfangspunkts an. Die beiden anderen geben die Koordinaten (x,y) des Endpunkts an oder andres gesagt die Breite und Höhe.

Wenn wir die Balken zbB. breiter machen können die die Übergänge deutlicher sehen, und auch die einzelnen Balken sind nun besser erkänntlich.

Dieses vorgehen kann man nun veschieden Variieren um alle möglichen Übergänge zu erhalten!

Hier ist der Vollständige Code der Klasse:


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

/**
 *
 * @author Sebastian Gross // blog.bigbasti.com
 */

//Die Klasse erbt von JFrame also ist keine extra Instanz
//eines Fenster nötig.
public class Verlauf extends JFrame implements ActionListener {

    private JButton knopp;

    public Verlauf(String bName){

        //Einen Knopf erstellen, mit dem wir das Zeichen
        //Ereignis auslösen
        knopp = new JButton(bName);
        knopp.setBounds(50, 100, 150, 20);

        //Unserem Fenster Namen und ein Layout zuweisen
        this.setLayout(null);
        this.setTitle(bName);

        //Ruft die Funktion auf, die für das Anzeigen des
        //Fensters sorgt
        go();
    }

    public void actionPerformed(ActionEvent e) {
        //Hier wird das Zeichnen Event ausgelößt
        //und die PaintComponent Methode aufgerufen
        paintComponent(this.getGraphics());
    }

    public void paintComponent(Graphics gr){
        for (int i = 0; i< 255; i++){
                gr.setColor(new Color(255,i,i));
                gr.fillRect(i, 0, 3, 100);
        }

    }

    public void go(){
        //Dem Knopf einen ActionListener zuweisen
        //in diesem Fall die Eigene Klasse da
        //diese ja das Interface ActionListener
        //implementiert
        knopp.addActionListener(this);

        //Den Konpf auf das Fenster setzen
        this.getContentPane().add(knopp);

        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        this.setSize(600, 600);

        //Nachdem Größe und Schließverfahren
        //eingestellt wurden das Fenster anzeigen:
        this.setVisible(true);
    }

    public static void main(String[]args){
        //Die Startmethode die lediglich eine Instanz
        //von sich selbst erzeugt

        Verlauf gui = new Verlauf("Hallo Welt!");

        //Das Programm ist dann beendet, wenn der
        //Benutzer auf das X im Fenster klickt
        //Siehe Zeile 61
    }
}

Auf die anderen Sachen werde ich hier nicht eingehen, da diese für dieses Beispiel uninteressant sind und auch anders gelößt werden können! Diese klasse könnt ihr direkt abspeichern und ausführen!

Share and Enjoy: