Graphik in Swing

1. Graphik in Swing DVG2 - 11 - Graphik in Swing

2. Zeichnen von Objekten in Swing • Die Klasse JComponent enthält die Methodepublic void paintComponent(Graphics g) • Diese Methode dient der graphischen Darstellung der Komponente. • Sie wird immer dann automatisch aufgerufen, • wenn das Objekt zum ersten mal gezeichnet werden soll, • wenn das Objekt neu gezeichnet werden muss, da es ikonisiert oder ganz oder teilweise unsichtbar war und • wenn sich der Inhalt geändert hat (z.B. Aufruf der setText-Methode eines Text-Feldes). • Die paintComponent-Methode kann überschrieben werden, um eine eigene graphische Darstellung der Komponente zu erreichen. • Am Anfang von paintComponent sollte immer die entsprechende Methode der super-Klasse aufgerufen werden.public void paintComponent(Graphics g) {super.paintComponent(g);... • Wenn ein Objekt neu gezeichnet werden muss, werden auch alle in ihm enthaltenen Unterobjekte neu gezeichnet. DVG2 - 11 - Graphik in Swing

3. Falls das automatische Zeichnen nicht funktioniert, handelt es sich um einen Bug. • Das automatische Zeichnen kann durch Aufruf der Methodepublic void repaint()erzwungen werden. • Beim Neuzeichnen von Objekten wird deren Größe ggf. an die neuen Bedingungen angepasst. Wenn nicht  Bug • Um die Größenanpassung zu erzwingen kann vor der repaint-Methode die Methodepublic void revalidate ()der Klasse JComponent aufgerufen werden. revalidate funktioniert also nur für Swing-Komponenten. • Das automatische Zeichnen der Komponenten erfolgt in dem Thread, in dem auch die Ereignisse behandelt werden. Während Komponenten gezeichnet werden, kann kein Ereignis behandelt werden und umgekehrt. • Die Methoden revalidate und repaint sollten bevorzugt benutzt werden. Die direkte Verwendung von paintComponent kann zu unerwarteten Ergebnissen führen. DVG2 - 11 - Graphik in Swing

4. Die Klasse Graphics • Die Methode paintComponent bekommt als Parameter ein Objekt der Klasse Graphics übergeben. Graphics enthält einfache Möglichkeiten zum Zeichnen von Linien, Flächen und Texten und zum Darstellen von Bildern. • In Graphics werden alle Koordinaten als int-Größen in pixeln angegeben. • Die linke obere Ecke hat immer die Koordinaten (0,0). • Die x-Achse zeigt von links nach rechts. • Die y-Achse zeigt von oben nach unten. • Die Größe der Zeichenfläche ergibt sich aus der Größe der Komponente in der gezeichnet wirdpublic Rectangle getBounds() in java.awt.Componentund der Breite der Ränderpublic Insets getInsets() in java.awt.Container DVG2 - 11 - Graphik in Swing

5. DVG2 - 11 - Graphik in Swing Rectangle rect = getBounds(); Insets ins = getInsets(); int maxx = rect.width-ins.left-ins.right-1; int maxy = rect.height-ins.top-ins.bottom-1;

6. Die Zeichnung wird am Clipping-Bereich abgeschnitten. D.h. nur der Teil, der sich innerhalb dieses Bereiches befindet wird dargestellt. Der Clipping-Bereich wird mit den Methodenpublic void setClip(int x, int y, int width, int height) undpublic void setClip(Shape clip)festgelegt. • Das Setzen der Zeichenfarbe geschieht mit der Methodepublic abstract void setColor(Color c) • Als Farben können dabei vordefinierte Farben verwendet werden: black, blue, cyan, darkGray, gray, green, lightGray, magenta, orange, pink, red, white, yellowoder es werden neue Objekte der Klasse Color erzeugtnew Color(int r, int g, int b) r,g,b=0...255 DVG2 - 11 - Graphik in Swing

7. g.setColor(Color.white); g.fillRect(0,0,maxx,maxy); int [] cx = {0, maxx/4, maxx/4*3, maxx, maxx/4*3, maxx/4}; int [] cy = {maxy/2, 0, 0, maxy/2, maxy, maxy}; g.setClip(new Polygon(cx, cy, cx.length)); g.setColor(Color.blue); g.fillRect(0,0,maxx,maxy); DVG2 - 11 - Graphik in Swing

8. Zeichenmethode in Graphics • public void drawLine(int x1, int y1, int x2, int y2)zeichnet eine Linie von (x1,y1) nach (x2,y2) • public void drawRect(int x, int y, int width, int height )zeichnet ein Rechteck mit der linken oberen Ecke (x,y) und der Breite width und der Höhe height • public void draw3DRect(int x, int y, int width, int height, boolean raised)wie drawRect, nur dass der Rand erhöht (raised=true) oder vertieft (raised=false) dargestellt wird • public void drawRoundRect(int x, int y, int width, int height, int arcWidth, int arcHeight)wie drawRect, nur dass die Ecken gerundet werden • public void drawOval(int x, int y, int width, int height)zeichnet ein Ellipsoid, das in das Rechteck mit der linken oberen Ecke (x,y) und der Breite width und der Höhe height passt DVG2 - 11 - Graphik in Swing

9. public void drawPolygon(int[] x, int[] y, int n)zeichnet ein Polygon mit den Knotenpunkten (x[i],y[i]) für i=0...n-1. Der erste und der letzte Punkt werden verbunden. • public void drawPolyline(int[] xPoints, int[] yPoints, int nPoints)wie drawPolygone, nur dass erster und letzter Punkt nicht verbunden werden. • public void drawArc(int x, int y, int width, int height, int startAngle, int arcAngle)zeichnet einen Ausschnitt der Ellipse mit dem Startwinkel startAngle und dem Öffnungswinkel arcAngle. startAngle=0 entspricht der Richtung der positiven x-Achse. arcAngle wird entgegen dem Uhrzeigersinn gemessen. startAngle wird immer so verzerrt, dass 45 Grad auf die rechte obere Ecke des umschreibenden Rechtecks zeigt. • Für die Methoden drawXXX mit XXX=3DRect, Arc, Oval, Polygon, Rect, RoundRect gibt es entsprechende Methoden fillXXX, die das innere mit der eingestellten Farbe füllen. DVG2 - 11 - Graphik in Swing

10. Text schreiben • Zum Schreiben von Text gibt es eine Reihe von Methoden: • public void drawBytes(byte[] data, int offset, int length, int x, int y) • public void drawChars(char[] data, int offset, int length, int x, int y) • public void drawString(String str, int x, int y) • Die Schriftart und -größe wird mit Hilfe der Methodepublic void setFont(Font font)festgelegt. • Mit Hilfe der Klasse Font lassen sich vielfältige Fonts definieren. Es gibt zwei Konstruktoren:public Font(String name, int style, int size)name=Dialog, DialogInput, Monospaced, Serif, SansSerif, or Symbolstyle=PLAIN, ITALIC, BOLD, BOLD|ITALICpublic Font(Map attributes) • Mit dem zweiten Konstruktor hat man die vollen Möglichkeiten der Definition aller Attribute. DVG2 - 11 - Graphik in Swing

11. Darstellung von Bildern • Zum Speichern von Bildern dient die Klasse java.awt.Image . • Ein Objekt img der Klasse Image kann mit der Methode drawImage der Klasse Graphics dargestellt werden. • public boolean drawImage(Image img, int x, int y, ImageObserver observer) • public boolean drawImage(Image img, int x, int y, int width, int height, ImageObserver observer) • public boolean drawImage(Image img, int x, int y, Color bgcolor, ImageObserver observer) • public boolean drawImage(Image img, int x, int y, int width, int height, Color bgcolor, ImageObserver observer) • public boolean drawImage(Image img, int dx1, int dy1, int dx2, int dy2, int sx1, int sy1, int sx2, int sy2, ImageObserver observer) • public boolean drawImage(Image img, int dx1, int dy1, int dx2, int dy2, int sx1, int sy1, int sx2, int sy2, Color bgcolor, ImageObserver observer) DVG2 - 11 - Graphik in Swing

12. Dabei bedeuten die Parameter: • img : darzustellendes Image-Objekt • x : x-Coordinate der linken oberen Ecke • y : y-Coordinate der linken oberen Ecke • width : Breite der Darstellung des Bildes • height : Höhe der Darstellung des Bildes • bgcolor : Hintergrundfarbe für durchsichtige Bildteile • (dx1,dy1) : linke Obere Ecke des Darstellungsbereiches • (dx2,dy2) : rechte Untere Ecke des Darstellungsbereiches • (sx1,sy1) : linke Obere Ecke des Bildausschnittes • (sx2,sy2) : rechte Untere Ecke des Bildausschnittes • observer : Objekt, das den Ladevorgang des Bildes beobachtet. java.awt.Component implementiert das Interface ImageObserver, sodass in Standardfällen irgendeine AWT- oder Swingkomponente als ImageObserver benutzt werden kann. In komplizierten Fällen muss das Interface selber implementiert werden. DVG2 - 11 - Graphik in Swing

13. Laden eines Bildes mit ImageIcon • Die Klasse javax.swing.ImageIcon bietet die einfachste Möglichkeit ein Bild aus einer Datei oder aus dem Internet zu laden. Dazu gibt es folgende Konstruktoren: • public ImageIcon(String filename, String description) • public ImageIcon(String filename) • public ImageIcon(URL location, String description) • public ImageIcon(URL location) • public ImageIcon(Image image, String description) • public ImageIcon(Image image) • public ImageIcon(byte[] imageData, String description) • public ImageIcon(byte[] imageData) DVG2 - 11 - Graphik in Swing

14. Dabei bedeuten die Parameter: • filename : Name der Datei von der das Bild geladen werden soll • description : Kurzbeschreibung des Bildes • location : URL von dem das Bild geladen werden soll • image : Image-Objekt aus der das ImageIcon erzeugt werden soll • imageData : Datenfeld das das Bild enthält • Bilddaten können in verschiedenen Formaten vorliegen. Standardmäßig werden GIF und JPEG unterstützt. • Das Image-Objekt, das im ImageIcon-Objekt enthalten ist wird mit der Methode getImage-Methode extrahiert. • Die Klasse ImageIcon sorgt automatisch dafür, dass die Bilddaten ggf. geladen sind, wenn sie benötigt werden. • Die Größe des geladenen Bildes bestimmt man mit den Methoden • public int getHeight(ImageObserver observer) • public int getWidth(ImageObserver observer) DVG2 - 11 - Graphik in Swing

15. Beispiel private static Image img1 = new ImageIcon("images/T4.gif","Duke").getImage(); ... int iBreite = img1.getWidth(this); int iHoehe = img1.getHeight(this); g.drawImage(img1, maxx/5, maxy/5*4, this); g.drawImage(img1, maxx/5*2, maxy/5*3, iBreite*2, iHoehe*2, this); double faktor = (maxx+1.0)/(iBreite*10.0); g.drawImage(img1, maxx/5*3, maxy/5*2, (int)(iBreite*faktor), (int)(iHoehe*faktor), this); DVG2 - 11 - Graphik in Swing

16. Nutzung des MediaTrackers • Zum Laden von Images können die Methodepublic Image getImage(URL url) public Image getImage(URL url, String name)der Klasse Applet (also auch JApplett)public static Image Toolkit.getDefaultToolkit().getImage (String filename)verwendet werden. • Die getImage-Methoden laden die Bilder nicht sofort, sondern erst dann, wenn sie wirklich benötigt werden. • Die geladenen Bilder werden in einem cache-Speicher zwischengespeichert, brauchen also nur einmal geladen zu werden. • Die Klasse MediaTracker ermöglicht uns den Ladevorgang zu kontrollieren. • Dazu wird ein Objekt des MediaTrackers erzeugtpublic MediaTracker(Component comp)wobei eine AWT- oder Swingkomponente als Parameter angegeben werden muss. DVG2 - 11 - Graphik in Swing

17. Anschließend werden mit der Methodepublic void addImage(Image image, int id)die zu beobachtenden Images beim MediaTracker angemeldet. Als id wird eine Zahl (z.B. Bildnummer oder Bildgruppennummer) angegeben. • Mit den Methoden public void waitForAll() throws InterruptedException public boolean waitForAll(long ms) throws InterruptedException public void waitForID(int id) throws InterruptedException public boolean waitForID(int id, long ms) throws InterruptedExceptionkann auf das Laden des oder der Images gewartet werden. DVG2 - 11 - Graphik in Swing

18. Beispiel private static Image img1; private static MediaTracker mediaTracker; public void init() { try{img1=getImage(new URL(getCodeBase(),"images/T4.gif"));} catch (MalformedURLException e){System.out.println(e);} mediaTracker=new MediaTracker(this); setContentPane(makeContentPane()); } private Container makeContentPane() { ... mediaTracker.addImage(img1,0); try{mediaTracker.waitForAll();} catch (InterruptedException e){System.out.println(e);} ... public static void main(String [] args){ JFrame frame = new JFrame("Beispiel 11 : Graphics"); B11 t = new B11(); img1 = Toolkit.getDefaultToolkit().getImage("images/T4.gif"); mediaTracker=new MediaTracker(t); ... DVG2 - 11 - Graphik in Swing

19. Animationen • Für die Animation von Bildfolgen benötigt man einen Zeitgeber. • In Swing gibt es die Klasse javax.swing.Timer. • Konstruktor:public Timer(int delay, ActionListener listener) • Im Zeitabstand von delay Millisekunden wird ein ActionEvent erzeugt und die actionPerformed-Methoden aller registrierten ActionListener werden mit diesem ActionEvent aufgerufen. • Dabei kann der Timer so eingestellt werden, dass er • vor dem ersten Auslösen eine bestimmte Zeit wartet, • nur einmal oder beliebig oft aktiv wird, • mehrere ActionListener aktiviert. • Der erzeugte ActionEvent liefert bei Aufruf der Methode getActionCommand()null zurück. DVG2 - 11 - Graphik in Swing

20. Methode der Klasse Timer • public void addActionListener(ActionListener listener)registriert einen weiteren ActionListener • public boolean isRunning()stellt fest ob der Timer aktiv ist • public void setRepeats(boolean flag)legt fest ob der Timer einmalig (flag==false) oder wiederholt aktiv werden soll • public void start()startet den Timer • public void stop()stoppt den Timer DVG2 - 11 - Graphik in Swing

21. Bei einer Animation muss nun ein Timer initialisiert werden, damit die Animation gleichmäßig abläuft. • In der Methode actionPerformed muss für die Darstellung des nächsten Bildes gesorgt werden. DVG2 - 11 - Graphik in Swing

22. private Timer tim; private int imgN = 0; private JButton animation = new JButton(); private Container makeContentPane() { tim = new Timer(100, new ActionListener() { public void actionPerformed(ActionEvent e) { animation.setText("Frame Nr. "+imgN); animation.setIcon(img[imgN++]); if (imgN>=img.length) imgN=0; } }); animation.setPreferredSize(new Dimension( img[0].getIconWidth()+200, img[0].getIconHeight()+2)); animation.addActionListener(this); animation.setBackground(Color.yellow); DVG2 - 11 - Graphik in Swing

23. JPanel panel = new JPanel() { public void paintComponent(Graphics g) { super.paintComponent(g); int imgX=0, imgY=img[0].getIconHeight()*2; for (int i=0;i<img.length;i++) { g.drawImage(img[i].getImage(), imgX, imgY, this); imgX+=img[i].getIconWidth(); } }; panel.add(animation); tim.start(); return panel; } public void actionPerformed(ActionEvent e) { if (tim.isRunning()) tim.stop(); else tim.start(); } DVG2 - 11 - Graphik in Swing

24. Graphics2D • Graphics2D ist eine von Graphics abgeleitete Klasse. • Die Methoden paint (java.awt.Component) und paintComponent (javax.swing.JComponent) erwarten aus Kompatibilitätsgründen ein Graphics-Objekt, bekommen aber als Parameter immer ein Graphics2D-Objekt übergeben. Wenn man mit Graphics2D arbeiten möchte, muss man da Graphics-Objekt casten:public void paintComponent(Graphics g1){ Graphics2D g = (Graphics2D)g1; g.draw......} DVG2 - 11 - Graphik in Swing

25. Graphics2D arbeitet mit zwei Koordinatensystemen: • Gerätekoordinaten entsprechen den Koordinaten von Graphics. • Userkoordinaten sind die Koordinaten, in denen die zu zeichnenden Objekte beschrieben werden. • Alle Maße werden in Userkoordinaten angegeben. • Dazu gehören neben Koordinaten und Längen auch Linienbreiten, Linienmuster, Füllmusterangaben u.s.w. • Zwischen den beiden Koordinatensystemen vermittelt eine affine Transformation. Diese wird mit der Methodepublic void setTransform(AffineTransform Tx)gesetzt. • Wird die Transformation immer korrekt berechnet, brauchen alle anderen Koordinaten und Maße nie neu berechnet zu werden. • Die Transformation kann auch benutzt werden, um das fertige Bild zu transformieren. • Es können für einzelne Objekte eigene Transformationen definiert werden. DVG2 - 11 - Graphik in Swing

26. Dimension dim = getSize(); Insets ins = getInsets(); int breite = dim.width-ins.left-ins.right; int hoehe = dim.height-ins.top-ins.bottom; g2.setTransform( trans(breite, hoehe, -0.1, -1.2, 7.0, 2.4)); ... private AffineTransform trans(int iBreite, int iHoehe, double x, double y, double dBreite, double dHoehe) { AffineTransform at = new AffineTransform(); double faktor = iBreite/dBreite; if (iHoehe/dHoehe<faktor) faktor = iHoehe/dHoehe; at.scale(faktor, -faktor); at.translate(-x,-iHoehe/faktor-y); return at; } DVG2 - 11 - Graphik in Swing

27. Die darzustellenden Objekte werden als „richtige“ Objekte beschrieben. • Alle diese Objekte implementieren das Interface Shape. • RectangularShape • Arc2D • Ellipse2D • Rectangle2D • RoundRectangle2D • Line2D • QuadCurve2D • CubicCurve2D • Die Klasse GeneralPath erzeugt einen Pfad aus anderen Shape-Objekten. • Die Klasse Area erlaubt Operationen (Vereinigung, Durchschnitt, Differenz) zwischen mehreren Shape-Objekten. DVG2 - 11 - Graphik in Swing

28. float x = 0.0f; float y = (float)(Math.sin(x)); gp.moveTo(x, y); float h = (float)(Math.PI/50.0); for (int i=1;i<101;i++) { x+=h; y = (float)(Math.sin(x)); gp.lineTo(x, y); } g2.draw(gp); DVG2 - 11 - Graphik in Swing

29. Die Linienart, mit der das Shape-Objekt gezeichnet werden soll kann mit der Methodepublic abstract void setStroke(Stroke s)festgelegt werden. • Stroke ist ein Interface, das von der folgenden Klasse implementiert wird: • java.awt.BasicStroke g2.setStroke(new BasicStroke(0.01f)); g2.setStroke(new BasicStroke(0.01f, BasicStroke.CAP_BUTT, BasicStroke.JOIN_MITER, 1.0f, new float[]{0.05f}, 0.0f)); g2.setStroke(new BasicStroke(0.01f, BasicStroke.CAP_BUTT, BasicStroke.JOIN_MITER, 1.0f, new float[]{0.05f, 0.03f, 0.02f, 0.03f}, 0.0f)); DVG2 - 11 - Graphik in Swing

30. Shape-Objekte können gefüllt werden. Dazu dient die Methodepublic abstract void setPaint(Paint paint) • Paint ist ein Interface, das von folgenden Klassen implementiert wird: • java.awt.Color • java.awt.GradientPaint • java.awt.TexturePaint g2.setPaint( new GradientPaint(4.3f, 0.3f, Color.red, 4.7f, 0.7f, Color.blue)); DVG2 - 11 - Graphik in Swing