Graphikprogrammierung. Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 1

Transkript

1 Graphikprogrammierung Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 1

2 Graphikprogrammierung Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 2 Graphikausgabe und AWT-Thread Zeichnen bei Swing Java 2D-API Fonts Images Zusammenfassung

3 Grundlagen der Graphikausgabe Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 3 Components zeichnen sich mit Methode public void paint(graphics g) wobei der Graphics-Parameter die Zeichenfläche für die Component darstellt Anwenderprogramm darf paint nicht aufrufen, sondern Aufruf der paint-methoden erfolgt im AWT-Loop Anwenderprogramm kann durch Aufruf von public void repaint() public void repaint(int x, int y, int width, int height) das Neuzeichnen der Komponente (eines Bereichs der Komponente) fordern

4 AWT-Loop Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 4 Anwenderprogramm und AWT-Loop laufen in unterschiedlichen Threads Anwenderprogramm führt Änderungen in den Daten durch, die Änderungen in der GUI bewirken sollen ruft repaint der betroffenen Component auf AWT-Loop durch repaint weiss AWT, dass Component neu gezeichnet werden muss AWT-Loop arbeitet die Zeichenanforderungen ab bewirkt Neuzeichnen der Components

5 AWT-Loop Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 5 Neuzeichnen: AWT-Loop ruft Methode update bei der Component auf update ruft paint auf public void update(graphics g) { paint(g); paint führt Zeichnen der Component durch public void paint(graphics g) {... update wird verwendet, um in Painting grundsätzlich einzugreifen (z.b.: DoubleBuffering) paint wird überschrieben, um bei Components spezielle Darstellungen zu realisieren

6 AWT-Loop Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 6 Anwenderprogramm Component AWT Event Loop Changes() repaint register update update(g) paint(g) Thread Beachte: update und paint laufen im AWT-Thread lang laufende paint-methoden blockieren AWT-Thread

7 Graphikkontext Graphics Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 7 In Methode paint wird als Parameter ein Graphics-Objekt übergeben public void paint(graphics g) Stellt virtuelle Zeichenfläche für die Component dar (genannt Graphikkontext) hat Größe der Component mit 0/0-Koordinate im linken, oberen Eck der Component 0,0 getwidth()-1, getheight()-1 ermöglicht Zeichnen von Linien, Figuren, Text und Bildern, hat eine Reihe von Zuständen, die die Grafikausgabe beeinflussen - Color: gegenwärtige Zeichenfarbe - Font: gegenwärtige Schriftart für Text - Clip: Zeichenoperationen wirken sich nur innerhalb des Clip aus) - XORMode: logische Pixeloperation (XOR oder Paint)

8 Zeichenoperationen der Klasse Graphics Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 8 clearrect(int x,int y,int w, int h) copyarea(x,y, w,h, dx, dy) draw3drect(x,y,w,h, boolean raised) drawarc(x,y,w,h, int startangle, int arcangle) drawline(x1,y1,x2,y2) drawoval(x,y,w,h) drawpolygon(x[], y[], int npoints) drawpolyline(x[], y[], int npoints) drawrect(x,y,w,h) drawroundrect(x,y,w,h, int arcwidth, int archeight) drawstring(string str, x,y) fill3drect(x,y,w,h, boolean raised) fillarc(...) filloval(...) fillpolygon(...) fillroundrect(...) drawimage(image img, x,y, ImageObserver obs)...

9 Weitere Methoden der Klasse Graphics Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 9 translate(int x, int y) // Verschieben des Koordinatenursprungs setpaintmode() // normalen Zeichenmodus setzen (default) setxormode(color c1) // XOR-Modus momentane Farbe xor c1 setfont(font f) // Schriftart setzen setcolor(color c) // Zeichenfarbe setzten setclip(x,y,w,h) // setzt neues Clip (Pixel nur innerhalb betroffen) FontMetrics getfontmetrics() // holt Metrik-informationen zur Font // zb. wieviele Pixel breit/hoch ist "1. Object" Font getfont() // aktuelle Schriftart Color getcolor() Rectangle getclipbounds() // Rechteckigen Clip-Bereich holen; Auch wenn... eine Linie über diesen hinausgeht, wird nur innerhalb gezeichnet.

10 Beispiel Grafikausgabe Vorgehen: Klasse von Canvas ableiten paint-methode überschreiben Canvas-Objekt in Frame einfügen import java.awt.*; import java.awt.event.*; public class PaintTestCanvas extends Canvas { public void paint(graphics g) { super.paint(g); // Löschen for (int x = 0; x <= getwidth()-1; x++) { g.setcolor(new Color(0, (int)(255.0/getwidth()*x), (int)(255.0/getwidth()*x))); g.drawline(x, 0, getwidth()-x, getheight()-1); public static void main(string[] args) { Frame frame = new Frame("Paint test"); frame.add(new PaintTestCanvas()); frame.setsize(new Dimension(200, 200)); frame.setvisible(true); Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 10

11 Animation Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 11 Für bewegte Bilder braucht man Thread class MovingObject implements Runnable {... public void run() { while (true) { try { Thread.sleep(delayTime); catch (InterruptedException e) { move(); repaint(); Verzögerung Bewegung Neu zeichnen Verwendung von repaint mit Bereichsangabe Optimierte Ausgabe, weil nicht alles gezeichnet werden muss... move(); repaint(minx, miny, width, height);... Bereich der neu zu zeichnen ist

12 Beispiel: MovingImage import java.awt.*; import java.awt.event.*; class MovingImageCanvas extends Canvas implements Runnable { private Point point = new Point(0, 50); private int speed; private Image img; public MovingImageCanvas(int speed, String imgname) { this.speed = speed; img = gettoolkit().getimage(imgname); private void move() { point.x = point.x + speed; public void paint(graphics g) { g.drawimage(img, point.x % this.getwidth(), point.y, this); public void run() { while (true) { try { Thread.sleep(10); catch (InterruptedException e) { move(); repaint(point.x % this.getwidth()-speed, point.y, img.getwidth(this), img.getheight(this)); Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 12

13 Double-Buffering Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 13 Durch Löschen des Bildschirms und Neuzeichnen kommt es zu flackern Abhilfe durch Double-Buffering zuerst Zeichnen in ein Image dann Zeichnen des neuen Image auf den Bildschirm Realisiert in update(graphics g) public void update(graphics g) { if (dbimage == null) { dbimage = createimage(getwidth(), getheight()); dbgraphics = dbimage.getgraphics(); dbgraphics.setcolor(getbackground()); dbgraphics.fillrect(0, 0, getwidth(), getheight()); dbgraphics.setcolor(getforeground()); paint(dbgraphics); g.drawimage(dbimage,0,0,this); Image erzeugen Graphics-Objekt für Image erzeugen Hintergrund im Image füllen Zeichnen in Image Image auf Bildschirm zeichnen

15 Painting in Swing Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 15 Painting bei Swing in AWT-Painting eingebettet: Aufruf von public void update(graphics g) und public void paint(graphics g) Aber: paint bei JComponent folgend implementiert public void paint(graphics g) {... paintcomponent(co); paintborder(co);... paintchildren(co);... Zeichnen der Komponente Zeichnen eines Rands Zeichnen der Kinder Üblicherweise wird nur paintcomonent(graphics g) überschrieben public class MyJComponent protected void paintcomponent (Graphics g) { // my custom painting...

16 Painting in Swing Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 16 Features von Painting in Swing: Double-Buffering bereits implementiert und bei jeder JComponent einschaltbar public void setdoublebuffered(boolean db) Verschiedene Borders void setborder(border b) TooltipText void settooltiptext(string text) Deckender oder transparenter Hintergrund void setopaque(boolean opaque)

17 Beispiel Painting in Swing Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 17 class GridJComponent extends JComponent { public GridJComponent() { setlayout(new FlowLayout()); JButton b1 = new JButton("Button 1"); JButton b2 = new JButton("Button 2"); setborder(borderfactory.createloweredbevelborder()); add(b1); add(b2); protected void paintcomponent(graphics g) { int width = getsize().width; int height = getsize().height; g.setcolor(color.gray); for (int i = 0; i < width; i += 10) { g.drawline(i, 0, i, height); for (int i = 0; i < height; i += 10) { g.drawline(0, i, width, i);

19 Java 2D-API Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 19 Ab Java 1.2 leistungsfähige Bibliothek von Zeichenoperationen Komplexe Figuren (Shapes) Einstellungen fürs Zeichnen Strich Füllfarben und Muster Transformationen Clipping Transparenz und Kombination Wiedergabehinweise zur Abstimmung Zeichenqualität versus Laufzeit stroke transform clip fill compose

20 Shapes Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 20 Java 2D stellt eine Reihe von Shapes zur Verfügung Diese existieren jeweils in Float- und Double-Version (folgend wird nur Float angegeben; jeweils der wichtigste Konstruktor) Rechtecke Rectangle2D.Float(float x, float y, float w, float h) RoundRectangle2D.Float(float x, float y, float w, float h, float arcw, float arch) Ellipsen Ellipse2D.Float(float x, float y, float w, float h) Linien Line2D.Float(float x1, float y1, float x2, float y2) Kurven QuadCurve2D.Float(float x1, float y1, float ctrlx, float ctrly, float x2, float y2) CubicCurve2D.Float(float x1, float y1, float ctrlx1, float ctrly1, float ctrlx2, float ctrly2, float x2, float y2 Bogen Arc2D.Float(float x, float y, float w, float h, float start, float extent, int type)

21 Verwendung von Graphics2D [1/8] Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 21 Verwendung von Graphics2D statt Graphics protected void paintcomponent(graphics g) { Graphics2D g2d = (Graphics2D)g; Wiedergabehinweise (RenderingHints) Typecast notwendig Kompromisse zwischen Geschwindigkeit und Zeichenqualität g2d.setrenderinghint( RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_OFF); g2d.setrenderinghint( RenderingHints.KEY_TEXT_ANTIALIASING, RenderingHints.VALUE_TEXT_ANTIALIAS_ON); g2d.setrenderinghint( RenderingHints.KEY_COLOR_RENDERING, RenderingHints.VALUE_COLOR_RENDERING_SPEED);

22 Verwendung von Graphics2D [2/8] Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 22 Striche: Interface Stroke Klasse BasicStroke Stärke, Endung (CAP), Ecken (JOIN) Stroke stroke = new BasicStroke(3.0f, BasicStroke.CAP_ROUND, BasicStroke.JOIN_BEVEL); g2d.setstroke(stroke); CAP: Form von Linienende JOIN: Form von Ecken Strichmuster (DASH) float[] dashpattern = new float[] { 10, 10, 30, 10 Stroke stroke = new BasicStroke(3.0f, BasicStroke.CAP_BUTT, BasicStroke.JOIN_MITER, dashpattern); g2d.setstroke(stroke);

23 Verwendung von Graphics2D [3/8] Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 23 Füllung Farbe g2d.setpaint(color.red); Gradient von 2 Farben entlang einer Linie Paint paint = paint = new GradientPaint(0, 0, Color.red, (float) getwidth(), (float) getheight(), Color.blue); g2d.setpaint(paint); Textur mit Image bufferedimage = ImageIO.read(new File("blue-ball.gif")); Rectangle2D anchor = new Rectangle2D.Double(0, 0, 2 * bufferedimage.getwidth(), 2 * bufferedimage.getheight()); paint = new TexturePaint(bufferedImage, anchor); g2d.setpaint(paint); Anchor-Rechteck

24 Verwendung von Graphics2D [4/8] Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 24 Clipping bei Graphics2D setclip(shape) Setzt Clipping-Region vom System neu!! clip(shape) kombiniert aktuelle Clipping- Region mit Shape Achtung: Überschreibt Clipping- Region des Systems! Graphics2D g2 = (Graphics2D)g; Shape oldclip = g2.getclip(); // Speichern aktueller Clip Shape clipshape = new Elipse2D.Loat(20, 20, 200, 200); g2.clip(clipshape); // Kombinieren mit Ellipse // Zeichnen g2.setclip(oldclip); // Rücksetzen alter Clip

25 Verwendung von Graphics2D [5/8] Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 25 Transformationen bei Graphics2D Skalieren scale g2.scale(2.0, 1.5); g2.draw(square); Verschieben translate g2.translate(20.0, 15.0); g2.draw(square); Rotieren rotate g2.rotate(math.pi / 4.0); // 45 g2.draw(square); Biegen - shear g2.shear(0.3, 0.0); g2.draw(square);

26 Verwendung von Graphics2D [6/8] Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 26 Affine Transformation Alle Transformationen werden als AffineTransforms dargestellt AffineTransform t = new AffineTransform(); AffineTransforms können gesetzt t.settoscale(2.0, 1.5); t.settorotation(math.pi / 4.0) t.settotranslation(50, 50); t.settoshear(0.3, 0.0); oder kombiniert werden t.scale(2.0, 1.5); t.rotate(math.pi / 4.0); t.translate(50, 50); t.shear(0.3, 0.0); Beispiel Vorgehen: AffineTransform savedtrfm = g2d.gettransform(); g2d.translate(x, y); double alpha = ; g2d.rotate(alpha); g2d.draw(shape); g2d.settransform(savedtrfm); Sichern der aktuellen Transformation Translation auf x/y Rotation um Winkel alpha Zeichnen der Figur Zurücksetzen der Transformation

27 Verwendung von Graphics2D [7/8] Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 27 Transparenz und Kombination Alpha-Kanal bei Color beschreibt Transparenz Transparenz 50% Color transpyellow = new Color(0.7f, 0.7f, 0.0f, 0.5f); Komposition von Bildern mit AlphaComposite Regel int rule = AlphaComposite.SRC_OVER; Alpha-Wert float alpha = 0.5; Komposition g2.setcomposite(alphacomposite.getinstance(rule, alpha); g2.setpaint(color.blue); g2.fill(rectangle);

28 Verwendung von Graphics2D [8/8] Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 28 Porter-Duff-Kompositionsregeln SRC_OVER Quelle wird mit Ziel gemischt und überschreibt leere Pixel DST_OVER Quelle hat keinen Einfluss auf Ziel und überschreibt leere Pixel SRC Quelle überschreibt Ziel und leere Pixel CLEAR Quelle löscht Ziel SRC_IN Quelle überschreibt Ziel SRC_OUT... Quelle löscht Ziel und überschreibt leere Pixel DST rote Ellipse SRC blaues Rechteck

30 Font Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 30 Font-Objekte: Setzen des Ausgabefonts Schriftfamilie (Standardnamen: "SansSerif", "Serif", "Monospaced", "Dialog", "DialogInput") Schriftschnitt (Font.PLAIN, Font.BOLD, Font.ITALIC, Font.BOLD + Font.ITALIC) Schriftgrad (Größe in Punkten) Font f = new Font("Serif", Font.BOLD, 14); setfont: Setzen eines Fonts im Graphikkontext jede nachfolgende Textausgabe im gesetzten Font protected void paintcomponent(graphics g) { Font f = new Font("Serif", Font.BOLD, 14); g.setfont(f); g.drawstring("textausgabe im Font Serif Bold, 14pt, 100, 100);...

31 TrueType-Fonts Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 31 TrueType-Fonts werden über InputStreams gelesen URL url = new URL(" InputStream in = url.getstream(); Font f = Font.createFont(Font.TRUETYPE_FONT, in); und Fonts mit entsprechender Größe mit derivefont erzeugt Font df = f.derivefont(font.italic, 14.0f);

32 Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 32 Typographie [1/2] typographische Informationen Zugriff über Grafikkontext Graphics-Objekt FontMetrics fm = g.getfontmetrics(); // aktueller Font FontMetrics fm = g.getfontmetrics(font); Methoden von FontMetrics: int charwidth(char ch) int stringwidth(string s) int getascent() int getdescent() int getheight() int getleading() Breite eines bestimmten Zeichens Breite eines Strings Oberlänge Unterlänge Höhe Durchschuss

33 Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 33 Typographie [2/2] in Java2D: Werte des Schriftsatzes Abrufen des RenderContext vom Graphics2D-Objekt Zugriff auf LineMetrics von Font-Objekt FontRenderContext context = g2d.getfontrendercontext(); LineMetrics metrics = font.getlinemetrics(context); float ascent = metrics.getascent(); float leading = metrics.getleading(); Textgrößen Ermitteln des Rechtecks für Text von Font-Objekt Zugriff auf Eigenschaften des Rechtecks FontRenderContext context = g2d.getfontrendercontext(); Rectangle2D bounds = font.getstringbounds("grundbegriffe des", context); double stringwidth = bounds.getwidth();

35 ImageIO Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 35 seit Java 1.4 Einlesen von Bildern aus Dateien und Web-Ressourcen try { String filename = "..."; Image image = ImageIO.read(new File(fileName)); catch (IOException excpt) { try { String urlname = "..."; Image image = ImageIO.read(new URL(urlName)); catch (IOException excpt) { Zeichnen von Bildern mit drawimage protected void paintcomponent(graphics g) { g.drawimage(image, 100, 100, this);

37 Zusammenfassung Pratikum SWE 2 M. Löberbauer, T. Kotzmann, H. Prähofer 38 AWT-Event-Loop Überschreiben von paint vom Component Bei Swing Überschreiben von paintcomponent vom JComponent Ausruf von repaint um Zeichnen zu erzwingen Graphics für einfache Ausgabe mit draw-methoden Graphics2D für komplexe objektorientierte Ausgabe Graphische Objekte Einstellungen Strich Füllung Transformation Komposition Clipping Wiedergabehinweise