DVG2 - 11 - Graphik in Swing Graphik in Swing. DVG2 - 11 - Graphik in Swing 2 Zeichnen von Objekten in Swing Die Klasse JComponent enthält die Methode.

Präsentation zum Thema: "DVG2 - 11 - Graphik in Swing Graphik in Swing. DVG2 - 11 - Graphik in Swing 2 Zeichnen von Objekten in Swing Die Klasse JComponent enthält die Methode."—  Präsentation transkript:

1 DVG2 - 11 - Graphik in Swing Graphik in Swing

2 DVG2 - 11 - Graphik in Swing 2 Zeichnen von Objekten in Swing Die Klasse JComponent enthält die Methode public 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.

3 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 Methode public 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 Methode public 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.

4 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 wird public Rectangle getBounds() in java.awt.Component und der Breite der Ränder public Insets getInsets() in java.awt.Container

5 DVG2 - 11 - Graphik in Swing 5 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 DVG2 - 11 - Graphik in Swing 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 Methoden public void setClip(int x, int y, int width, int height) und public void setClip(Shape clip) festgelegt. Das Setzen der Zeichenfarbe geschieht mit der Methode public 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, yellow oder es werden neue Objekte der Klasse Color erzeugt new Color(int r, int g, int b) r,g,b=0...255

7 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);

8 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

9 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.

10 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 Methode public 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 Symbol style=PLAIN, ITALIC, BOLD, BOLD|ITALIC public Font(Map attributes) Mit dem zweiten Konstruktor hat man die vollen Möglichkeiten der Definition aller Attribute.

11 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)

12 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.

13 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)

14 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)

15 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);

16 DVG2 - 11 - Graphik in Swing 16 Nutzung des MediaTrackers Zum Laden von Images können die Methode public 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 erzeugt public MediaTracker(Component comp) wobei eine AWT- oder Swingkomponente als Parameter angegeben werden muss.

17 DVG2 - 11 - Graphik in Swing 17 Anschließend werden mit der Methode public 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 InterruptedException kann auf das Laden des oder der Images gewartet werden.

18 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);...

19 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.

20 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

21 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.

22 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);

23 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(); }

24 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...... }

25 DVG2 - 11 - Graphik in Swing 25 Graphics2D arbeitet mit zwei Koordinatensystemen: 1.Gerätekoordinaten entsprechen den Koordinaten von Graphics. 2.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 Methode public 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.

26 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; }

27 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.

28 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);

29 DVG2 - 11 - Graphik in Swing 29 Die Linienart, mit der das Shape-Objekt gezeichnet werden soll kann mit der Methode public 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));

30 DVG2 - 11 - Graphik in Swing 30 Shape-Objekte können gefüllt werden. Dazu dient die Methode public 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));