GI-Kap 4 grafik
Werbung
Graphische Nutzerschnittstellen Dipl.-Inf., Dipl.-Ing. (FH) Michael Wilhelm Hochschule Harz FB Automatisierung und Informatik [email protected] Raum 2.202 Tel. 03943 / 659 338 FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 1 Inhalt 1. Einführung, Literatur, Begriffe 2. Architektur eines Fenstersystems 3. Java-Dialog (Dialog/SDI/MDI) 4. Grafik in Java 5. Benutzeroberfläche (Layout, Dialog, RDI, GUI-Elemente) 6. Design Pattern (Framework, Mehrschicht Anwendung) 7. Testroutinen (JUnit) 8. JDBC (Datenbankanbindung) 9. Threads FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 1 Benutzeroberflächen: Zeichnen in Java Benötigte Elemente: • Linien (Farbe, Strichdicke, Strichart) • Zeichenblatt (JFrame, JPanel, Canvas) FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 3 Benutzeroberflächen: Zeichnen in Java Methode Beschreibung clearRect() Löscht ein Gebiet der Zeichenfläche copyArea() kopiert ein Rechteck innerhalb der Zeichenfläche drawArc() zeichnet einen Bogen drawLine() zeichnet eine Gerade drawOval() zeichnet eine Ellipse drawPolygon() zeichnet ein Polygon (Array) drawRect() zeichnet ein Rechteck drawRoundRect() zeichnet ein Rechteck mit abgerundeten Ecken fillArc() füllt einen Bogen mit Farbe fillOval() füllt ein Oval mit Farbe fillPolygon() füllt ein Polygon mit Farbe fillRect() füllt ein Rechteck mit Farbe getColor() gibt die aktuelle Zeichnungsfarbe aus getFont() gibt den aktuellen Zeichensatz aus getFontMetrics() gibt die aktuellen Parameter des Zeichensatzes aus setColor() legt die Zeichnungsfarbe fest setFont() setzt den aktuellen Zeichensatz drawString(…) HexEditor drawChars() Array von Char´s FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 4 2 Zeichnen in Java: Linien Linien zeichnen public void paint (Graphics g) { int x = 80; for (int i=0; i<60; i++) { g.drawLine(x,40,x,100); x += 1+ 3*Math.random() } } •Die Variable g bezeichnet man auch als Grafikkontext FB Automatisierung und Informatik: Graphische Nutzerschnittstellen Line-rect-circle\Line1 5 Zeichnen in Java: Linien import java.awt.*; import javax.swing.JFrame; public class Linie01 extends JFrame { public Linie01() { setDefaultCloseOperation(…); } // construktor public void paint (Graphics g) { int x = 80; for (int i=0; i<60; i++) { g.drawLine(x,40,x,100); x += 4+ 6*Math.random(); } } // paint public static void main(String[] args) { Linie01 f ; f = new Linie01(); f.setSize(500, 300); f.setTitle("1. Grafikbeispiel"); f.setVisible(true); } // main } // class FB Automatisierung und Informatik: Graphische Nutzerschnittstellen Line01 6 3 Zeichnen in Java: Linien import java.awt.*; import javax.swing.JFrame; public class Linie01 extends JFrame { public Linie01() { setDefaultCloseOperation(…); this.getContentPane().add( new CCanvas(), BorderLayout.CENTER ); } // construktor Update: • canvas.update( canvas.getGraphics() ); public static void main(String[] args) { Linie01 f ; f = new Linie01(); f.setSize(500, 300); f.setTitle("1. Grafikbeispiel"); f.setVisible(true); } // main } // class class CCanvas extends Canvas { public void paint (Graphics g) { int x = 80; for (int i=0; i<60; i++) { g.drawLine(x,40,x,100); x += 1+ 3*Math.random(); } } // paint } // CCanvas FB Automatisierung und Informatik: Graphische Nutzerschnittstellen Line01 7 Zeichnen in Java: Linien class CCanvas extends Canvas { private int count=0; public void paint (Graphics g) { count=count+1; System.out.println(count+". zeichnen"); g.setColor(Color.white); g.fillRect(0,0, getWidth(), getHeight() ); g.setColor(Color.red); int width,height; width = this.getWidth(); height = this.getHeight(); g.drawLine(0,0,width,height); } } FB Automatisierung und Informatik: Graphische Nutzerschnittstellen Line02 8 4 Zeichnen in Java: Linien Linien zeichnen Links /oben :100,100 Rechts / unten:600,400 mitte / oben: 350, 50 Vorlesungsaufgabe FB Automatisierung und Informatik: Graphische Nutzerschnittstellen Line03 9 Vorlesungsaufgabe: public void paint (Graphics g) { g.drawLine(100,100, 600,100); g.drawLine(600,100, 600,400); g.drawLine(100,400, 600,400); g.drawLine(100,100, 100,400); // waagerecht oben // senkrecht rechts // waagerecht unten // senkrecht links g.drawLine(100,100, 600,400); // links oben nach rechts unten g.drawLine(100,400, 600,100); // links unten nach rechts oben g.drawLine(100,100, 350, 50); // links oben nach rechts unten g.drawLine(350, 50, 600,100); // links unten nach rechts oben } FB Automatisierung und Informatik: Graphische Nutzerschnittstellen Line2 10 5 Sinusfunktionen: double f(double x) { return (Math.cos(x/5) + Math.sin(x/7) + 2) * getSize().height / 4; } public void paint (Graphics g) { for (int x = 0 ; x < getSize().width ; x++) { g.drawLine(x, f(x), x + 1, f(x + 1)); } } FB Automatisierung und Informatik: Graphische Nutzerschnittstellen Line04 11 class CCanvas extends Canvas { double f(double x) { return (Math.cos(x/5) + Math.sin(x/7) + 2) * getSize().height / 4; } public void paint (Graphics g) { g.setColor(Color.white); g.fillRect(25,25, getWidth()-50, getHeight()-50 ); g.setColor(Color.red); for (int x = 0 ; x < getSize().width ; x++) { g.drawLine(x, (int) f(x), x + 1, (int) f(x + 1)); } } } FB Automatisierung und Informatik: Graphische Nutzerschnittstellen Line04 12 6 Sinusfunktionen: double f(double x) { return ( Math.sin(x/7) + 2) * getSize().height / 4; } public void paint (Graphics g) { Color c; Font f; for (int x = 0 ; x < getSize().width ; x++) { g.drawLine(x, (int)f(x), x + 1, (int)f(x + 1)); c = g.getColor(); f = g.getFont(); } } FB Automatisierung und Informatik: Graphische Nutzerschnittstellen Line05 13 Gedämpfte Sinusschwingung: double f(double x) { return ( Math.sin(x/7)*Math.exp(-x*0.002) + 2) * getSize().height / 4; } public void paint (Graphics g) { Color c; Font f; for (int x = 0 ; x < getSize().width ; x++) { g.drawLine(x, (int)f(x), x + 1, (int)f(x + 1)); c = g.getColor(); f = g.getFont(); } } FB Automatisierung und Informatik: Graphische Nutzerschnittstellen Line6 14 7 Zeichnen in Java: Rechteck Aufgabe: Zeichnen von 10 Rechtecken FB Automatisierung und Informatik: Graphische Nutzerschnittstellen Rect1 15 Zeichnen in Java: Rechteck public void paint (Graphics g) { int x, y; // Mittelpunkt int w, h; // Breite Höhe for (int i=0; i<10; i++) { x = (int) ( 400*Math.random() ); // Links Oben y = (int) ( 200*Math.random() ); // Links Oben w = (int) ( 400*Math.random() ); // Width h = (int) ( 200*Math.random() ); // Height g.drawRect(x,y,w,h); } } FB Automatisierung und Informatik: Graphische Nutzerschnittstellen Rect1 16 8 Zeichnen in Java: Rechteck Recchteck Koordinaten x0 = 200; y0 = 200; diffx = 50; diffy = 25; diff wird nach jedem Zeichen um 10 Punkte erhöht Vorlesungsaufgabe FB Automatisierung und Informatik: Graphische Nutzerschnittstellen Rect2 17 Zeichnen in Java: Rechtecke zeichnen diff diff FB Automatisierung und Informatik: Graphische Nutzerschnittstellen Rect2 18 9 Vorlesungsaufgabe: int x0, y0; // Mittelpunkt int x, y; // Mittelpunkt links / oben int w, h; // Breite Höhe int diff; x0 = 200; y0 = 200; diff = 50; g.setColor(Color.red); g.drawLine(x0-200,y0,x0+200,y0); g.drawLine(x0,y0-200,x0,y0+200); g.setColor(Color.blue); for (int i=0; i<10; i++) { x = x0 - diff; y = y0 - (diff >> 1); h = diff; w = diff << 1; g.drawRect(x,y,w,h); diff += 10; } // for // SHR // SHL Rect2 FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 19 Zeichnen in Java: Kreis public void paint (Graphics g) { int x, y; // Mittelpunkt int w, h; // Breite Höhe x = 80; y = 80; for (int i=0; i<10; i++) { w = (int) ( 400*Math.random() ); h = w; g.drawOval(x,y,w,h); } } FB Automatisierung und Informatik: Graphische Nutzerschnittstellen Circle1 20 10 Zeichnen in Java: Kreis public void paint (Graphics g) { int x0, y0; // Mittelpunkt int d; // Durchmesser int r; // Radius x0 = 300; y0 = 300; for (int i=0; i<10; i++) { // Verschieben d = (int) ( 400*Math.random() ); r = d >> 1; g.drawOval(x0-r,y0-r,d,d); } } FB Automatisierung und Informatik: Graphische Nutzerschnittstellen Circle2 21 Zeichnen in Java: Kreis public void paint (Graphics g) { int x, y; // Mittelpunkt int d; // Durchmesser int r; // Radius x = 300; y = 300; for (int i=0; i<10; i++) { // Verschieben d = (int) ( 400*Math.random() ); r = d >> 1; g.drawOval(x-r,y-r,d,d); } } FB Automatisierung und Informatik: Graphische Nutzerschnittstellen Circle2 22 11 Zeichnen mit eine eigenen Klasse • Ableiten von Canvas oder JPanel • Implementieren der paint-Methode − public void paint (Graphics g) { − this.paintComponents(g); − g.setColor(Color.white); − g.fillRect(0,0, this.getWidth(), this.getHeight()); − − g.setColor( Color.blue ); g.drawLine(10,10, getWidth()-10,getHeight()-10) ; − } // paint FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 23 Methode drawString • drawString(String s, int x, int y); • Abmessungen Klasse FontMetrics: − public void paint (Graphics g) { − this.paintComponents(g); − … − } • Beispiel: − Font f1 = new Font("Courier New", Font.PLAIN, size); − FontMetrics fontMetrics = g.getFontMetrics(f1); − int rowHeight = fontMetrics.getHeight(); − int margin = fontMetrics.stringWidth("XXXX"); FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 24 12 Klasse Font Font[] ff = java.awt.GraphicsEnvironment.getAllFonts(); FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 25 Font myFont=new Font("Arial", Font.ITALIC | Font.PLAIN, 18); String s="ABCghi"; // holen der Daten für den Font und des Strings LineMetrics lm = myFont.getLineMetrics( s, new FontRenderContext( new AffineTransform(), true, //antialiased true //use fractional metrics? ) ); // Abmessungen für ausgeben: System.out.println("String: "+s); System.out.println("Schriftart: "+myFont.getFontName()); System.out.println("Schriftgröße: "+myFont.getSize()); System.out.println("-------------"); System.out.println("Ascent: "+lm.getAscent()); System.out.println("+Descent: "+lm.getDescent()); System.out.println("+Leading: "+lm.getLeading()); System.out.println("=Height: "+lm.getHeight()); FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 26 13 AttributedCharacterIterator (String02) Aliasing an: • Graphics2D g2d=(Graphics2D)g; • g2d.setRenderingHint( RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON ); FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 27 AttributedCharacterIterator (String03) • Ausgabe mit Attributen addAttribute( AttributedCharacterIterator.Attribute attribute, Object value, // z. B. 1) int beginIndex, int endIndex ) 1) GradientPaint TextAttribute.UNDERLINE_LOW_DASHED TextAttribute.SWAP_COLORS_ON FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 28 14 AttributedCharacterIterator (String03) FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 29 Font f1 = new Font("Arial", Font.PLAIN, 36); Font f2 = new Font("Times New Roman", Font.PLAIN, 60); AttributedString as = new AttributedString("Informatik ist toll, aber auch Mathematik oder Sport"); as.addAttribute( TextAttribute.FONT, f1 ); as.addAttribute( TextAttribute.FOREGROUND, new GradientPaint( 0,0, Color.red, 0,10, Color.white ,true ), 15,19); ( as.getIterator(), 30,100 ); FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 30 15 as.addAttribute( TextAttribute.FONT, f2, 0, 4 ); as.addAttribute( TextAttribute.FOREGROUND, new GradientPaint( 0,0, Color.blue, 10,0, Color.green ,true ), 26,31); // "auch" setzen as.addAttribute( TextAttribute.FONT, f2, 26, 31 ); as.addAttribute( TextAttribute.UNDERLINE, TextAttribute.UNDERLINE_LOW_DASHED, 31,41 ); as.addAttribute( TextAttribute.SWAP_COLORS, TextAttribute.SWAP_COLORS_ON, 22,27 ); g2d.drawString( as.getIterator(), 30,100 ); FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 31 Dialog_2D: Strichstärken und Strichmuster public void paint (Graphics g) { int x = 80; Rectangle r = new Rectangle(); g.getClipBounds(r); Graphics2D g2 = (Graphics2D) g; float [] dashs = {40.0f, 5.0f}; // Länge Strich , Pause // BasicStroke(float width, int cap, int join, float miterlimit, // float[] dash, float dash_phase) // 1.0f = miterlimit g.setColor(Color.WHITE); g.fillRect(0,0, getWidth(), getHeight() ); g2.setStroke( new BasicStroke(LineWidth, BasicStroke.CAP_BUTT, BasicStroke.JOIN_MITER, 1.0f, dashs, 0.0f ) ); g.setColor(Color.RED); for (int i=10; i< r.getWidth()-10; i++) { x = (int) (6.0*Math.random()); if (x==2) g.drawLine(i,20,i,(int) r.getHeight()-10 ); } // for } // paint FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 32 16 FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 33 Beispiele in Grafik2D: nikolaus1, nikolaus2, nikolaus3 FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 34 17 Dialog_Area_2D Dialog_Line_2D FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 35 Dialog_Picture2_2D FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 36 18 Dialog_Transform1_2D: Transformation, Skalierung und Scherung FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 37 MemoryMonitor FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 38 19
