1 Drawing C Sc 335 Object-Oriented Programming and Design Rick Mercer

2 Drawing Outline  Drawing with a Graphics object  Graphics and Graphics2D  paintComponent and repaint  draw and fill messages  Strings, Lines, Rectangle, Ellipse, Polygons  Colors  Text and Fonts  Drawing Images  Toolkit to convert jpg and gif files into Images

3 Drawing Drawing with a Graphics Object  The use of graphics is common among modern software systems  Java has strong support for graphics  coordinate system for Java graphics  drawing shapes such as lines, ovals, rectangles,...  basic animation techniques  the use of color  the use of fonts  drawing images

4 Drawing The Coordinate System  A simple two-dimensional coordinate system exists for each graphics context or drawing surface  Each point on the coordinate system represents a single pixel  top left corner of the area is coordinate // This string will be drawn 20 pixels right, // 40 pixels down as the lower left corner; // other shapes are upper right g2.drawString("is in Panel1", 20, 40);  A drawing surface has a width and height  Anything drawn outside of that area is not visible

5 Drawing The Coordinate System x y Y X

6 Drawing Draw on a JPanel  Need to extend a class that extends JComponent  JPanel is good  To draw things:  extend JPanel  have the class override the paintComponent method  panel surface is transparent, so send drawing messages inside paintComponent to the graphic context  a Graphics2D object we'll reference with g2

7 Drawing Put something in a JPanel  Implement a JPanel class and draw a few strings import java.awt.*; public class DrawingPanel extends javax.swing.JPanel { // Override the paintComponent method in public void paintComponent(Graphics g) { super.paintComponent(g); // Always call this Graphics2D g2 = (Graphics2D) g; g2.drawString("Put this in g, which", 20, 20); g2.drawString("is in Panel", 20, 40); g2.drawString("which is in MyFrame", 20, 60); }

8 Drawing Then add the JPanel to a JFrame to see the drawing import javax.swing.JFrame; public class DrawOnAPanel extends JFrame { public static void main(String[] args) { new DrawOnAPanel().setVisible(true); } public DrawOnAPanel() { setTitle("A Frame with a panel"); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setSize(200, 120); add(new DrawingPanel()); }

9 Drawing The Graphics Object  paintComponent 's Graphics g argument represents a "graphical context" object.  You can tell it to draw things on the panel  If you want another method to draw, pass the Graphics object to it—it like a canvas that understands draws  The actual object passed to every JPanel is a Graphics2D, so you can cast to Graphics2D  Never send paintcomponent messages  send repaint() messages instead

10 Drawing The Graphics Context  Graphics is still around, but Java added an improved 2D Library in Java 1.3, use Graphics2D  Better drawing capabilities  It is analogous to using swing ( JButton, JFrame ) rather than older awt components ( Button, Frame )

11 Drawing First cast Graphics to Graphics2D  Send messages to g2 such as drawString draw fill setColor and setFont Rectangle2D body = // xcoord, ycoord, width, height new Rectangle2D.Double(30.0, 70.0, 200.0, 50.0); g2.draw(body); Shape leftWheel = // xcoord, ycoord, width, height new Ellipse2D.Double(50.0, 110.0, 50.0, 50.0); g2.setColor(Color.BLACK); g2.fill(leftWheel); // 30.0, 70.0: upper left corner Font aFont = new Font("SansSerif", Font.BOLD, 16); g2.setFont(aFont); g2.setPaint(Color.MAGENTA); g2.drawString("A car with no top", 45, 180);

12 Drawing So far…  We know how to subclass a JPanel and use a Graphics2D object as a drawing canvas inside the paintComponent method.  Sometimes we need to use an existing image rather than draw something ourselves

13 Drawing Drawing an Image  Java’s Image class in java.awt abstracts a bitmap image for use in drawing.  Images can be drawn to a panel through a Graphics object  An important Graphics2D method:  drawImage  But first…

14 Drawing How do we load an image?  java.awt contains a method that returns an image from a file on your disk Image img = ImageIO.read(new File("fileName"));  Once we have an image and a graphics object, we can draw it // some other drawing code // 'g2' is a Graphics context object and img // is an initialized Image. 12 is x, 24 is y pixels g.drawImage(img, 12, 24, null);

15 Drawing Drawing Our Image  This code will draw img at the coordinates (12, 24) on the panel  The final ‘null’ is for an ImageObserver object, which we'll not need

16 Drawing Summary  To draw a jpg or gif image 1. Extend JPanel 2. Declare Image instance variables in that class 3. Let the constructor initialize 4. Overide paintComponent 5. Call super.paintComponent() 6. get a Graphics2D object named g2 perhaps 7. send drawImage messages to g2

17 Drawing Example code that needs 6 jpg files in images public class CardsOnTheWater extends JPanel { private Image ocean, card1, card2, card3, card4, card5; public CardsOnTheWater() { try { ocean = ImageIO.read(new File("images/ocean.jpg")); card1 = ImageIO.read(new File("images/14h.jpg")); card2 = ImageIO.read(new File("images/13h.jpg")); card3 = ImageIO.read(new File("images/12h.jpg")); card4 = ImageIO.read(new File("images/11h.jpg")); card5 = ImageIO.read(new File("images/10h.jpg")); } catch (IOException e) { e.printStackTrace(); }

18 Drawing This method is called when the panel needs to be public void paintComponent(Graphics g) { Graphics2D g2 = (Graphics2D) g; g2.drawImage(ocean, 0, 0, null); g2.drawImage(card1, 10, 10, null); g2.drawImage(card2, 30, 15, null); g2.drawImage(card3, 50, 20, null); g2.drawImage(card4, 70, 25, null); g2.drawImage(card5, 90, 30, null); }