Bitmaps und Animationen

Transkript

1 Bitmaps und Animationen 1

2 Themenübersicht 1. Bitmaps 1. Die Klasse Image 2. Laden und Anzeigen von Bildern 3. Skalierungen und Transformationen 2. Animationen 1. Animationen mit Threads 2. Bildschirmflackern beheben 2

3 Teil I - Bitmaps 3

4 Laden und Anzeigen Unterscheidung: Laden einer Bitmap Von einem lokalen Speichermedium Aus dem Internet... Anzeigen der Bitmap 4

5 Die Klasse Image Image ist eine abstrakte Klasse Allgemeine Schnittstelle zu Bilddaten Wird plattformabhängig implementiert Stellt die Superklasse für alle Klassen dar, die grafische Bilder repräsentieren 5

6 Die Klasse Image Um die Implementation der Methoden brauchen wir uns bei der Verwendung von Image nicht zu sorgen. Bildschirm-Speicher Organisation und Farbpalette werden von alleine verwaltet. 6

7 Interfaces von Image Drei Interfaces finden Verwendung: ImageProducer benutzen Klassen, die eine Bitmap zur Verfügung stellen ImageConsumer benutzen die Klassen, die Bitmaps darstellen ImageObserver benutzen Klassen, die den Ladevorgang überwachen 7

8 Laden von Bitmaps.gif.png und.jpg werden unterstützt. getimage() Übernimmt das Caching des Bildes Undefinierte Cache-Zeit -> Speicherleckagegefahr createimage() Übernimmt kein Caching Muss von Programmierer selbst übernommen werden. Benutzung empfohlen! 8

9 Überwachen des Ladevorgangs Status von Medien-Objekten verfolgen: Klasse MediaTracker verwendet mediatracker.addimage() verwenden Abgewarten mit waitforall() Exception abwarten, dann fertig. Ladevorgänge können über IDs priorisiert werden waitforid() benutzen 9

10 Darstellen von Bitmaps Zum Anzeigen wird drawimage() aus Graphics verwendet. Neben dem Image-Objekt und der Position muss auch ein ImageObserver-Objekt übergeben werden -> Referenz auf das aktuelle Fenster benutzen. 10

11 Codebeispiel private Image img; img = gettoolkit().createimage("bild.gif"); MediaTracker mt = new MediaTracker(this); mt.addimage(img, 0); try{mt.waitforall();} catch (InterruptedException e) {} g.drawimage(img,40,40,this); Vgl. Code-Beispiel 1 11

12 Eigene Klasse zum Anzeigen Eine Erweiterung der Klasse Canvas Canvas dient allgemein zur Anzeige von Bitmaps und Animationen. Hieraus muss immer eine eigene Klasse abgeleitet werden, um eigene Anzeigen zu definieren. Immer paint() überschreiben! getpreferredsize() und getminimumsize() überschreiben für den Layoutmanager MediaTracker verwenden! Vgl. Code-Beispiel 2 12

13 Bitmaps skalieren Neues Image-Objekt mit getscaledinstance() Problemstellung: Wie wird skaliert Welche Pixel beim Vergrößern hinzufügen? Welche Pixel beim Verkleinern weglassen? Abwägung: Qualität <-> Geschwindigkeit Es stehen verschiedene Algorithmen zu Verfügung. 13

14 Skalierungsalgorithmen SCALE_DEFAULT SCALE_FAST SCALE_SMOOTH SCALE_REPLICATE SCALE_AREA_AVERAGING Standardalgorithmus Fokus auf Geschwindigkeit Fokus auf Bildqualität Verwendet Replicate-Filter Verwendet Area Averaging Filter 14

15 Was passiert wirklich? public Image getscaledinstance(int width, int height, int hints) { ImageFilter filter; if((hints&(scale_smooth SCALE_AREA_AVERAGING))!=0) filter=new AreaAveragingScaleFilter(width, height); else filter = new ReplicateScaleFilter(width, height); ImageProducer prod; prod = new FilteredImageSource(getSource(), filter); return Toolkit.getDefaultToolkit().createImage(prod); } 15

16 Funktionsweise der Skalierung Replicate-Scale Zeilenverdopplung beim Vergrößern Zeilen weglassen beim Verkleinern Area-Averaging-Scale Neue Zeile durch Mittelwertbildung der benachbarten Zeilen beim Vergrößern und Verkleinern Nearest Neighbour Algorithm Vgl. Code-Beispiel 3 16

17 Affine Transformation Algebraisch lassen sich geometrische Veränderungen als Abbildung beschreiben. In AWT sind affine Abbildungen implementiert. Mathematischer Hintergrund: Transformation zwischen zwei Vektorräumen Punkte, die auf einer Geraden liegen, bleiben auf einer Geraden (Kollineare Abbildung) Parallele Linien bleiben parallel 17

18 Affine Transformation Die Abbildung ist für den zwei-dimensionalen Fall durch eine 3x3 Matrix beschrieben Objekte der Klasse AffineTransform stellen diese dar, die Klasse besitzt Methoden, um die entsprechende Koeffizentenmatrix zu berechnen. Möglich sind beispielsweise: Translation, Skalierung, Rotation, Scherung Es muss Graphics2d verwendet werden! 18

19 Affine Transformation Graphics2D g2 = (Graphics2D)g; AffineTransform at = AffineTransform.getRotateInstance( Math.PI/2., this.getwidth()/2, this.getheight()/2); g2.settransform(at); g2.drawimage(img, 20, 20, this); Vgl. Code-Beispiel 4 19

20 Teil II - Animationen 20

21 Grundprobleme Bei der sequentiellen Anzeige von Bildern ergeben sich typischerweise drei Probleme: Timing zu langsam: Ruckeln Timing zu schnell: Paint-Event gehen verloren, Teile des Bildes werden nicht korrekt dargestellt. Normale paint()/repaint() kann zu Flackern führen Interaktivität muss gewährleistet bleiben 21

22 Einfaches Beispiel public void startanimation(){ while(true) repaint(); } public void paint(graphics g){ ++cnt; g.drawstring("counter = "+cnt,10,50); try{thread.sleep(1000);} catch(interruptedexception e){} } Das Problem ist, dass keine Benutzereingaben mehr möglich sind! Vgl. Code-Beispiel 5 22

23 Lösung: Let's thread! public void startanimation(){ Thread th = new Thread(this); th.start();} public void run(){ while (true){ repaint(); try{thread.sleep(1000);} catch(interruptedexception e){} }} public void paint(graphics g){ ++cnt; g.drawstring("counter = "+cnt,10,50);} 23

24 Animation mit Bitmaps Einfache und häufig verwendete Lösung: Alle Einzelbilder sind in einzelnen Dateien abgelegt Im Programm alle einen einen Container legen Animation erst starten, wenn alle Einzelbilder geladen sind MediaTracker benutzen! Vgl. Code-Beispiel 6 24

25 Bildschirmflackern Ursache des Flackerns: Vor jeder Ausführung von paint() wird das Fenster zunächst gelöscht. Möglichkeiten: Bildschirm nicht löschen (problematisch) Nur den benötigten Teil löschen Doppelpufferung Clipping-Region festlegen 25

26 Bildschirm nicht löschen repaint()ruft die Methode update()auf. public void update(graphics g){ g.setcolor(getbackground()); g.fillrect(0, 0, width, height); g.setcolor(getforeground()); paint(g); } Diese Methode kann nun überschrieben werden: public void update(graphics g){paint(g);} 26

27 Nur benötigte Teile löschen Das Problem des Gar-nicht-löschens ist, dass es für bewegte Bilder ungeeignet ist. Daher muss der verschwindende Teil manuell mit der Hintergrundfarbe überschrieben werden. Das Verfahren ist bei der Nutzung von Grafikprimitiven sinnvoll - denn da weiß das Programm genau, was wann wo gemacht wird. 27

28 Beispiel: Snake Eine Schlange von aneinandergesetzten Rechtecken bewegt sich durch das Fenster. Die Rechteck-Objekte werden in einem Array gehalten. Update() wird so überschrieben, dass nur paint() ausgeführt wird. Das letzte Element im Array wird in Hintergrundfarbe gezeichnet. Vgl. Code-Beispiel

29 Doppelpufferung Grenzen der vorherigen Lösung: Sie kann nicht helfen, wenn der zu löschende Teil sehr groß ist oder der zu löschende Teil unbekannt (bei Bitmaps) ist. Lösung: Schreiben der Bildschirmausgabe in ein Offscreen-Image Anzeige, wenn alle Ausgabeoperationen fertig Vorsicht: Höherer Speicherbedarf 29

30 Offscreen-Image Ein Image-Objekt mit createimage() erzeugen Ein Graphics Objekt erzeugen Graphics-Kontext mit getgraphics erzeugen Alle Bildschirmausgaben (auch löschen) auf diesen Kontext Fertiges Offscreen-Image mit drawimage() auf das Ausgabefenster kopieren Vgl. Code-Beispiel

31 Fragen?? 31

32 Danke für's Zuhören. 32