C Sc 335 Object-Oriented Programming and Design Rick Mercer

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

2. 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 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. 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 <0, 0> • // 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. X <0, 0> x y <x, y> <width-1, height-1> Y The Coordinate System

6. 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. Put something in a JPanel • Implement a JPanel class and draw a few strings • import java.awt.*; • publicclass DrawingPanel extends javax.swing.JPanel { • // Override the paintComponent method in JPanel • @Override • publicvoid 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. Then add the JPanel to a JFrame to see the drawing • importjavax.swing.JFrame; • publicclassDrawOnAPanelextendsJFrame { • publicstaticvoid main(String[] args) { • newDrawOnAPanel().setVisible(true); • } • publicDrawOnAPanel() { • setTitle("A Frame with a panel"); • setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); • setSize(200, 120); • add(newDrawingPanel()); • } • }

9. 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. 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. First cast Graphics to Graphics2D • Send messages to g2 such as drawStringdraw fill setColorand 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 • FontaFont=newFont("SansSerif",Font.BOLD,16); • g2.setFont(aFont); • g2.setPaint(Color.MAGENTA); • g2.drawString("A car with no top",45,180);

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

13. 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. How do we load an image? • java.awt contains a methodthat 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 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. Summary • To draw a jpg or gif image • Extend JPanel • Declare Image instance variables in that class • Let the constructor initialize • OveridepaintComponent • Call super.paintComponent() • get a Graphics2D object named g2 perhaps • send drawImage messages to g2

17. Example code that needs6 jpg files in images • publicclass 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. This method is called when the panel needs to be redrawn • @Override • publicvoid 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); • }