GI-Kap 4 grafik - HS-Harz M. Wilhelm - Hochschule Harz

Graphische Nutzerschnittstellen 

� Dipl.-Inf., Dipl.-Ing. (FH) Michael Wilhelm 

� Hochschule Harz 

� FB Automatisierung und Informatik 

� mwilhelm@hs-harz.de 

� Raum 2.202 

� Tel. 03943 / 659 338 

FB Automatisierung und Informatik: Graphische Nutzerschnittstellen 

1. Einführung, Literatur, Begriffe 

2. Architektur eines Fenstersystems 

3. Java-Dialog (Dialog/SDI/MDI) 

4. Grafik in Java 

Inhalt 

5. Benutzeroberfläche (Layout, Dialog, RDI, GUI-Elemente) 

6. Design Pattern (Framework, Mehrschicht Anwendung) 

7. Testroutinen (JUnit) 

8. JDBC (Datenbankanbindung) 

9. Threads 


1 

1

Benutzeroberflächen: Zeichnen in Java 

Benötigte Elemente: 

• Linien (Farbe, Strichdicke, Strichart) 

• Zeichenblatt (JFrame, JPanel, Canvas) 


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 


3 

4 

2

Zeichnen in Java: Linien 

Linien zeichnen 

public void paint (Graphics g) 

{ 

int x = 80; 

for (int i=0; i


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



class CCanvas extends Canvas { 

private int count=0; 


{ 

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

} 

} 


public static void main(String[] args) 

{ 

Linie01 f ; 

f = new Linie01(); 

f.setSize(500, 300); 

f.setTitle("1. Grafikbeispiel"); 

f.setVisible(true); 

} // main 

} // class 



{ 

int x = 80; 

for (int i=0; i


Linien zeichnen 

Links /oben :100,100 

Rechts / unten:600,400 

mitte / oben: 350, 50 

� Vorlesungsaufgabe 


Vorlesungsaufgabe: 


{ 

g.drawLine(100,100, 600,100); // waagerecht oben 

g.drawLine(600,100, 600,400); // senkrecht rechts 

g.drawLine(100,400, 600,400); // waagerecht unten 

g.drawLine(100,100, 100,400); // 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 

} 


Line03 

Line2 

9 

10 

5

Sinusfunktionen: 

double f(double x) { 

return (Math.cos(x/5) + Math.sin(x/7) + 2) * getSize().height / 4; 

} 


{ 

for (int x = 0 ; x < getSize().width ; x++) { 

g.drawLine(x, f(x), x + 1, f(x + 1)); 

} 

} 




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.drawLine(x, (int) f(x), x + 1, (int) f(x + 1)); 

} 

} 


Line04 

Line04 

11 

12 

6

Sinusfunktionen: 


return ( Math.sin(x/7) + 2) * getSize().height / 4; 

} 


{ 

Color c; 

Font f; 


g.drawLine(x, (int)f(x), x + 1, (int)f(x + 1)); 

c = g.getColor(); 

f = g.getFont(); 

} 

} 


Gedämpfte Sinusschwingung: 


return ( Math.sin(x/7)*Math.exp(-x*0.002) + 2) * getSize().height / 4; 

} 


{ 

Color c; 

Font f; 


g.drawLine(x, (int)f(x), x + 1, (int)f(x + 1)); 

c = g.getColor(); 

f = g.getFont(); 

} 

} 


Line05 

Line6 

13 

14 

7

Zeichnen in Java: Rechteck 

Aufgabe: Zeichnen von 10 Rechtecken 




{ 

int x, y; // Mittelpunkt 

int w, h; // Breite Höhe 

for (int i=0; i


Recchteck Koordinaten 

x0 = 200; 

y0 = 200; 

diffx = 50; 

diffy = 25; 

diff wird nach jedem Zeichen um 

10 Punkte erhöht 

� Vorlesungsaufgabe 


Zeichnen in Java: Rechtecke zeichnen 

diff 

diff 


Rect2 

Rect2 

17 

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.drawLine(x0-200,y0,x0+200,y0); g.drawLine(x0,y0-200,x0,y0+200); 

g.setColor(Color.blue); 

for (int i=0; i> 1); // SHR 

h = diff; 

w = diff

Zeichnen in Java: Kreis 


{ 

int x0, y0; // Mittelpunkt 

int d; // Durchmesser 

int r; // Radius 

x0 = 300; 

y0 = 300; 

for (int i=0; i> 1; 

g.drawOval(x0-r,y0-r,d,d); 

} 

} 


Zeichnen in Java: Kreis 


{ 

int x, y; // Mittelpunkt 

int d; // Durchmesser 

int r; // Radius 

x = 300; 

y = 300; 

for (int i=0; i> 1; 

g.drawOval(x-r,y-r,d,d); 

} 

} 


Circle2 

Circle2 

21 

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 


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


23 

24 

12

Klasse Font 

Font[] ff = java.awt.GraphicsEnvironment.getAllFonts(); 


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


25 

26 

13

AttributedCharacterIterator (String02) 

Aliasing an: 

• Graphics2D g2d=(Graphics2D)g; 

• g2d.setRenderingHint( 

RenderingHints.KEY_ANTIALIASING, 

RenderingHints.VALUE_ANTIALIAS_ON ); 



• 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 


27 

28 

14



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


29 

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


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 


31 

32 

16


Beispiele in Grafik2D: nikolaus1, nikolaus2, nikolaus3 


33 

34 

17

Dialog_Area_2D 

Dialog_Line_2D 


Dialog_Picture2_2D 


35 

36 

18

Dialog_Transform1_2D: Transformation, Skalierung und Scherung 


MemoryMonitor 


37 

38 

19

GI-Kap 4 grafik - HS-Harz M. Wilhelm - Hochschule Harz

Erfolgreiche ePaper selbst erstellen

Template löschen?

Als Template speichern?