GUI. AnPr. Name Klasse Datum. ANPR_GUI_Canvas_v03.docx Seite 1

Transkript

1 Name Klasse Datum 1 Canvas malen, ohne Einschränkungen Das Wort Canvas bedeutet Leinwand und soll ausdrücken, dass wir damit auf einer Fläche beliebige Formen platzieren können. Hierzu gehören unter anderem: Linien Rechtecke Ovale (und somit auch Kreise) Polygone Bilder Im Gegensatz zur Platzierung von Elementen in einem JFrame, in dem sich die Umgebung um das notwendige Neuzeichnen der Elemente kümmert, müssen wir beim Canvas hier dem System selbst mitteilen, wann und wo eine Änderung passiert ist und ein Neuzeichnen notwendig ist. Doch davon später mehr Grundsätzlich ist das Konzept, wie wir mit dem Canvas malen in vielen Programmiersprachen ähnlich gelöst. So finden wir bspw. diverse Parallelen zu der Canvas Implementierung von Javascript, welche seit HTML5 unterstützt wird. In Java wiederum gibt es ebenfalls mehrere Implementierungen, je nachdem ob wir unser Programm auf Basis von AWT, Swing oder JavaFX umsetzen. Wir haben uns im vorausgegangenen Teil auf Swing konzentriert, also werden wir an dieser Stelle ebenfalls mit Swing weiterarbeiten. Insofern nutzen wir nicht die Klasse java.awt.canvas, sondern javax.swing.jpanel. Die Nutzung ist aber weitgehend identisch. Anmerkung: Es würde zwar auch funktionieren, dass wir in einem JFrame ein Canvas einfügen, aber es ist absolut nicht zu empfehlen, Canvas als heavy weight und JFrame als light weight Komponenten zu mischen. Wir würden beim Neuzeichnen mitunter fehlerhafte Ergebnisse erzielen. Insofern nutzen wir JPanel. 2 Das JPanel Bevor wir beginnen, müssen wir uns ein paar Gedanken über das malen auf einem Canvas (bzw. bei uns nun JPanel) machen. Sehen wir uns das Grundgerüst unseres Codes mal an: Wie Sie sehen, bauen wir uns zuerst eine eigene Klasse, welche wir aus dem JPanel ableiten. Dadurch haben wir eine sehr große Flexibilität, eigene Funktionen umzusetzen. Generische Einstellungen brauchen wir momentan noch nicht, insofern verzichten wir auf einen eigenen Konstruktor. Das wichtigste ist nun die paint Methode. Hier müssen wir uns um alle Elemente kümmern, die aktuell auf dem Canvas zu sehen sein sollen. Wenn ich aber bereits etwas auf dem Canvas habe und lediglich ein neues Element hinzuzeichnen möchte kann ich dann nicht auf das alte verzichten? Es wurde ja schon gezeichnet! ANPR_GUI_Canvas_v03.docx Seite 1

2 Antwort: Nein, das kann man nicht! Dies zu verstehen ist wahrscheinlich die wichtigste Neuerung gegenüber allem anderem, was man bis dahin an Ausgaben programmiert hat. In der paint Methode muss immer alles angegeben sein, was aktuell auf dem Canvas zu sehen ist. Die Erklärung folgt: Wir kommunizieren bei der Erstellung unserer Grafiken relativ direkt mit dem Betriebssystem und damit weiter mit der Grafikkarte. Wenn wir nun einen Canvas mit Elementen bestückt haben, dann weiß das System, welche Pixel jeweils mit welcher Farbe belegt sein sollen. Verschieben wir aber das Fenster, oder verdecken es kurzfristig mit einem anderen Fenster, so muss der gesamte Canvas Inhalt neu gezeichnet werden. Hieraus entnehmen wir folgende grundlegende Vorgabe: Das System muss in der Lage sein, das Neuzeichnen der Grafiken selbst anzusteuern. Dies erreichen wir, wenn sämtliche Positionierungen von Elementen in einer zentral aufrufbaren Methode realisieren. Im Fall von Java ist dies die paint Methode. Sie erhält als Parameter den Grafikkontext, welcher für das Zeichnen der Elemente benötigt wird. Der Aufruf dieser Methode erfolgt immer vom System! Was passiert aber, wenn ich eine Grafik während des Programmablaufes selbst ändern möchte? Woher soll das System nun wissen, dass es die paint Methode aufrufen soll! Antwort: Das ist ein sehr wichtiger Punkt wir brauchen (neben dem System) ebenfalls die Kontrolle über den Aufruf. Dies erfolgt über das repaint Kommando. Dies werden wir weiter Unten genauer unter die Lupe nehmen. 3 Die ersten Grafiken entstehen Fangen wir nun mal mit einer einfachen Linie an. Hierbei müssen wir zuerst den Grafikkontext auf einen 2D Kontext ändern. Dieser bietet uns einfachere Methoden für das Zeichnen auf einer 2D Ebene. Danach können wir die Linie zeichnen. Dies geschieht, indem wir die Koordinaten des Startpunktes und denen des Endpunktes angeben. Achtung! In der Mathematik haben wir gelernt, dass der Koordinatenursprung im ersten Quadranten links unten ist. Die Y-Achse also nach oben zeigt. Im Java Canvas ist dies links oben. Somit zeigt die Y-Achse nach unten! Nun müssen wir unser JPanel noch in ein JFrame einbinden. Dies funktioniert genauso, wie wir bereits einfache Elemente eingebunden haben. Nachdem wir jedoch ausschließlich unser JPanel einbinden, benötigen wir keinen Layoutmanager (der Einfachheit halber wurde hier auf das Auslagern der Initialisierung in eine eigene Methode verzichtet): Wenn wir unser Programm nun aufrufen, sehen wir einen schwarzen Strich Nun fehlt noch der Feinschliff! Die Farbe und die Liniendicke soll nun verändert werden. Hierzu müssen wir nochmal den Grafikkontext ansehen. Man kann sich das Zeichnen von Linien auf einem Canvas vorstellen, als ob wir einen Stift hätten, mit dem wir malen. Dieser Stift kann nun in seinen Eigenschaften verändert werden also die Farbe und die Dicke des Stiftes. Sehen wir uns den folgenden Code mal an: Seite 2

3 GUI Nun ergänzen wir das Ganze um eine weitere Linie und sehen, dass diese dann ebenfalls mit den Einstellungen rot und 5px gezeichnet wird. Um nun noch die Hintergrundfarbe zu ändern müssen wir noch ein wenig ausholen. Standardmäßig ist die Hintergrundfarbe unseres JPanels auf transparent gestellt. Wenn wir also die Backgroundfarbe mit this.setbackground(color.white); anpassen wollen, müssen wir vorher die Transparenz ausschalten: this.setopaque(true); Neben der Linie können wir noch andere Grafiken zeichnen. Bspw. ein Oval: Hinweis: Wenn es zu pixelig wirkt, kann dies mit folgender Codezeile am Anfang von paint verbessern: g2d.setrenderinghint(renderinghints.key_antialiasing, RenderingHints.VALUE_ANTIALIAS_ON); Was jetzt noch fehlt ist die Füllung. Hierfür gibt es eine eigene Methode filloval, welche zwar genauso funktioniert wie drawoval, jedoch keinen Rand zeichnet, sondern eine ausgefüllte Ellipse. Um nun eine Ellipse mit Rand zu zeichnen, müssen wir nun beide Methoden nacheinander genutzt werden: Hier ist es nun wichtig, dass wir zuerst die Füllung malen und danach erst den Rahmen, da sonst die Füllung die Hälfte des Rahmens wieder überdecken würde. Weiterhin sollte an dieser Stelle klar sein, dass wir die Eigenschaften des Ovals (also Position des Mittelpunktes und die Höhe/Breite) in einem realen Projekt nicht hart codieren würden, sondern über geeignete Klassen verwalten, womit wir bei filloval und drawoval garantiert immer die gleichen Eigenschaften setzen würden. Die Ellipse ist hier immer entweder waagerecht oder senkrecht ausgerichtet. Wie schaffe ich eine Ellipse, welche beliebig im Raum steht? Antwort: Hier kommen wir an die Grenzen von drawoval und filloval. Um eine beliebig auf dem Canvas stehende Ellipse zeichnen zu können, müssen wir mit Transformationen arbeiten. Dies würde den Rahmen dieses Kurses jedoch sprengen. Soviel sei allerdings verraten wir müssen unseren virtuellen Zeichenstift mit Hilfe von g2d.translate und g2d.rotate manipulieren. Seite 3

4 Sehen wir uns nun zwei weitere, wichtige Elemente an das Rechteck und das Polygon. Beginnen wir mit dem einfacheren von beiden, dem Rechteck. Hier gibt es (wie bei der Ellipse auch) eine Methode für den Rahmen (drawrect) und eine Methode für die Füllung (fillrect). Beide benötigen vier Parameter. Die ersten beiden legen den Punkt oben links fest, der dritte die Breite und der vierte die Höhe. Alles andere gilt wie bei der Ellipse auch. Das Polygon deckt alle Formen ab, welche durch eine Anzahl von Geraden aufgebaut wird. Hierbei gibt es zwei verschiedene Methoden, ein Polygon zu zeichnen. Beginnen wir mit der rudimentären. Sehen wir uns dazu den folgenden Code an: Da ein Polygon aus Linien besteht, müssen die Anfangs- und Endpunkte der Linien festgelegt werden, wobei der Endpunkt der ersten Linie zugleich der Anfangspunkt der zweiten Linie ist. Die letzte Linie ist jeweils der Endpunkt der vorletzten Linie und der Anfangspunkt der ersten Line, womit das Polygon immer geschlossen ist. Da wir nicht bei jedem paint Vorgang die Arrays neu erzeugen wollen, werden diese in Instanzvariablen gespeichert. Dies vermeidet unnötige Arbeit beim Garbagecollector. Wie beim Rechteck und bei der Ellipse auch, gibt es hier sowohl die drawpolygon, als auch die fillpolygon Methode. Die zweite Möglichkeit, ein Polygon zu zeichnen ist über ein eigenes Polygon Objekt. Es ist speziell auf das Zeichnen ausgerichtet und kann sehr viel einfacher aufgebaut werden, als mit Hilfe von zwei Arrays für die X- und Y-Werte. Hierbei werden die einzelnen Punkte sequenziell in das Polygon hinzugefügt. Das Zeichnen wird anschließend lediglich auf das Polygonobjekt angewendet. Seite 4

5 GUI 4 Einbinden von Grafikdateien Was nun noch fehlt, sind die vorgefertigten Grafiken aus Bilddateien. Diese werden zuerst in einem BufferedImage abgelegt, damit das System einfachen Zugriff hat. Die Hilfsklasse ImageIO liefert einige einfache Methoden, um den Umgang mit Bilddateien zu vereinfachen. Auch hier speichern wir die Daten in einer Instanzvariablen, auf die wir somit auch in der paint Methode Zugriff haben. Die Methode zum Anzeigen der Grafik heißt drawimage und erwartet vier Parameter. Der erste ist das geladene BufferedImage. Der Zweite ist ein optionaler Filter, der vor dem Bildrendern angewendet werden kann. Wir setzen ihn vorerst auf null, da wir keinen Filter benötigen. Die letzten beiden Parameter sind die Koordinaten des oberen linken Punktes der Grafik. 5 Was macht die Maus? Da wir in einem JPanel (bzw. Canvas) keine Buttons haben, müssen wir die Position der Maus anderweitig herausfinden. Hierzu dient der MouseListener. Dieses Interface erfordert diverse Methoden, welche vom System bei Mausaktivitäten aufgerufen werden. Wie beim ActionListener auch, fügen wir das implements MouseListener ein und Eclipse ergänzt die fehlenden Methoden per Knopfdruck: Methode: mouseclicked(mouseevent msevt) mouseentered(mouseevent msevt) mouseexited(mouseevent msevt) mousepressed(mouseevent msevt) mousereleased(mouseevent msevt) Wird aufgerufen wenn der Mauszeiger innerhalb der Komponente ist und der User klickt. der Mauszeiger in eine Komponente hineingeführt wird. der Mauszeiger aus einer Komponente herausgeführt wird. eine Maustaste gedrückt wird. eine Maustaste losgelassen wird. Entscheidend ist nun die Interpretation der MouseEvent Variablen. Für s erste begnügen wir uns mit folgenden Methoden: Methode: Funktionalität: msevt.getx() Gibt die X-Koordinate des Events zurück. msevt.gety() Gibt die Y-Koordinate des Events zurück. msevt.getclickcount() Hiermit kann ein Doppelklick von einem einfachen Klick unterschieden werden. msevt.getbutton() Gibt an, welcher Mausknopf seinen Status verändert hat. Seite 5

6 Der hier gezeigte Code gibt eine Beispielimplementierung an (wobei nur eine der 5 Interfacemethoden gezeigt wird). Zuerst implementieren wir den MouseListener (und damit die 5 notwendigen Methoden). Anschließend müssen wir an einer prominenten Stelle den MausListener registrieren. Hier bietet sich der Konstruktor an (oder eine eigene Methode, welche im Konstruktor aufgerufen wird). Da die Klasse selbst der Listener ist, registriert sie sich also selbst. Um die grundsätzliche Funktionsweise zu demonstrieren, wird hier bei der mouseclicked Methode lediglich eine Konsolenausgabe mit der X-Koordinate des Klickpunktes ausgegeben. Dieser bezieht sich auf das Element, welches den MouseListener registriert (in unserem Fall ja das JPanel). Wenn also im JPanel ganz links geklickt wird, so erhalten wir die Nachricht 0. 6 Das paint antriggern Eigentlich könnten wir jetzt schon loslegen. Allerdings müssen wir noch verstehen, wie wir das paint antriggern können. Dies ist bspw. wichtig, wenn wir aufgrund von Userinteraktionen Grafiken verändern wollen. Hierzu gibt es eine Methode, welche mit zwei verschiedenen Parameterlisten existiert die repaint Methode. Wenn wir diese aufrufen, muss folgendes passieren: Löschen der nicht mehr notwendigen Pixel Zeichnen der notwendigen Pixel Wie wir ja bereits wissen, erledigt dies die Methode paint, welche ja vom System aufgerufen wird. Wir haben genau hierfür die Methode überschrieben und mit unserem Code bestückt. Das Löschen wurde von uns jedoch noch nicht realisiert das ist in der ursprünglichen Klasse JPanel umgesetzt, weshalb wir diese somit aufrufen müssen. Um diese gesamte Funktionalität verstehen zu können, schreiben wir ein Programm, welches an der Position, an der wir mit der Maus Klicken, einen Kreis zeichnen lassen: Seite 6

7 GUI Wenn wir das Programm nun laufen lassen, so können wir tatsächlich mit einem Klick an beliebiger Position den Kreis erscheinen lassen. Wer mag, kann die Positionierung noch so anpassen, dass der Kreis mittig auf dem Mauszeiger erscheint und nicht rechts unterhalb. Nun kommen wir zum letzten Punkt dem repaint eines bestimmten Bereiches. Bei aufwändigeren grafischen Designs mit vielen zu zeichnenden Elementen bemerken wir mitunter ein störendes Flackern der Grafiken. Dies liegt daran, dass Java vor dem Neuzeichnen das JPanel komplett löscht. Um dies in den Griff zu bekommen, gibt es zwei Möglichkeiten. Die eine ist die double buffer strategy, bei der wir zwei Grafikebenen haben; eine untere und eine obere. Auf der unteren wird immer gezeichnet und nach dem Zeichnen tauschen die beiden Ebenen die Plätze. Wir werden hier nicht tiefer auf das double-buffering eingehen, da es primär für animierte Spiele verwendet wird. Wer trotzdem sich dafür interessiert, wird im Internet fündig bspw.: Die zweite Option zur Vermeidung von Flackern ist, nur den Bereich neu zu zeichnen, welcher sich tatsächlich geändert hat. Hier kommt eine überladene Version der repaint Methode ins Spiel. Diese erwartet vier Parameter den oberen linken Punkt des neu zu zeichnenden Bereiches, die Breite und die Höhe. Ergänzen wir den Code unseres vorigen Programms wie dargestellt. Wir geben nun ein Rechteck, beginnend am oberen linken Punkt an, welches genau ein Pixel größer ist als der Kreis (um Randeffekte zu vermeiden). Nun wird der Kreis auch beim Klick gezeichnet, allerdings verschwindet er beim Klick auf eine andere Position nicht mehr, da das Löschen des alten Inhaltes nur auf der neuen Klickposition erfolgt. Aus diesem Grunde ist bei der Nutzung dieser repaint Methode einiges zu beachten: Durch Randeffekte können Pixel verschwinden (also nicht gezeichnet werden) Der Bereich an dem alte Elemente gelöscht werden müssen, ist immer zu berücksichtigen. Dies fordert oft einiges an Arithmetik. Die Bereiche sollten idealerweise über Arrays oder einfache Berechnungen festgelegt werden. Die Nutzung dieser repaint Methode ist meist sinnvoll, wenn Elemente ausgetauscht werden sollen (bspw. Bild A durch Bild B) Seite 7

8 7 Lizenz Diese(s) Werk bzw. Inhalt von Maik Aicher ( steht unter einer Creative Commons Namensnennung - Nicht-kommerziell - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz. Seite 8