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

2. 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. 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 (.gif files for example)

4. 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. 5 Drawing The Coordinate System x y Y X

6. 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. 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 JPanel @Override public void paintComponent(Graphics g) { g.drawString("Put this in g, which", 20, 20); g.drawString("is in Panel", 20, 40); g.drawString("which is in MyFrame", 20, 60); }

8. 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); getContentPane().add(new DrawingPanel()); }

9. 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. 10 Drawing The Graphics Context  An object of the Graphics class represents a particular drawing surface  It defines a graphics context in which shapes will be rendered  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. 11 Drawing First cast Graphics to Graphics2D // Override the paintComponent method in JPanel @Override public void paintComponent(Graphics g) { // Graphics2D is a newer drawing context added after // Graphics was around for a while. Graphics2D has // more and better messages Graphics2D g2 = (Graphics2D) g; g2.drawString("Put this in g, which", 20, 20);  You can send messages to g2 such as drawString, draw(Shape), setColor, setBackground

12. 12 Drawing Classes from java.awt.geom  The Rectangle2D.Double class (an inner class)  First 2 Arguments are the UPPER left corner // Use the static Double inner class of Rectangle2D // Floating point numbers are double by default Rectangle2D body = // xcoord, ycoord, width, height new Rectangle2D.Double(30.0, 70.0, 200.0, 50.0); g2.draw(body);

13. 13 Drawing draw Messages to Graphics2D  Can also draw any object that implements the Shape interface  public void draw(Shape s) Draws outline of the shape using this Graphics2D 's current pen color Shape leftWheel = // xcoord, ycoord, width, height new Ellipse2D.Double(50.0, 100.0, 50.0, 50.0); g2.draw(leftWheel); // 30.0, 70.0 is the upper left corner  You could also draw on a Graphics context with different messages  Recommended: use Graphics2D

14. 14 Drawing Color  The Color class is used to define and manage the color in which shapes are drawn  Colors are defined by their RGB value, which defines the relative contribution of the primary colors red, green, and blue  The setPaint method of the Graphics2D defines the color used in future draw messages  g2.setPaint(aColor)

15. 15 Drawing Color  The Color class contains several predefined colors, defined as public final static ints (class constants)  Many other colors can be defined using the constructor of the Color class  Over 16 million colors can be defined, but we cannot distinguish between that many Color(int r, int g, int b) Creates a color with the specified red, green, and blue values in range (0 - 255)  Furthermore, the hardware of most systems has limitations to the color options available

16. 16 Drawing A Few Predefined Colors  You can create your own or use the constants in the Color class Color.WHITE Color.RED Color.BLUE Color.YELLOW Color.PINK Color.MAGENTA  Set future painting color like this g2.setPaint(Color. BLUE );

17. 17 Drawing fill  draw(shape) draws an outline of the shape  fill(shape) draws an outline of the shape and then fills it with whatever color is set g2.setPaint(Color.GREEN); g2.setPaint(Color.BLUE); g2.draw(body); g2.fill(body);

18. 18 Drawing Fonts  A Font object is constructed with 3 arguments to indicate the  logical font names such as "SansSerif"  style such as Font.PLAIN and Font.BOLD  font size (10 is small, 30 is big)  Then send a setFont message to the Graphics2D object assume code shown on next slide is paintComponent

19. 19 Drawing Drawing strings with Graphics2D Font aFont = new Font("SansSerif", Font.BOLD, 16); g2.setFont(aFont); g2.setPaint(Color.MAGENTA); g2.drawString("A car with no top", 45, 180); How would you draw a solid black wheel that can be seen?

20. 20 Drawing Drawing Images in Java

21. 21 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

22. 22 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…

23. 23 Drawing How do we load an image?  java.awt now contains a method Image img = ImageIO.read(new File("fileName"));  It is used to load an image file from disk  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);

24. 24 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

25. 25 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. get a Graphics2D object named g2 perhaps 6. send drawImage messages to g2

26. 26 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) { // TODO Auto-generated catch block e.printStackTrace(); }

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

28. 28 Drawing Still need to Add JPanel to a JFrame import javax.swing.JFrame; import javax.swing.JPanel; public class DrawCardsOnWaterMain extends JFrame { public static void main(String[] args) { new DrawCardsOnWaterMain().setVisible(true); } public DrawCardsOnWaterMain() { setSize(250, 250); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); JPanel panel = new CardsOnTheWater(); add(panel); }