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

Transcription

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

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

3 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 3

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 4

5 The Coordinate System <0, 0> x X y <x, y> Y <width-1, height-1> 5

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 6

7 Put something in a JPanel Implement a JPanel class and draw a few strings import java.awt.*; public class Panel 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); } 7

8 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 Panel()); } 8

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 g or g2 g2 is a canvas that understands draw messages Draw on the newer Graphics2D object canvas need that cast to Graphics2D Never send paintcomponent messages To draw, send repaint() messages to the panel 9

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

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

12 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 12

13 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 13

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

15 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 15

16 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 16

17 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(); } 17

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