Download COS240Lec19_JavaGraphics

COS240 O-O Languages
AUBG, COS dept
Lecture 19
Title:
Graphics with Java
Reference: COS240 Syllabus
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All
rights reserved. 0136012671
1
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?
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All
rights reserved. 0136012671
2
Lecture contents









To understand Java coordinate systems.
To draw things using the methods in the Graphics class .
To understand how and 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, and polygons .
To obtain font properties using FontMetrics and know how to
center a message.
To display image in a GUI component.
To develop reusable GUI components FigurePanel, MessagePanel,
StillClock, and ImageViewer.
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All
rights reserved. 0136012671
3
Java Coordinate System
To draw or to paint, you need to specify where to draw or
to paint.
x
(0, 0)
Y Axis
X Axis
y
(x, y)
(0, 0)
Java Coordinate
System
Y Axis
Conventional
Coordinate
System
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All
rights reserved. 0136012671
X Axis
4
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
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All
rights reserved. 0136012671
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)
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All
rights reserved. 0136012671
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[],
Draws a polyline defined by arrays of x and y coordinates.
Liang, Introduction to Java Programming,
Seventh
Education, Inc. All
nPoints: int):
void Edition, (c) 2009 PearsonEach
pair of (x[i], y[i]) coordinates is a point.7
rights reserved. 0136012671
The Graphics class
The Graphics class provides a device-independent
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
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All
rights reserved. 0136012671
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.
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All
rights reserved. 0136012671
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
See
CanvasToDraw extends JPanel { … }
next slide for details – file GraphicsTest.java
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All
rights reserved. 0136012671
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);
}
}
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All
rights reserved. 0136012671
11
A Drawing Example, using paintComponent method
Draw two lines
File GraphicsTest.java
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All
rights reserved. 0136012671
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);
}
}
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All
rights reserved. 0136012671
13
A Drawing Example, using paint method
Draw two lines
File JDemoLine.java
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All
rights reserved. 0136012671
14
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.
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All
rights reserved. 0136012671
15
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.
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All
rights reserved. 0136012671
16
paintComponent Example
1.
2.
3.
The JVM invokes paintComponent() to draw
things on a component.
The user should never invoke
paintComponent() directly.
For this reason, the protected visibility is
sufficient for paintComponent().
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All
rights reserved. 0136012671
17
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.
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All
rights reserved. 0136012671
18
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.
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All
rights reserved. 0136012671
19
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 GraphicsTest.java
Compile and run GraphicsTest1.java
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All
rights reserved. 0136012671
20
Drawing Geometric Figures

Drawing Strings

Drawing Lines

Drawing Rectangles

Drawing Ovals

Drawing Arcs

Drawing Polygons
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All
rights reserved. 0136012671
21
Drawing Strings
(0, 0)
(getWidth(), 0)
(getWidth(), 0)
(0, 0)
(x1, y1)
(x, y)
s is display here
(x2, y2)
(0, getHeight())
(getWidth(), getHeight())
drawString(String s, int x, int y);
(0, getHeight())
(getWidth(), getHeight())
drawLine(int x1, int y1, int x2, int y2);
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All
rights reserved. 0136012671
22
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
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All
rights reserved. 0136012671
23
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
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All
rights reserved. 0136012671
24
Drawing Ovals
drawOval(int x, int y, int w, int h);
fillOval(int x, int y, int w, int h);
(x, y)
h
w
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All
rights reserved. 0136012671
25
Case Study: The FigurePanel Class
This example develops a useful class for displaying various
figures. The class enables the user to set the figure type and
specify whether the figure is filled, and displays the figure on a
panel.
javax.swing.JPanel
-char token
+getToken
FigurePanel
+setToken
+paintComponet
+LINE = 1
+mouseClicked
+RECTANGLE = 2
LINE, RECTANGLE,
ROUND_RECTANGLE, and OVAL are
constants.
+ROUND_RECTANGLE = 3
+OVAL = 4
FigurePanel
-type: int
Specifies the figure type (default: 1).
-filled: boolean
Specifies whether the figure is filled (default: false).
+FigurePanel()
Creates a default figure panel.
+FigurePanel(type: int)
Creates a figure panel with the specified type.
+FigurePanel(type: int, filled: boolean)
Creates a figure panel with the specified type and filled property.
+getType(): int
Returns the figure type.
+setType(type: int): void
Sets a new figure type.
+isFilled(): boolean
Checks whether the figure is filled with a color.
+setFilled(filled: boolean): void
Sets a new filled property.
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All
rights reserved. 0136012671
26
Test FigurePanel
This example develops a useful class for displaying various
figures. The class enables the user to set the figure type and
specify whether the figure is filled, and displays the figure on a
panel.
TestFigurePanel
Run
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All
rights reserved. 0136012671
27
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
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All
rights reserved. 0136012671
28
Drawing Arcs Example
DrawArcs
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All
rights reserved. 0136012671
Run
29
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])
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All
rights reserved. 0136012671
30
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);
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All
rights reserved. 0136012671
31
Drawing Polygons Example
DrawPolygon
Run
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All
rights reserved. 0136012671
32
Demo Programs
Program “Running Fan”
Open, Compile and Run
Folder Exercise16_12_RunningFan
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All
rights reserved. 0136012671
33
Demo Programs
Program “4 Running Fans”
Open, Compile and Run
Folder Exercise18_12_FourRunningFans
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All
rights reserved. 0136012671
34
Demo Programs
Program “MouseInsideTriangle”
Open, Compile and Run
Folder Exercise16_21_MouseInsideTriangle
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All
rights reserved. 0136012671
35
Demo Programs
Program “Message Panel”
Open, Compile and Run
Folder Exercise17_1_MessagePanelA
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All
rights reserved. 0136012671
36
Demo Programs
Program “Message Panel”
Open, Compile and Run
Folder Exercise17_10_MessagePanelB
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All
rights reserved. 0136012671
37
Demo Programs
Program “Random Circles”
Open, Compile and Run
Folder Exercise18_28_RandomCircles
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All
rights reserved. 0136012671
38
Demo Programs
Program “Random Rectangles”
Open, Compile and Run
Folder Exercise18_29_RandomRectangles
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All
rights reserved. 0136012671
39
Demo Programs
Program “Random Triangles”
Open, Compile and Run
Folder Exercise18_30_RandomTriangles
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All
rights reserved. 0136012671
40
Thank You
for
Your attention!
Liang, Introduction to Java Programming, Seventh Edition, (c) 2009 Pearson Education, Inc. All rights reserved. 0136012671
41