Slide 1

2D Graphics Drawing Things Slide 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 Slide 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 Slide 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 Slide 5 Look at the Java API Docs to see various drawing methods available in the Graphics class Slide 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); Slide 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() Slide 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 Slide 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 Slide 10 paintComponent() method Resize window: paintComponent() invoked on JFrame paintComponent() invoked on all components of JFrame paintComponent() invoked on all components of each panel Slide 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 Slide 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 Slide 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 Slide 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 } Slide 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? Slide 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, Slide 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)) Slide 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 Slide 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 Slide 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 Slide 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... } Slide 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. } Slide 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... } Slide 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 Slide 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 Slide 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. Slide 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) Slide 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? Slide 29 Lab