1. 2D Graphics Drawing Things

2. Graphics In your GUI, you might want to draw graphics E.g. draw lines, circles, shapes, draw strings etc The Graphics class has most methods that youll need to do drawing and graphics

3. Graphics class Allows applications to draw onto components It has the various methods needed to create a drawing e.g. –drawLine(), drawRect(), drawOval(), –fillRect(), fillOval(), –drawString(), –setColor(), setFont() etc… Each needs various parameters –e.g. drawLine(x1,y1,x2,y2) draws a line from (x1,y1) to (x2,y2) –see Java API

4. drawString(Text rendering, 10, 10); setColor(Color.BLUE); fillRect(rX, rY, wText, hText); Can be divided into two basic groups: Draw and fill methods, enabling you to render basic shapes, text, and images Attributes setting methods, which affect how that drawing and filling appears e.g. setColor Graphics class: methods

5. Look at the Java API Docs to see various drawing methods available in the Graphics class

6. Coordinate System When you draw something – you have to specify: WHERE to place it on the component youre drawing on(co- ordinates relative to (0,0)) And WHAT SIZE it should be (e.g. width/height of an oval) Need to supply this info g.drawOval(int x, int y, int width, int height) (0,0) // e.g. draw a red line from points (10,10) to (100,100) g.setColor(Color.red); g.drawLine(10,10,100,100);

7. Coordinate System Each component has its own integer coordinate system –from (0,0) to (width-1, height-1) (0,0) is top left hand corner –getHeight() –getWidth()

8. Painting pictures… To display graphics we use panels as canvases –e.g. public class DrawingPanel extends JPanel{…} Main method for drawing components is paintComponent() method

9. Painting void paintComponent(Graphics g) redraws the component is called automatically when needed, e.g. window resized, window damaged… is invoked on every component in the window

10. paintComponent() method Resize window: paintComponent() invoked on JFrame paintComponent() invoked on all components of JFrame paintComponent() invoked on all components of each panel

11. paintComponent() Place all commands for drawing into paintComponent () method override paintComponent() public class DrawingPanel extends JPanel{ … public void paintComponent(Graphics g){ … // include code here to draw on panel } } ! Never call paintComponent() directly call repaint() ! –Runtime system decides best time to paint –repaint invokes paint() at the appropriate time –Avoid conflicts between redrawing and other operations of the run time system

12. paintComponent() should invoke super.paintComponent(g) to paint the original component.. public void paintComponent(Graphics g) { // need to call the original paint method to paint the // panel itself.. super.paintComponent(g); –Etc etc

13. Note: Paint() method Paint() method can be used instead of paintComponent() – Looking at code snippets – youll see plenty of this.. Paint() calls.. –paintComponent(Graphics g) –paintBorder(Graphics g) –paintChildren(Graphics g) Better practice to use paintComponent() Try both in the lab

14. Simple Graphics Example // class representing panel to draw on class DrawingPanel extends JPanel { public DrawingPanel() { // perform any necessary initialisation } // override paint method to draw shapes on the panel public void paintComponent(Graphics g) { // need to call the original paint method to paint the // panel itself.. super.paintComponent(g); // include the specific drawing instructions here }

15. Simple Graphics Example // Using the Drawing Panel class DrawingWindow extends Jframe { public DrawingWindow() { // // content pane contains the Drawing panel..etc – as covered in class.. } What will appear when you instantiate Drawing Window?

16. Color class This class is used to encapsulate colors in the RGB color space The class has constant class variables set up to return color objects representing the 16 main colors, –black, blue, cyan, darkGray, gray, green, lightGray, magenta, orange, pink, red, white and yellow Color.black, Color.blue, Color.pink, …

17. Font class This class represents fonts It can be used to change the font of the text appearing in graphics To change the default font in a graphics context –create an instance of a new Font setting the font name, style and size Font(String name, int style, int size) –use the Graphics void setFont(Font f) method g.setFont(new Font("Monospaced", Font.ITALIC, 24))

18. Dynamic Drawing Draw an item on a window when the user requests it e.g. draw a circle or a line depending on what user wants from the menu

19. DrawingWindow (JFrame) DrawingPanel (JPanel) (can be done as an inner class of DrawingWindow so it knows about the objects to be drawn) Shape (abstract) -Circle -Line Dynamic Drawing

20. DrawingWindow (JFrame) DrawingPanel (JPanel) (inner class of DrawingWindow.. Class structure often used for graphics pane. Inner can access variables of outer) Shape (abstract) -Circle -Line Dynamic Drawing Object to be drawn

21. Shape classes public abstract class Shape { public abstract void draw(Graphics g); } ------------------------------------------- public class Circle() extends Shape{ private int x,y;// position to draw private int radius; // size of circle private Color c;// color of circle // constructor to initialise instance variables public Circle(int x, int y, int r, Color c){... }... // include a method to draw the shape public void draw(Graphics g) { // drawing instructions... }

22. DrawingPanel within DrawingWindow public class DrawingWindow extends etc etc { // Shape that is to be drawn on the panel private Shape shape = null; constructor/set content pane to drawing panel etc etc etc // inner class representing the panel to draw on, class DrawingPanel extends JPanel { // constructor for DrawingPanel etc............ // override paint method to paint shapes on the panel // if shape exists draw it. }

23. Event Handler // event handler for selecting menu options public void actionPerformed(ActionEvent e) { if (e.getSource() instanceof JMenuItem) { // user clicks on draw Circle menu itemand repaint.. //else // if user click on drawSquare etc etc... }

24. Dynamic Drawing To interactively draw… –Create class that represents object to be drawn include a method that draws the object –In our example.. A Circle (shape) with a draw method –On drawing panel override paintComponent() to draw the object.. i.e. Shape.draw(g) –Include a listener to catch user interaction –e.g. selecting menu item, clicking mouse on panel –In the event handler create object to be drawn invoke a repaint() to redraw the panel

25. Dynamic Drawing To interactively draw many objects… –Create classes that represent objects to be drawn include a method in each that draws the object –Include a data structure to hold objects to be drawn ArrayList is useful for this –On drawing panel override paint() to draw all objects that are stored in the data structure –Include listener to catch user interaction –In the event handler create object to be drawn and add to data structure invoke a repaint() to redraw the panel

26. Lab Set up a Window that look like this. The Circle is just there from the beginning.. No listeners. No repaint..() Need a drawing panel to draw on. Itll have a paintComponent method to do the graphics drawing.. Dont forget basics of having a frame, setContentPane() etc.

27. Lab Next.. Want to add user interaction Add menu items to draw a circle and a square Need actionListener to handle the menu items.. Repaint() behaviour to draw the shapes The paint Component method of the drawing panel will need to call the correct draw method (for the shape being drawn)

28. Lab Make changes to the application from Q2 so that, instead of choosing a menu option, when the user clicks on the drawing panel a solid red circle is drawn. The centre of the circle should be the point of the mouse click. How do know where the user clicked? What type of listener?

29. Lab