Chapter 10 Graphics

Objectives Use Graphic Components: Strings Lines Rectangles Ovals Arcs Change the color and font of elements.

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.*;

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

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

Placing GUI Components 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);  To add the JComponent to your content pane named content: content.add(this);

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 paintComponent (Graphics g) {      }

Strings g.drawString("This is great", 20,50);

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

Adding Color g.setColor(new Color(100,50,25)); 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);

Drawing Lines g.drawLine(0,0,50,50); g.drawLine(50,0,50,75);

Drawing Rectangles 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)  

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

Drawing Arcs The syntax is: g.drawArc (x, y, width,  height,  startangle,  degrees); g.fillArc (x, y, width,  height,  startangle,  degrees);  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);  

Drawing Polygons