Chapter 7 Graphics

© Daly and Wrigley Objectives Use Graphic Components: ▫ Strings ▫ Lines ▫ Rectangles ▫ Ovals ▫ Arcs Change the color and font of elements. 2 © Daly and Wrigley

Graphical User Interfaces Swing Set ▫ Flexible cross-platform GUIs that allow windows to appear in a similar format on different operating systems. ▫ Start with a “J” (example: JFrame) ▫ Import: import javax.swing.*; Abstract Windowing Toolkit ▫ Older GUI components, change colors, or change fonts ▫ Import: import java.awt.*; 3

© Daly and Wrigley JFrame Before GUI components can be placed onto the screen, a window must first be created to hold these components. JFrame frame = new JFrame("Title of window here "); frame.setSize(200, 100); frame.setLocationRelativeTo(null); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setVisible(true); 4

© Daly and Wrigley Container Every JFrame has a container called a content pane. Purpose - provide a visual area in which to place GUI components. Container content = frame.getContentPane(); content.setBackground(Color.YELLOW); 5

© Daly and Wrigley Null Layouts Place components wherever you would like on the container by using x and y coordinates. To add this JComponent to your content pane called content: content.add(this); 6

© Daly and Wrigley Graphic Components The AWT (Abstract Windowing Toolkit) includes methods for drawing many different types of shapes, everything from lines to polygons; using colors; using fonts; and drawing images. Painting: allows us to draw graphics on the screen ▫ Paint takes an argument of a Graphics object ▫ JComponent has a paint method associated with it ▫ g.drawLine tells the computer to do the method called drawLine on the Graphics object called g. public void paint ( Graphics g ) { } 7

© Daly and Wrigley Strings g.drawString("This is great", 20,50); 8

© Daly and Wrigley Changing the Font Typeface( font name): Helvetica, Courier, TimesRoman, etc. Style: Font.PLAIN, Font.BOLD, Font.ITALIC, Font.BOLD+Font.ITALIC Size: Point size such as 24 point. Note: These are points -- not pixels) The standard typewriter size font is 12 point. g.setFont(new Font ("TimesRoman", Font.ITALIC, 72) ); You can also create a font object (instance): Font f = new Font("TimesRoman", Font.BOLD, 36); g.setFont(f) ; 9

© Daly and Wrigley Adding Color The 13 predefined colors are: white, black, lightGray, gray, darkGray, red, green, blue, yellow, magenta, cyan, pink and orange. g.setColor(Color.GREEN); Define your own color: g.setColor(new Color(100,50,25)); Color myTeal = new Color (0,128,128); g.setColor(myTeal); 10

© Daly and Wrigley Drawing Lines g.drawLine(0,0,50,50); g.drawLine(50,0,50,75); 11

© Daly and Wrigley Drawing Rectangles 1.g.drawRect(0, 0, 50, 25); 2. g.setColor(Color.GREEN); g.fillRect(100,0,50,40); 3. g.setColor(Color.BLACK); g.drawRoundRect(175,0,50,50,20,20); (20 pixel curve) 4. g.setColor(Color.RED); g.fillRoundRect(0,75,50,50,35,35); (35 pixel curve) 5. g.setColor(Color.BLACK); g.fillRect(100,100,50,50); g.clearRect(120,120,10,10); 6. g.draw3DRect(175,100,50,30,true); (true means raised) 7. g.draw3DRect(250,100,50,20,false); (false means indented) 8. g.setColor(Color.DARKGRAY); g.fill3DRect(250,175,50,20,false); (false means indented) 12

© Daly and Wrigley Drawing Ovals g.setColor(Color.BLUE); g.drawOval(0,0,30,60); // draws an oval starting at point 0,0 width=30, height =60 // see the first oval below g.fillOval(50,0,100,40); // draws oval starting pt is 50,0 width =100, height = 40 // see the second filled in oval below 13

© Daly and Wrigley Drawing Arcs g.drawArc(0, 40, 50, 50, 0, 75); // the first arc shown below // Picture an oval with upperleft corner of its rectangle at 0,40 and its 50 wide and 50 high // starting angle is 0 which is 3 o'clock // degrees is 75 which means to go counterclockwise 75 degrees. g.fillArc(100, 75, 50, 50, 90, 180); // the filled in black arc below // Picture an oval with upperleft corner of its rectangle at 100,75 and its 50 wide and 50 high // starting angle is 90 which is 12 o'clock // degrees is 180 which means to go counterclockwise 180 degrees // the same arc could be drawn clockwise with g.fillArc(100, 75, 50, 50, 270, -180); The syntax is: g.drawArc (x, y, width, height, startangle, degrees); g.fillArc (x, y, width, height, startangle, degree s); 14