2D Graphics

“Drawing Things”

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 you’ll need to do drawing and graphics

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

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

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

Coordinate SystemWhen 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 infog.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);

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()

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

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

paintComponent() methodResize window:paintComponent()

invoked on JFrame

paintComponent() invoked on all components of JFrame

paintComponent() invoked on all components of each panel

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

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

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

Simple Graphics Example// class representing panel to draw onclass DrawingPanel extends JPanel {

public DrawingPanel() {

// perform any necessary initialisation}

// override paint method to draw shapes on the panelpublic 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

}}

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?

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, …

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 sizeFont(String name, int style, int size)

– use the Graphics void setFont(Font f) method g.setFont(new Font("Monospaced", Font.ITALIC, 24))

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

DrawingWindow (JFrame)

DrawingPanel (JPanel)(can be done as an inner class of DrawingWindowso it knows about the objects to be drawn)

Shape (abstract) -Circle -Line

Dynamic Drawing

DrawingWindow (JFrame)

DrawingPanel (JPanel)(inner class of DrawingWindow.. Class structure often used for graphics pane. Inner can accessvariables of outer)

Shape (abstract) -Circle -Line

Dynamic Drawing

Object to be drawn

Shape classespublic abstract class Shape {

public abstract void draw(Graphics g);}-------------------------------------------public class Circle() extends Shape{

private int x,y; // position to drawprivate int radius; // size of circleprivate Color c; // color of circle

// constructor to initialise instance variablespublic Circle(int x, int y, int r, Color c){...}...// include a method to draw the shape

public void draw(Graphics g) { // drawing instructions...

}}

DrawingPanel within DrawingWindowpublic 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.

} }

Event Handler

// event handler for selecting menu options public void actionPerformed(ActionEvent e) { if (e.getSource() instanceof JMenuItem) {

// user clicks on draw Circle menu item and repaint.. // else

// if user click on drawSquare etc etc ... } } }

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

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

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.

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)

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?

Lab