1. COM 1020 Martin Cooke 2D Graphics

2. Objectives To show how to draw in a Swing- based GUI using Java 2D See Java2Demo in demo/jfc/Java2D

3. PaintComponent To draw on a panel, you must override JPanel’s paintComponent method JPanel is usually extended to obtain the desired behaviour: public class MyPanel extends JPanel { public void paintComponent (Graphics g) { // code for drawing }

4. Graphics and paintComponent paintComponent takes one argument of type Graphics. Graphics has methods to draw lines, images and text, as well as methods for changing the font, colour and pen style Every time you need to put text messages or graphics in a panel, you need to define a new class and override paintComponent paintComponent is called automatically by Java. You never call it yourself. Whenever a window needs redrawing (eg the first time it is displayed, or if it is resized, or if an occluding window is moved), the event handler notifies the window, which then causes the paintComponent method of all components to be executed. The repaint method forces a component to be repainted

5. Graphics and paintComponent (2) All drawing in Java is done through a Graphics object Coordinates on a graphics object are measured in pixels, and (0,0) is the top left of the component Writing text is considered as a special kind of drawing and uses the Graphics.drawString method: g.drawString(textString,x,y); A class extending JPanel must also call super.paintComponent(g); so that the superclass does what drawing it has to (eg filling in the background colour)

6. HelloWorldPanel public class HelloWorldPanel extends JPanel { public void paintComponent(Graphics g) { super.paintComponent(g); String s = "Hello World"; // write in 18 point bold Sans Serif Font ssb18 = new Font("SansSerif",Font.BOLD,18); FontMetrics ssb18Metric = g.getFontMetrics(ssb18); g.setFont(ssb18); // place the string in the middle of the panel Dimension dim = getSize(); // of the panel int ws = ssb18Metric.stringWidth(s); int fontHeight = ssb18Metric.getHeight(); int x = (dim.width - ws)/2; int y = (dim.height - fontHeight)/2; g.drawString(s,x,y); }

7. HelloWorldFrame public class HelloWorldFrame extends CentreFrame { public HelloWorldFrame() { setTitle("Hello World frame"); Container cpane = getContentPane(); cpane.add(new HelloWorldPanel()); } public static void main(String[] args) { JFrame frm = new HelloWorldFrame(); frm.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frm.show(); }

8. Java 2D library Since JDK 1.0 the Graphics class had methods for drawing lines, polygons, arcs etc. But it has rather limited capabilities. The J2SDK includes the Java 2D library which offers a more powerful set of graphical operators To use Java 2D you need a Graphics2D object, which is a subclass of Graphics. Methods such as PaintComponent automatically receive a Graphics2D object, so it is safe to cast the Graphics argument to Graphics2D public void paintComponent(Graphics g) { Graphics2D g2 = (Graphics2D) g; // can now apply all 2D stuff }

9. Graphics context The graphics context instantiated by a Graphics2D object has the following fields, which can be got and set in the usual ways eg setPaint, setStroke paintDetermines colour of shape strokeLine width, dashing, end styles fontCan access all TrueType & Postscript Type 1 on machine transformationGeometric transformation to apply to shape before rendering (see later) compositing rule Determines how colours should be combined with existing colours on drawing surface eg opaque, transparent clipping shapeAll rendering ops are limited to the area defined by the clipping shape rendering hintsTrade off between speed and quality

10. How to draw in 9 steps 1.Obtain graphics object Graphics2D g2 = (Graphics2D) g; 2.Provide rendering hints RenderingHints hints =...; g2.setRenderingHints(hints); 3.Set stroke to define the kind of ‘brush’ to be used eg thickness, dotted line, … Stroke stroke =...; g2.setStroke(stroke);

11. How to draw in 9 steps 4.Set paint to decide on color, tiling etc Paint paint =...; g2.setPaint(paint); 5.Set clipping region Shape clip =...; g2.setClip(clip); 6.Decide on transformation from user space to device space AffineTransformation transform =...; g2.transform(transform);

12. How to draw in 9 steps 7.Set a composition rule Composite composite =...; g2.setComposite(composite); 8.Create a shape Shape shape =...; 9.Draw or fill the shape g2.fill(shape) g2.draw(shape)

13. How and when drawing takes place Creating a shape or setting methods of the graphicsContext do not cause any drawing Drawing takes place when you call draw or fill Drawing sequence: –Stroke –Transform –Clip –Fill –Compose

14. Shape classes (a partial view) > Shape RectangularShape Ellipse2DRectangle2D Line2D Geometric shape classes in java.awt.geom –Line2D, Rectangle2D and Ellipse2D all implement Shape –Create the appropriate object, then draw it using Graphics2D.draw(Shape)

15. DrawPanel import javax.swing.*; import java.awt.*; import java.awt.geom.*; public class DrawPanel extends JPanel { public void paintComponent(Graphics g) { super.paintComponent(g); Graphics2D g2 = (Graphics2D)g; Dimension dim = getSize(null); double leftX = dim.width/4.0; double topY = dim.height/4.0; double width = dim.width/2.0; double height = dim.height/2.0; Rectangle2D aRect = new Rectangle2D.Double(leftX,topY,width,height); g2.draw(aRect); Ellipse2D anEllipse = new Ellipse2D.Double(); anEllipse.setFrame(aRect); g2.draw(anEllipse); g2.draw(new Line2D.Double(leftX,topY,leftX+width,topY+height)); }

16. DrawPanel test public class DrawFrame extends CentreFrame { public DrawFrame() { setTitle("Draw Frame"); getContentPane().add(new DrawPanel()); } public static void main(String[] args) { JFrame frm = new DrawFrame(); frm.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frm.show(); }

17. Colour Graphics2D.setPaint sets the drawing colour –g2.setPaint(Color.RED); Some colours are predefined constants, otherwise can define using RGB values eg –g2.setPaint(new Color(0,128,128)); Use JPanel.setBackground and JPanel.setForeground to set the default background and foreground (drawing) colours respectively Can also apply the brighter() or darker() method to a colour: –c.brighter().brighter().brighter(); To fill, use Graphics2D.fill rather than Graphics2D.draw

18. Fonts Represented by instances of java.awt.Font Font smallFont = new Font(“Monospaced”,Font.PLAIN, 10); Font names can be logical or physical (ie the normal name for the font eg Arial ) Monospaced is a logical name for a font which should be available on all platforms (usually mapped to Courier) Other examples Font(“Serif”, Font.BOLD, 18) Font(“SansSerif”, Font.ITALIC, 6);

19. Images Images represented by java.awt.Image Can be static eg GIF, JPEG, PNG, … Or dynamic eg a video stream, GIF89a animation Image im = Toolkit.getDefaultToolkit().getImage(“me.gif”); g2.drawImage(im,75,50,this); The 4 th parameter is a reference to an image observer. This is used to allow drawImage to return immediately even before the image is completely drawn. The image observer can (optionally) monitor the progress of the image drawing. Lots of getImage() methods eg getImage(URL url) Scaling to given rectangle: drawImage(im,x1,y1,x2,y2,this);

20. Transforms Java 2D supports the notion of an affine transform (which is one where parallel lines remain parallel after transformation eg translate, rotate, scale, shear) To apply an affine transformation to any graphics object, supply the appropriate information to the transform attribute in the graphics context Simplest approach is to use one of these methods: –Rotate by a given angle: g2.rotate(theta) –Scale by factors in each of x and y g2.scale(x,y) –Shear by given amount in x and y –Translate by certain amount in x and y Alternatively, construct your own affine transform Transforms can be concatenated using concatenate

21. Not covered here Complete shape primitives Clipping Compositing Colour gradients Polylines defined by general paths Controlling rendering quality eg antialiasing Image convolution eg sharpening, blurring Double-buffering to prevent flicker during redraw Printing

22. Summary Panels are interface components on which you can draw (and they can also contain other components) To draw on a panel, extend JPanel and override paintComponent which uses the Graphics parameter The Java 2D API is a powerful library for 2D graphics operations

23. Code ButtonInPanel HelloWorldPanel, HelloWorldFrame DrawFrame, DrawPanel DrawFrame2, DrawPanel2

24. Exercises The Java 2D tutorial is really very good (and covers a lot of material not covered here). You are strongly advised to browse it and check out some of the advanced capabilities of 2D. You will need to read parts of it to tackle the exercises below. 1.Consider the string “To be or not to be.” Display this text in a panel in each of its 4 corners. 2.Modify 1 so that the string is produced in a different font in each of the corners. 3.Modify 2 so that a different colour is used for each piece of text. 4.Find and load an image from a GIF file. 5.Repeat 4 but map the image to the size of the panel in which it is placed. 6.Repeat 4 with an image defined by a URL. 7.Read about compositing and use it to paste an opaque label on your image. 8.Redo 7 to make the label and/or image transparent.