Lesson 8
The Java Graphics
AUBG ICoSCIS Team
Assoc. Prof. Stoyan Bonev
March, 23 - 24, 2013
SWU, Blagoevgrad
Lesson contents




To understand Java coordinate systems.
To draw things using methods in the Graphics class .
To understand how/when a Graphics object is created.
To override the paintComponent method to draw things
on a GUI component.
 To use a panel as a canvas to draw things.
 To draw strings, lines, rectangles, ovals, arcs, polygons.
Motivations
If you want to draw shapes such as a bar chart, a clock, or a
stop sign, as shown below, how do you do it?
3
Java Coordinate System
x
(0, 0)
Y Axis
X Axis
y
(x, y)
(0, 0)
Conventional
Coordinate
System
Java Coordinate
System
Y Axis
4
X Axis
Each GUI Component Has its Own
Coordinate System
(x3, y3)
Component c3
(0, 0)
(x2, y2)
(0, 0)
(x1, y1)
Component c2
(0, 0)
c3’s coordinate
system
c2’s coordinate
system
Component c1
c1’s coordinate
system
5
The Graphics class
The Graphics class provides the methods for drawing







Strings
Lines
Rectangles
Ovals
Arcs
Polygons
Polylines
 Think
of a GUI component as a piece of paper and
the Graphics object as a pencil or paintbrush.
You can apply the methods in the Graphics class to draw things on a GUI
component (e.g., a button, a label, a panel)
6
The Graphics Class
You can draw strings,
lines, rectangles, ovals,
arcs, polygons, and
polylines, using the
methods in the Graphics
class.
You can apply the methods
in the Graphics class to
draw things on a GUI
component (e.g., a button,
a label, a panel)
java.awt.Graphics
+setColor(color: Color): void
Sets a new color for subsequent drawings.
+setFont(font: Font): void
Sets a new font for subsequent drwings.
+drawString(s: String, x: int, y: int): void
Draws a string starting at point (x, y).
+drawLine(x1: int, y1: int, x2: int, y2: int): void
Draws a line from (x1, y1) to (x2, y2).
+drawRect(x: int, y: int, w: int, h: int): void
Draws a rectangle with specified upper-left corner point at (x,
y) and width w and height h.
+fillRect(x: int, y: int, w: int, h: int): void
Draws a filled rectangle with specified upper-left corner point
at (x, y) and width w and height h.
+drawRoundRect(x: int, y: int, w: int, h: int, aw: Draws a round-cornered rectangle with specified arc width aw
int, ah: int): void
and arc height ah.
+fillRoundRect(x: int, y: int, w: int, h: int, aw:
Draws a filled round-cornered rectangle with specified arc
int, ah: int): void
width aw and arc height ah.
+draw3DRect(x: int, y: int, w: int, h: int, raised: Draws a 3-D rectangle raised above the surface or sunk into the
boolean): void
surface.
+fill3DRect(x: int, y: int, w: int, h: int, raised:
Draws a filled 3-D rectangle raised above the surface or sunk
boolean): void
into the surface.
+drawOval(x: int, y: int, w: int, h: int): void
Draws an oval bounded by the rectangle specified by the
parameters x, y, w, and h.
+fillOval(x: int, y: int, w: int, h: int): void
Draws a filled oval bounded by the rectangle specified by the
parameters x, y, w, and h.
+drawArc(x: int, y: int, w: int, h: int, startAngle: Draws an arc conceived as part of an oval bounded by the
int, arcAngle: int): void
rectangle specified by the parameters x, y, w, and h.
+fillArc(x: int, y: int, w: int, h: int, startAngle:
Draws a filled arc conceived as part of an oval bounded by the
int, arcAngle: int): void
rectangle specified by the parameters x, y, w, and h.
+drawPolygon(xPoints: int[], yPoints: int[],
Draws a closed polygon defined by arrays of x and y
nPoints: int): void
coordinates. Each pair of (x[i], y[i]) coordinates is a point.
+fillPolygon(xPoints: int[], yPoints: int[],
Draws a filled polygon defined by arrays of x and y
nPoints: int): void
coordinates. Each pair of (x[i], y[i]) coordinates is a point.
+drawPolygon(g: Polygon): void
Draws a closed polygon defined by a Polygon object.
+fillPolygon(g: Polygon): void
Draws a filled polygon defined by a Polygon object.
+drawPolyline(xPoints: int[], yPoints: int[],
nPoints: int): void
Draws a polyline defined by arrays of x and y coordinates.
Each pair of (x[i], y[i]) coordinates is a point.
7
The Graphics class
The Graphics class is an abstract class that provides a deviceindependent graphics interface for displaying figures and images
on the screen on different platforms. Whenever a component
(e.g., a button, a label, a panel) is displayed, the JVM
automatically creates a Graphics object for the
component on the native platform and passes this object
to invoke the paintComponent() method to display the
drawings. The method is defined in JComponent class with
signature as follows:
protected void paintComponent(Graphics g)
This method is invoked whenever a component is first displayed or
redisplayed
8
The Graphics class: practical hints
In order to draw things on a component, you need
to define a class that extends JPanel and overrides
its paintComponent() method (inherited from
JComponent) to specify what to draw.
9
The Graphics class: practical hints
One recommended application skeleton includes:


Import directives
User specified class to extend JFrame
• class myFrame extends JFrame { … }

User specified test class to include main() method
• public class TestGraphics { … }

User specified class to extend JPanel
• class CanvasToDraw extends JPanel { … }
See next slide for details – file GraphicsTest.java
10
The Graphics class: practical hints
import javax.swing.*;
import java.awt.*;
class myFrame extends JFrame {
public myFrame() {
setTitle("SB GraphicsTest1");
add(new CanvasToDraw()); // getContentPane().add(new CanvasToDraw());
}
}
public class GraphicsTest {
public static void main(String[] args) {
myFrame frame = new myFrame();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setSize(200, 200);
frame.setLocationRelativeTo(null); // Center the frame
frame.setVisible(true);
}
}
class CanvasToDraw extends JPanel {
protected void paintComponent(Graphics g) {
super.paintComponent(g);
g.setColor(Color.BLUE);
g.drawLine(0, 0, 200, 200);
g.setColor(Color.RED);
g.drawLine(200, 0, 0, 200);
}
}
11
A Drawing Example, using paintComponent method
Draw two lines
File GraphicsTest.java
12
A Drawing Example, using paint method
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
public class JDemoLine extends JFrame
{
public void paint(Graphics g)
{
super.paint(g);
g.setColor(Color.BLUE); g.drawLine(0, 0, 200, 200);
g.setColor(Color.RED);
g.drawLine(200, 0, 0, 200);
}
public static void main(String[] args)
{
JDemoLine frame = new JDemoLine();
frame.setTitle("SB Demo Line");
frame.setSize(200, 200);
frame.setVisible(true);
}
}
13
A Drawing Example, using paint() method
Draw two lines
File JDemoLine.java
14
paint() Example
 The simplest way to draw:
 Open file ProgGraphics1.java

How to draw into a frame
 Open file ProgGraphics1m.java


A panel into a frame
How to draw into a panel
 Open file ProgGraphics1mm.java


Two panels into a frame
How to draw into a panel
15
paintComponent() Example
In order to draw things on a component, you need to
define a class that extends JPanel and overrides its
paintComponent method to specify what to draw..
Open file ProgGraphics2.java
16
Two Problems With the paint() method

If you resize the frame, the line is gone.
To fix the first problem, you need to know its cause. When you
resize the frame, the JVM invokes the paintComponent method of
a Swing component (e.g., a label) to redisplay the graphics on the
component. Since you did not draw a line in the paintComponent
method, the line is gone when the frame is resized. To
permanently display the line, you need to draw the line in the
paintComponent method.
17
The paintComponent Method
The Graphics object g is created automatically by the JVM for
every visible GUI component. The JVM obtains the Graphics
object and passes it to invoke paintComponent.
The paintComponent method is automatically invoked to paint
graphics whenever the component is first displayed or
redisplayed.
Invoking super.paintComponent(g) invokes the
paintComponent method defined in the superclass. This is
necessary to ensure that the viewing area is cleared before a
new drawing is displayed.
18
paintComponent Example
The JVM invokes paintComponent() to draw
things on a component.
2. The user should never invoke paintComponent()
directly.
3. For this reason, the protected visibility is sufficient
for paintComponent().
1.
19
Drawing on Panels
 Panels are invisible and are used as containers to group
components to achieve a desired layout.
 Another important use of JPanel is for drawing.
 You can draw on any Swing GUI component, but
normally you should use a JPanel as a canvas upon
which to draw things
 See next slide.
20
Drawing on Panels
 What happens if you replace JPanel with JLabel or JButton in
following line

class CanvasToDraw extends JPanel {
 With

class CanvasToDraw extends JLabel {
 Or with

class CanvasToDraw extends JButton {
 The program works, but it is not preferred. JLabel is designed
for creating a label, not for drawing. Same for JButton is
designed for creating a button, not for drawing.
21
Drawing on Panels
 JPanel can be used to draw graphics (including text) and enable
user interaction.
 To draw in a panel, you create a new class that extends
JPanel and override the paintComponent() method to tell
the panel how to draw things. You can then display strings,
draw geometric shapes, and view images on the panel.
 Compile and run TestGraphics.java
22
Drawing Geometric Figures
 Drawing Strings
 Drawing Lines
 Drawing Rectangles
 Drawing Ovals
 Drawing Arcs
 Drawing Polygons
23
Drawing Geometric Figures
 Drawing Strings
 Drawing Lines
 Drawing Rectangles
 Drawing Ovals
 Drawing Arcs
 Drawing Polygons
24
Drawing Strings
(0, 0)
(getWidth(), 0)
(0, 0)
(getWidth(), 0)
(x1, y1)
(x, y)
s is display here
(x2, y2)
(0, getHeight())
(getWidth(), getHeight())
(0, getHeight())
(getWidth(), getHeight())
drawLine(int x1, int y1, int x2, int y2);
drawString(String s, int x, int y);
25
Drawing Rectangles
drawRect(int x, int y, int w, int h);
fillRect(int x, int y, int w, int h);
(x, y)
(x, y)
h
h
w
w
26
Drawing Rounded Rectangles
drawRoundRect(int x, int y, int w, int h, int aw, int ah);
fillRoundRect(int x, int y, int w, int h, int aw, int ah);
(x, y)
ah/2
aw/2
h
w
27
Drawing Ovals
drawOval(int x, int y, int w, int h);
fillOval(int x, int y, int w, int h);
(x, y)
h
w
28
Drawing Arcs
drawArc(int x, int y, int w, int h, int angle1, int angle2);
fillArc(int x, int y, int w, int h, int angle1, int angle2);
Angles are in
degree
29
Drawing Arcs Example
DrawArcs
30
Run
Drawing Polygons and Polylines
int[] x = {40, 70, 60, 45, 20};
int[] y = {20, 40, 80, 45, 60};
g.drawPolygon(x, y, x.length);
g.drawPolyline(x, y, x.length);
(x[0], y[0])
(x[0], y[0])
(x[1], y[1])
(x[1], y[1])
(x[3], y[3])
(x[3], y[3])
(x[4], y[4])
(x[4], y[4])
(x[2], y[2])
(x[2], y[2])
31
Drawing Polygons Using the
Polygon Class
Polygon polygon = new Polygon();
polygon.addPoint(40, 59);
polygon.addPoint(40, 100);
polygon.addPoint(10, 100);
g.drawPolygon(polygon);
32
Drawing Polygons Example
DrawPolygon
33
Run
Demo Programs
Program “Running Fan”
Open, Compile and Run
Folder Exercise16_12_RunningFan
34
Demo Programs
Program “4 Running Fans”
Open, Compile and Run
Folder Exercise18_12_FourRunningFans
35
Demo Programs
Program “MouseInsideTriangle”
Open, Compile and Run
Folder Exercise16_21_MouseInsideTriangle
36
Demo Programs
Program “Message Panel”
Open, Compile and Run
Folder Exercise17_1_MessagePanelA
37
Demo Programs
Program “Message Panel”
Open, Compile and Run
Folder Exercise17_10_MessagePanelB
38
Demo Programs
Program “Random Circles”
Open, Compile and Run
Folder Exercise18_28_RandomCircles
39
Demo Programs
Program “Random Rectangles”
Open, Compile and Run
Folder Exercise18_29_RandomRectangles
40
Demo Programs
Program “Random Triangles”
Open, Compile and Run
Folder Exercise18_30_RandomTriangles
41
Centering Display Using the FontMetrics Class
You can display a string at any location in a panel. Can you display it
centered? To do so, you need to use the FontMetrics class to measure the
exact width and height of the string for a particular font. A FontMetrics
can measure the following attributes:

public int getAscent()

public int getHeight()

public int getDescent()

public int stringWidth(String str)

public int getLeading()
getLeading()
getHeight()
getAscent()
42
getDescent()
The FontMetrics Class
FontMetrics is an abstract class. To get a FontMetrics object
for a specific font, use the following getFontMetrics methods
defined in the Graphics class:
· public FontMetrics getFontMetrics(Font f)
Returns the font metrics of the specified font.
· public FontMetrics getFontMetrics()
Returns the font metrics of the current font.
43
panel
stringWidth
getHeight()
stringAscent
Welcome to Java
getWidth()
TestCenterMessage
Run
44
Displaying Image Icons
You learned how to create image icons and display image icons in labels
and buttons. For example, the following statements create an image icon
and display it in a label:
ImageIcon icon = new ImageIcon("image/us.gif");
JLabel jlblImage = new JLabel(imageIcon);
An image icon displays a fixed-size image. To display an image in a
flexible size, you need to use the java.awt.Image class. An image can be
created from an image icon using the getImage() method as follows:
Image image = imageIcon.getImage();
45
Displaying Images
Using a label as an area for displaying images is simple and convenient,
but you don't have much control over how the image is displayed. A more
flexible way to display images is to use the drawImage method of the
Graphics class on a panel. Four versions of the drawImage method are
shown here.
java.awt.Graphics
+drawImage(image: Image, x: int, y: int,
bgcolor: Color, observer:
ImageObserver): void
Draws the image in a specified location. The image's top-left corner is at
(x, y) in the graphics context's coordinate space. Transparent pixels in
the image are drawn in the specified color bgcolor. The observer is the
object on which the image is displayed. The image is cut off if it is
larger than the area it is being drawn on.
+drawImage(image: Image, x: int, y: int,
observer: ImageObserver): void
Same as the preceding method except that it does not specify a background
color.
+drawImage(image: Image, x: int, y: int,
width: int, height: int, observer:
ImageObserver): void
Draws a scaled version of the image that can fill all of the available space
in the specified rectangle.
+drawImage(image: Image, x: int, y: int, Same as the preceding method except that it provides a solid background
width: int, height: int, bgcolor: Color, color behind the image being drawn.
observer: ImageObserver): void
46
Displaying Images Example
This example gives the code that displays an image from image/us.gif. The
file image/us.gif is under the class directory. The Image from the file is
created in the program. The drawImage method displays the image to fill
in the whole panel, as shown in the figure.
47
Thank You
for
Your attention!
Liang, Introduction to Java
Programming, Eighth Edition, (c) 2011
48