Chapter 8: Getting Started with Graphics Programming

En presentation över ämnet: "Chapter 8: Getting Started with Graphics Programming"— Presentationens avskrift:

1 Chapter 8: Getting Started with Graphics Programming
AWT Class Hierarchy Frames The relationship between frame and other UI components Event-Driven Programming Event Source, Listener, Listener Interface Layout Managers FlowLayout, GridLayout, BorderLayout Panels Canvases repaint()and paint() Drawing Geometric Figures Color, Font classes Drawing methods

2 AWT Class Hierarchy

3 Det grafiska användargränssnittet (java.awt)
I paketet java.awt finns mycket av det grafiska användargränssnittet samlat. Bl.a. finner du följande klasser: Button En vanlig knapp. Canvas En yta man kan rita på Checkbox En radiobutton eller checkbox Choice En popup-meny ur vilken man kan välja

4 Det grafiska användargränssnittet java.awt
Frame Ett fönster i vilket man kan placera andra komponenter Label En rad med text List En lista ur vilken man kan välja Panel En komponent i vilken man kan placera andra komponenter. En Applet är en Panel. TextArea Ett fönster i vilket användaren kan skriva in text. TextField Ett enradigt fönster i vilket användaren kan skriva in text.

5 Metoder i Frame setBackground(Color) Bakgrundsfärg på fönstret.
setBounds(x,y,bredd,höjd) Fönstrets placering och storlek på bildskärmen. Kan ersättas med setLocation + setSize. setLocation(x,y) Fönstrets placering på bildskärmen. setSize(bredd,höjd) Fönstrets storlek på bildskärmen. setTitle("Titel") Fönstrets titel setResizable(false) Anger om fönstret kan minimeras/maximeras setVisible(true / false) Gör fönstret synligt / osynligt

6 Frames import java.awt.*; public class MyFrame {
public static void main(String[] args) Frame f = new Frame("Test Frame"); f.setSize(400,300); f.setVisible(true); } Run

7 Graphics Graphics Coordinate System Drawing Lines Drawing Rectangles
Font and Color Drawing Lines Drawing Rectangles Drawing Ovals Drawing Arcs Drawing Polygons

8 Grafiskt program Ett javaprogram är antingen en fristående applikation eller en Applet (körs normalt i en browser). Första fönstret i en applikation är ofta av typen Frame. En Frame är bl.a. en Container i vilken olika komponenter, som t.ex. Buttons och Labels, kan placeras. Eftersom ett fönster av typen Frame inte kan stängas så kommer vi att använda fönstret ExtendedFrame (extra-paketet). ExtendedFrame ärver Frame.

9 Applikation class MittProgram extends Frame {
//Deklaration av instansvariabler, t.ex komponenter //Inställningar av fönstret i konstruktorn public MittProgram() { } //paint-metoden anropas när fönstret behöver //ritas om public void paint(Graphics g) {

10 paint() repaint() paint-metoden anropas av systemet när Framen / Appleten behöver ritas om. Grafikverktyg bifogas anropet. Om man vill rita en linje gör man anropet g.drawLine(x1,y1,x2,y2); Om man på egen hand vill se till att allt ritas om så kan man anropa repaint- metoden. public void repaint() repaint() anropas när man önskar att Framen / appleten ska ritas om. Om man inte vill att allt ska ritas om så kan man anropa metoden repaint(x,y,bredd,höjd); varvid endast angiven rektangel uppdateras.

11 Klassen Color Klassen Color används för att beskriva färger i Java. Systemet som används är RGB. Det finns 13 fördefinierade färger: Color.black, Color.blue, Color.cyan, Color.darkGray, Color.gray, Color.green, Color.lightGray, Color.magenta, Color.orange, Color.pink, Color.red, Color.white, Color.yellow Om man önskar en annan färg deklarerar man ett färgobjekt och använder konstruktorn Color(int r, int g, int b) där r (röd), g (grön) och b (blå) är värden i intervallet

12 Klassen Color Exempel Color färg = new Color(200,64,118); :
g.setColor(färg); Color slumpfärg = new Color( (int)(Math.random()*256), (int)(Math.random()*256), (int)(Math.random()*256)); g.setColor(slumpfärg);

13 Colors Color c = new Color(r, g, b); Example:
r, g, and b specify a color by its red, green, and blue components. Example: Color c = new Color(128, 100, 100);

14 Setting Colors You can use the following methods to set the component’s background and foreground colors: setBackground(Color c) setForeground(Color c) Example: setBackground(Color.yellow); setForeground(Color.red);

15 Klassen Font Klassen Font används för att beskriva typsnitt i Java. Fördefinierade typsnitt är bl.a.: MonoSpaced, SansSerif och Serif - i det nya versionen av java är: Times Roman - Courier - Helvetica - Dialog - Symbol Varje gång man ska ändra Font så behöver man ett nytt Font-objekt. Font font = new Font(”Serif”, Font.PLAIN, 18); : g.setFont(font); Ovanstående kod sätter aktuell Font till en liknande Times New Roman, normal stil och 18 punkter stor. Det är möjligt att göra anropet utan ett Font-objekt. Då gör man så här: g.setFont(new Font(”Serif”, Font.PLAIN, 18)); Man skapar Font-objektet samtidigt som man gör anropet.

16 Fonts Example: Font myFont = Font(name, style, size);
Font myFont = new Font("TimesRoman", Font.BOLD, 16); Font myFont = new Font("Courier", Font.BOLD+Font.ITALIC, 12);

17 Font Example FontExample Run public void paint(Graphics g) {
Font myFont = new Font("Times", Font.BOLD, 16); g.setFont(myFont); g.drawString("Welcome to Java", 20, 40); //set a new font g.setFont(new Font("Courier", Font.BOLD+Font.ITALIC, 12)); g.drawString("Welcome to Java", 20, 70); } FontExample Run

18 Bildskärmen och pixlar
Bildskärmen är uppbyggd av ett rutnät. Varje ruta i nätet kallas för en pixel. Pixlarna är nummrerade från vänster till höger och uppifrån och ner. I båda riktningarna börjar numreringen på noll. Detta skiljer från matematiken där y-axeln växer uppåt.

19 Klassen Graphics När paint-metoden anropas av systemet så bigfogas grafikverktyg för att rita på aktuell Frame / Applet.

20 Några intressanta grafikanrop i Graphics
Metoder som börjar med draw ger en ofylld figur och de som börjar med fill ger en fylld figur (fylld med aktuell färg)

21 Några intressanta grafikanrop i Graphics
drawLine(x1,y1,x2,y2) Ritar en linje mellan punkterna (x1;y1) och (x2;y2). drawOval(x,y,bredd,höjd) fillOval(x,y,bredd,höjd) Ritar en ellips inom angiven rektangel. drawRect(x,y,bredd,höjd) fillRect(x,y,bredd,höjd) Ritar angiven rektangel.

22 Några intressanta grafikanrop i Graphics
drawString(text,x,y) Skriver texten i angiven position clearRect(x,y,bredd,höjd) Fyller angiven rektangel med bakgrundsfärgen. drawRoundRect(x,y,bredd,höjd,bågbredd,båghöjd) fillRoundRect(x,y,bredd,höjd,bågbredd,båghöjd) Ritar angiven rektangel med avrundade hörn. drawArc(x,y,bredd,höjd, vinkel, antalGrader) fillArc(x,y,bredd,höjd, vinkel, antalGrader) Ritar en båge från startvinkel antalGrader lång. startvinkel=0 => kl 3, startvinkel=90 => kl 12

23 Några intressanta grafikanrop i Graphics
setColor(Color) Anger den färg som ska användas vid grafikanrop setFont(Font) Anger den Font som ska användas vid drawString

24 Graphics Coordinate System

25 Drawing Lines drawLine(x1, y1, x2, y2);

26 Drawing Rectangles drawRect(x, y, w, h); fillRect(x, y, w, h);

27 Drawing Rounded Rectangles
drawRoundRect(x, y, w, h, aw, ah); fillRoundRect(x, y, w, h, aw, ah);

28 Drawing Ovals drawOval(x, y, w, h); fillOval(x, y, w, h);

29 Drawing Arcs drawArc(x, y, w, h, angle1, angle2);
fillArc(x, y, w, h, angle1, angle2);

30 Drawing Polygons int x[] = {40, 70, 60, 45, 20};
int y[] = {20, 40, 80, 45, 60}; g.drawPolygon(x, y, x.length); g.fillPolygon(x, y, x.length);

31 Example EnBildTest Run Run

32 Example TestEllipser Run

33 Example EnkelAnimeringTest Run

34 Example EnkelAnimering2Test Run