2D Graphics

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 Graphicsclass has most methods that you’ll 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. Graphics class: methods 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 setColor(Color.BLUE); fillRect(rX, rY, wText, hText); drawString(“Text rendering”, 10, 10);

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 you’re 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 (0,0) g.drawOval(int x, int y, int width, int height) // 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 topleft 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. Resize window: paintComponent() invoked on JFrame  paintComponent() invoked on all components of JFrame    paintComponent() invoked on all components of each panel paintComponent() method

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 – you’ll 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. Dynamic Drawing DrawingWindow (JFrame) Shape (abstract) -Circle -Line DrawingPanel (JPanel) (can be done as an inner class of DrawingWindow so it knows about the objects to be drawn)

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

21. Shape classes public abstract class Shape { public abstract void draw(Graphics g); } ------------------------------------------- public class Circle() extends Shape{ private intx,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 etcetc // 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() instanceofJMenuItem) { // user clicks on draw Circle menu item and 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. It’ll have a paintComponent method to do the graphics drawing.. Don’t 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