Drawing C Sc 335 ObjectOriented Programming and Design

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

Outline w Drawing with a Graphics object ¾ Graphics and Graphics 2 D ¾ paint. Component and repaint ¾ draw and fill messages ¾ ¾ ¾ Strings, Lines, Rectangle, Ellipse, Polygons Colors Text and Fonts w Drawing Images ¾ Drawing Toolkit to convert jpg and gif files into Images 2

Drawing with a Graphics Object w The use of graphics is common among modern software systems w Java has strong support for graphics ¾ ¾ ¾ Drawing 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

The Coordinate System w A simple two-dimensional coordinate system exists for each graphics context or drawing surface w Each point on the coordinate system represents a single pixel w 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 g 2. draw. String("is in Panel 1", 20, 40); w A drawing surface has a width and height w Anything drawn outside of that area is not visible Drawing 4

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

Draw on a JPanel w Need to extend a class that extends JComponent ¾ JPanel is good w To draw things: ¾ ¾ ¾ extend JPanel have the class override the paint. Component method panel surface is transparent, so send drawing messages inside paint. Component to the graphic context · Drawing a Graphics 2 D object we'll reference with g 2 6

Put something in a JPanel w Implement a JPanel class and draw a few strings import java. awt. *; public class Drawing. Panel extends javax. swing. JPanel { // Override the paint. Component method in JPanel @Override public void paint. Component(Graphics g) { g. draw. String("Put this in g, which", 20); g. draw. String("is in Panel", 20, 40); g. draw. String("which is in My. Frame", 20, 60); } } Drawing 7

Then add the JPanel to a JFrame to see the drawing import javax. swing. JFrame; public class Draw. On. APanel extends JFrame { public static void main(String[] args) { new Draw. On. APanel(). set. Visible(true); } public Draw. On. APanel() { set. Title("A Frame with a panel"); set. Default. Close. Operation(JFrame. EXIT_ON_CLOSE); set. Size(200, 120); add(new Drawing. Panel()); } } Drawing 8

The Graphics Object w paint. Component'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 w The actual object passed to every JPanel is a Graphics 2 D, so you can cast to Graphics 2 D w Never send paintcomponent messages ¾ Drawing send repaint() messages instead 9

The Graphics Context w An object of the Graphics class represents a particular drawing surface ¾ It defines a graphics context in which shapes will be rendered w Graphics is still around, but Java added an improved 2 D Library in Java 1. 3, use Graphics 2 D ¾ ¾ Drawing Better drawing capabilities It is analogous to using swing (JButton, JFrame) rather than older awt components (Button, Frame) 10

First cast Graphics to Graphics 2 D // Override the paint. Component method in JPanel @Override public void paint. Component(Graphics g) { // Graphics 2 D is a newer drawing context added after // Graphics was around for a while. Graphics 2 D has // more and better messages Graphics 2 D g 2 = (Graphics 2 D) g; g 2. draw. String("Put this in g, which", 20); ¾ Drawing You can send messages to g 2 such as draw. String, draw(Shape), set. Color, set. Background 11

Classes from java. awt. geom w The Rectangle 2 D. Double class (an inner class) ¾ First 2 Arguments are the UPPER left corner // Use the static Double inner class of Rectangle 2 D // Floating point numbers are double by default Rectangle 2 D body = // xcoord, ycoord, width, height new Rectangle 2 D. Double(30. 0, 70. 0, 200. 0, 50. 0); g 2. draw(body); Drawing 12

draw Messages to Graphics 2 D w Can also draw any object that implements the Shape interface w public void draw(Shape s) Draws outline of the shape using this Graphics 2 D's current pen color Shape left. Wheel = // xcoord, ycoord, width, height new Ellipse 2 D. Double(50. 0, 100. 0, 50. 0); g 2. draw(left. Wheel); // 30. 0, 70. 0 is the upper left corner w You could also draw on a Graphics context with different messages ¾ Drawing Recommended: use Graphics 2 D 13

Color w The Color class is used to define and manage the color in which shapes are drawn w Colors are defined by their RGB value, which defines the relative contribution of the primary colors red, green, and blue w The set. Paint method of the Graphics 2 D defines the color used in future draw messages ¾ Drawing g 2. set. Paint(a. Color) 14

Color w The Color class contains several predefined colors, defined as public final static ints (class constants) w Many other colors can be defined using the constructor of the Color class w 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) w Furthermore, the hardware of most systems has limitations to the color options available Drawing 15

A Few Predefined Colors w 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 w Set future painting color like this g 2. set. Paint(Color. BLUE); Drawing 16

fill w draw(shape) draws an outline of the shape w fill(shape) draws an outline of the shape and then fills it with whatever color is set g 2. set. Paint(Color. GREEN); g 2. draw(body); Drawing g 2. set. Paint(Color. BLUE); g 2. fill(body); 17

Fonts w A Font object is constructed with 3 arguments to indicate the ¾ ¾ ¾ logical font names such as "Sans. Serif" style such as Font. PLAIN and Font. BOLD font size (10 is small, 30 is big) w Then send a set. Font message to the Graphics 2 D object assume code shown on next slide is paint. Component Drawing 18

Drawing strings with Graphics 2 D Font a. Font = new Font("Sans. Serif", Font. BOLD, 16); g 2. set. Font(a. Font); g 2. set. Paint(Color. MAGENTA); g 2. draw. String("A car with no top", 45, 180); How would you draw a solid black wheel that can be seen? Drawing 19

Menus in Java Needed in Noughts and Crosses Drawing 20 20

JMenus in Java Swing Java menus use the Composite Design Pattern JMenu. Bar is a composite extending Jcomponent w Can add others like JLabel, JText. Field w Can also add JMenu. Item to JMenu. Item has three subclasses w JMenu w JRadio. Button. Menu. Item w JCheckbox. Menu. Item Drawing 21 21

JMenu menu = new JMenu("Composite"); menu. set. Mnemonic('C'); // Open with alt-C // Create two leafs JLabel label = new JLabel("Label"); JText. Field text. F = new JText. Field("text field"); menu. add(label); menu. add(text. F); // Add a Composite JMenu. Item menu. Item = new JMenu. Item("menu item"); menu. add(menu. Item); // Add two Composites to a Composite JMenu jmi 1 Nest = new JMenu("Nest 1"); menu. add(jmi 1 Nest); JMenu. Item jmi. Nested 1 = new JMenu. Item("Nested in 1"); jmi 1 Nest. add(jmi. Nested 1); JMenu. Item jmi. Nested 2 = new JMenu. Item("Nested in 1 also"); jmi 1 Nest. add(jmi. Nested 2); Drawing 22 22

JMenu. Item. Demo. Composite // Add two more Composites JMenu. Item check. Box = new JCheck. Box. Menu. Item("Human", false); JMenu. Item radio. Button = new JRadio. Button. Menu. Item("Computer", true); menu. add(check. Box); menu. add(radio. Button); // Add two more Composites JMenu. Bar menu. Bar = new JMenu. Bar(); set. JMenu. Bar(menu. Bar); menu. Bar. add(menu); Run JMenu. Item. Demo. Composite. java See code demo page Drawing 23 23

Mouse. Listener Do code demo Drawing 24 24

import java. awt. Graphics; java. awt. Graphics 2 D; java. awt. event. Mouse. Event; java. awt. event. Mouse. Listener; Drawing lines import javax. swing. JFrame; import javax. swing. JPanel; public class Mouse. Panel. With. Main extends JPanel { public static void main(String[] args) { JFrame window = new JFrame("Print where the moust clicked"); window. set. Title("Listen to mouse events"); window. set. Default. Close. Operation(JFrame. EXIT_ON_CLOSE); window. set. Size(300, 200); window. add(new Mouse. Panel. With. Main()); window. set. Visible(true); } public Mouse. Panel. With. Main() { this. add. Mouse. Listener(new Listen. To. Mouse()); } // Override the paint. Component method in JPanel @Override public void paint. Component(Graphics g) { super. paint. Component(g); Graphics 2 D g 2 = (Graphics 2 D) g; g 2. draw. String("Click me and I print the x, y coordinate", 20); } private class Listen. To. Mouse implements Mouse. Listener { @Override public void mouse. Clicked(Mouse. Event mouse. Click) { System. out. println("Mouse click at " + mouse. Click. get. X() + " " + mouse. Click. get. Y()); } @Override public void mouse. Entered(Mouse. Event arg 0) { // TODO Auto-generated method stub } @Override public void mouse. Exited(Mouse. Event arg 0) { // TODO Auto-generated method stub } @Override public void mouse. Pressed(Mouse. Event arg 0) { // TODO Auto-generated method stub } } Drawing } @Override public void mouse. Released(Mouse. Event arg 0) { // TODO Auto-generated method stub } 25 25

Drawing Images in Java Drawing 26

So far… w We know how to subclass a JPanel and use a Graphics 2 D object as a drawing canvas inside the paint. Component method. w Sometimes we need to use an existing image rather than draw something ourselves Drawing 27

Drawing an Image w Java’s Image class in java. awt abstracts a bitmap image for use in drawing. w Images can be drawn to a panel through a Graphics object w An important Graphics 2 D method: ¾ draw. Image w But first… Drawing 28

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

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

Summary w To draw a jpg or gif image 1. 2. 3. 4. 5. 6. Drawing Extend JPanel Declare Image instance variables in that class Let the constructor initialize Overide paint. Component get a Graphics 2 D object named g 2 perhaps send draw. Image messages to g 2 31

Example code that needs 6 jpg files in images public class Cards. On. The. Water extends JPanel { private Image ocean, card 1, card 2, card 3, card 4, card 5; public Cards. On. The. Water() { } Drawing try { ocean = Image. IO. read(new File("images/ocean. jpg")); card 1 = Image. IO. read(new File("images/14 h. jpg")); card 2 = Image. IO. read(new File("images/13 h. jpg")); card 3 = Image. IO. read(new File("images/12 h. jpg")); card 4 = Image. IO. read(new File("images/11 h. jpg")); card 5 = Image. IO. read(new File("images/10 h. jpg")); } catch (IOException e) { // TODO Auto-generated catch block e. print. Stack. Trace(); } 32

This method is called when the panel needs to be redrawn @Override public void paint. Component(Graphics g) { Graphics 2 D g 2 = (Graphics 2 D) g; g 2. draw. Image(ocean, 0, 0, this); g 2. draw. Image(card 1, 10, this); g 2. draw. Image(card 2, 30, 15, this); g 2. draw. Image(card 3, 50, 20, this); g 2. draw. Image(card 4, 70, 25, this); g 2. draw. Image(card 5, 90, 30, this); } Drawing 33

Still need to Add JPanel to a JFrame import javax. swing. JFrame; import javax. swing. JPanel; public class Draw. Cards. On. Water. Main extends JFrame { public static void main(String[] args) { new Draw. Cards. On. Water. Main(). set. Visible(true); } public Draw. Cards. On. Water. Main() { set. Size(250, 250); set. Default. Close. Operation(JFrame. EXIT_ON_CLOSE); JPanel panel = new Cards. On. The. Water(); add(panel); } } Drawing 34