eleventh Graphics in Java

Notes on SimpWin example Because of the inheritance mechanism, we can say that a SimpWin object is a JFrame object, just as we can say that, for example, a Labrador Retriever is a dog SimpWin is just a specific type of JFrame The first line in the main method is worth noting: we are creating an instance of the class we’re defining We have to do this because of the nature of main – it is a static method, and, therefore, exists independent of any SimpWin object – so we have to give it an object to work with The rest of the code in main() consists of instructions that set up the window to be displayed – this sort of functionality usually appears in a class’s constructor, as in the next example

Simple window example import javax.swing.*; public class SimpWin extends JFrame { public static void main (String [] args) { SimpWin sw = new SimpWin(); sw.setSize(300,200); sw.setTitle("Simple window"); sw.setLocation(150, 150); sw.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); sw.setAlwaysOnTop(true); sw.setVisible(true); }

Example, part 2 import javax.swing.*; public class SimpWin2 extends JFrame { public SimpWin2 () { setSize(300,200); setTitle("Simple window, part deux"); setLocation(150, 150); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setAlwaysOnTop(true); setVisible(true); } public static void main (String [] args) { SimpWin2 sw = new SimpWin2();

Notes on second part of example The second example is just like the first, except: we have explicitly defined the constructor, which contains all of the code that describes the object to be created we have limited main() to a simple call to the constructor; main() exists just as a tester method for the rest of the class Note the method call syntax within the constructor – we call the methods without an apparent calling object or class In fact, the calling object is the object being created by the constructor

A more interesting window We can now create a blank window, but we want to be able to draw pictures The JFrame class includes a method (inherited by any of its child classes) called paint(), which enables us to use the window as a blank canvas on which we can place shapes and colors The shapes and colors are controlled by an instance of a class named Graphics, which is passed to paint() as an argument

Drawing pictures with Java Java’s Graphics class contains methods for drawing lines and simple geometric figures (e.g. rectangles, ellipses) Figures can be hollow or filled with color Drawings are created within the context of an X-Y coordinate system illustrated on the next slide

Drawing pictures with Java Java’s Graphics class contains methods for drawing lines and simple geometric figures (e.g. rectangles, ellipses) Figures can be hollow or filled with color Drawings are created within the context of an X-Y coordinate system illustrated on the next slide

Java screen coordinate system

Java coordinate system and graphics objects As the previous slide illustrates, the origin point (0,0) is in the upper lefthand corner of the screen (or Container, such as a JFrame ) The X axis is horizontal and the Y axis is vertical; all values are positive A figure, such as a rectangle or ellipse, has a bounding rectangle that indicates the borders in which it is drawn in the space The upper left corner of this position and the size of the figure are specified in its constructor

Swing objects and the paint() method Most Swing components include a paint() method, which is used to draw the component on the screen This method is inherited from JComponent, an ancestor class for most of the Swing objects As an inherited method, we have been able to use it (invisibly, since none of our code has called it directly) without modifying, or overriding the original version In order to draw our own pictures, we will need to provide a new paint() definition, overriding the original

The paint() method The paint method for an object is automatically invoked when the object is made visible; there is almost never an explicit call to the method The paint() method has a single parameter of type Graphics, typically named g We use g to invoke the methods that draw pictures The Graphics class is defined in the awt package, which means we need another import statement if we want to add a paint method to our code

Example import javax.swing.*; import java.awt.*; public class BlueSquare extends JFrame { public BlueSquare () { setSize(140,160); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); setVisible(true); } public void paint (Graphics g) { g.setColor(Color.BLUE); g.fillRect(20,40,100,100); public static void main (String[] args) { BlueSquare b = new BlueSquare();

Learning Goals Understand at a conceptual and practical level How to draw more simple shapes with java.awt.Graphics Arcs Rectangles Bitmapped pictures versus vector graphics How to use a java.awt.Graphics2D class How to convert the Graphics class to it How to set the color How to set the paint How to set the stroke (paint brush) How to create the object to be painted How to paint the object

Drawing Arcs Arcs Outlined Arc Filled Arc g.drawArc(topLeftX, topLeftY, width, height, startAngle, arcAngle); Filled Arc g.fillArc((topLeftX, topLeftY, width, height, startAngle, arcAngle); The top left x and y in the ovals and arcs are for the top left corner of the bounding rectangle. The arcAngle is the amount to add to the startAngle to get the endAngle.

Georgia Institute of Technology Drawing Rectangles Rectangle Outlined Rectangle g.drawRect(topLeftX, topLeftY, width, height); Filled Rectangle g.fillRect(topLeftX,topLeftY,width,height); Outlined Rounded Rectangle g.drawRoundRect(topLeftX,topLeftY,width,height,arcWidth,arcHeight); Filled Rounded Rectangle g.fillRoundRect(topLeftX,topLeftY,width,height,arcWidth,arcHeight); The topLeftX and topLeftY are the coordinates of the top left point of the enclosing rectangle for the rounded rectangle. The arcWidth and arcHeight in the rounded rectangle are the width and height of the oval that creates the rounded part of the rectangle. To draw a rectangle in the background color (clear the area). g.clearRect(topLeftX,topLeftY,width,height); To draw a 3-d rectangle (looks like a button) g.draw3DRect(topLeftX, TopLeftY,width,height,isRaised); g.fill3DRect(topLeftX,TopLeftY,width,height,isRaised);

Drawing on a Blank Picture Georgia Institute of Technology Drawing on a Blank Picture You can make pictures from the “blank” files They will have all white pixels 640x480.jpg 7inX95in.jpg You can also create a “blank” picture with a width and height They will also have all white pixels Picture blankPicture = new Picture(width,height);

Draw a Picture Exercise Create a method that will draw a simple picture Use at least one rectangle Use at least one polygon Use at least one oval Use at least one arc Should this be a class method or object method? Georgia Institute of Technology

Bitmapped Versus Vector Graphics Georgia Institute of Technology Bitmapped Versus Vector Graphics We have been doing bitmapped graphics Specifying the color of each pixel in the picture We just wrote a method that drew a simple picture Which is smaller the program or the picture? Some applications use vector graphics which are programs that produce the picture Used in Postscript, Flash, and AutoCAD Advantages: smaller, easy to change, can be scaled

Georgia Institute of Technology Precision Drawings How would you draw a stack of filled rectangles starting from the lightest one at the bottom right and the darkest one at the top left. With 10 pixels between each Not easy with drawing packages Georgia Institute of Technology

Draw Filled Rectangles Method Georgia Institute of Technology Draw Filled Rectangles Method public void drawFilledRectangles() { Graphics g = this.getGraphics(); Color color = null; // loop 25 times for (int i = 25; i > 0; i--) color = new Color(i * 10, i * 5, i); g.setColor(color); g.fillRect(0,0,i*10,i*10); } Try drawing a series of filled ovals.

1 // Fig. 28.5: ShowColors.java 2 // Demonstrating Colors 3 import java.awt.*; 4 import javax.swing.*; 5 import java.awt.event.*; 6 7 public class ShowColors extends JFrame { 8 public ShowColors() 9 { 10 super( "Using colors" ); 11 12 setSize( 400, 130 ); 13 show(); 14 } 15 16 public void paint( Graphics g ) 17 { 18 // set new drawing color using integers 19 g.setColor( new Color( 255, 0, 0 ) ); 20 g.fillRect( 25, 25, 100, 20 ); 21 g.drawString( "Current RGB: " + g.getColor(), 130, 40 ); 22 23 // set new drawing color using floats 24 g.setColor( new Color( 0.0f, 1.0f, 0.0f ) ); 25 g.fillRect( 25, 50, 100, 20 ); 26 g.drawString( "Current RGB: " + g.getColor(), 130, 65 ); 27

28 // set new drawing color using static Color objects 29 g.setColor( Color.blue ); 30 g.fillRect( 25, 75, 100, 20 ); 31 g.drawString( "Current RGB: " + g.getColor(), 130, 90 );   32 33 // display individual RGB values 34 Color c = Color.magenta; 35 g.setColor( c ); 36 g.fillRect( 25, 100, 100, 20 ); 37 g.drawString( "RGB values: " + c.getRed() + ", " + 38 c.getGreen() + ", " + c.getBlue(), 130, 115 ); 39 } 40 41 public static void main( String args[] ) 42 { 43 ShowColors app = new ShowColors(); 44 45 app.addWindowListener( 46 new WindowAdapter() { 47 public void windowClosing( WindowEvent e ) 48 { 49 System.exit( 0 ); 50 } 51 } 52 ); 53 } 54 }

Graphics 2D

Java 2D Graphics – java.awt Newer drawing classes More object-oriented Instead of drawOval() or fillOval() you create a Ellipse2D object and ask a 2d graphics object to draw or fill it Geometric shapes are in the java.awt.geom package Advanced Drawing Support for different types of brushes Line thickness, dashed lines, etc Supports cubic curves and general paths Drawing of gradients and textures Move, rotate, scale and shear text and graphics Create composite images See http://java.sun.com/docs/books/tutorial/2d/ for the tutorial on 2d graphics from Sun.

How To Use Java 2D Cast the Graphics class to Graphics2D Graphics2D g2 = (Graphics2D) gObj; Set up the stroke if desired (type of pen) g2.setStroke(new BasicStroke(widthAsFloat)); Set up any Color, GradientPaint, or TexturePaint g2.setPaint(Color.blue); g2.setPaint(blueToPurpleGradient); g2.setPaint(texture); Create a geometric shape Line2D line2D = new Line2D.Double(0.0,0.0,100.0,100.0); Draw the outline of a geometric shape g2.draw(line2d); Fill a geometric shape g2.fill(rectangle2d);

Graphics2D inherits from Graphics Inherits basic drawing ability from Graphics Adds more advanced drawing ability Graphics Graphics2D Georgia Institute of Technology

Using Graphics2D to Copy an Image public void copy2D(Picture source, int x, int y) { // get the graphics object Graphics g = this.getGraphics(); Graphics g2 = (Graphics2D) g; // copy the image g2.drawImage(source.getImage(),x,y,null); } We had created a general copy method that copied a picture to a x and y location in the current picture but we had to copy all the pixels ourselves. But, there is a method that will do this for us in both Graphics and Graphics2D.