SlideShare a Scribd company logo
Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All
rights reserved.
1
Chapter 13 Graphics
Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All
rights reserved.
2
Motivations
If you want to draw shapes such as a bar chart, a
clock, or a stop sign, how do you do it?
Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All
rights reserved.
3
Objectives
 To describe Java coordinate systems in a GUI component (§13.2).
 To draw things using the methods in the Graphics class (§13.3).
 To override the paintComponent method to draw things on a GUI
component (§13.3).
 To use a panel as a canvas to draw things (§13.3).
 To draw strings, lines, rectangles, ovals, arcs, and polygons
(§§13.4, 13.6-13.7).
 To obtain font properties using FontMetrics and know how to
center a message (§13.8).
 To display an image in a GUI component (§13.11).
 To develop reusable GUI components FigurePanel, MessagePanel,
StillClock, and ImageViewer (§§13.5, 13.9, 13.10, 13.12).
Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All
rights reserved.
4
Java Coordinate System
(0, 0) X Axis
Y Axis
(x, y)
x
y
Java Coordinate
System
X Axis
Conventional
Coordinate
System
(0, 0)
Y Axis
Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All
rights reserved.
5
Each GUI Component Has its
Own Coordinate System
(0, 0) Component c2
Component c1
(0, 0)
(0, 0)
(x1, y1)
(x2, y2)
(x3, y3)
Component c3
c3’s coordinate
system
c2’s coordinate
system
c1’s coordinate
system
Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All
rights reserved.
6
The Graphics Class
You can draw strings,
lines, rectangles, ovals,
arcs, polygons, and
polylines, using the
methods in the Graphics
class.
java.awt.Graphics
+setColor(color: Color): void
+setFont(font: Font): void
+drawString(s: String, x: int, y: int): void
+drawLine(x1: int, y1: int, x2: int, y2: int): void
+drawRect(x: int, y: int, w: int, h: int): void
+fillRect(x: int, y: int, w: int, h: int): void
+drawRoundRect(x: int, y: int, w: int, h: int, aw:
int, ah: int): void
+fillRoundRect(x: int, y: int, w: int, h: int, aw:
int, ah: int): void
+draw3DRect(x: int, y: int, w: int, h: int, raised:
boolean): void
+fill3DRect(x: int, y: int, w: int, h: int, raised:
boolean): void
+drawOval(x: int, y: int, w: int, h: int): void
+fillOval(x: int, y: int, w: int, h: int): void
+drawArc(x: int, y: int, w: int, h: int, startAngle:
int, arcAngle: int): void
+fillArc(x: int, y: int, w: int, h: int, startAngle:
int, arcAngle: int): void
+drawPolygon(xPoints: int[], yPoints: int[],
nPoints: int): void
+fillPolygon(xPoints: int[], yPoints: int[],
nPoints: int): void
+drawPolygon(g: Polygon): void
+fillPolygon(g: Polygon): void
+drawPolyline(xPoints: int[], yPoints: int[],
nPoints: int): void
Sets a new color for subsequent drawings.
Sets a new font for subsequent drwings.
Draws a string starting at point (x, y).
Draws a line from (x1, y1) to (x2, y2).
Draws a rectangle with specified upper-left corner point at (x,
y) and width w and height h.
Draws a filled rectangle with specified upper-left corner point
at (x, y) and width w and height h.
Draws a round-cornered rectangle with specified arc width aw
and arc height ah.
Draws a filled round-cornered rectangle with specified arc
width aw and arc height ah.
Draws a 3-D rectangle raised above the surface or sunk into the
surface.
Draws a filled 3-D rectangle raised above the surface or sunk
into the surface.
Draws an oval bounded by the rectangle specified by the
parameters x, y, w, and h.
Draws a filled oval bounded by the rectangle specified by the
parameters x, y, w, and h.
Draws an arc conceived as part of an oval bounded by the
rectangle specified by the parameters x, y, w, and h.
Draws a filled arc conceived as part of an oval bounded by the
rectangle specified by the parameters x, y, w, and h.
Draws a closed polygon defined by arrays of x and y
coordinates. Each pair of (x[i], y[i]) coordinates is a point.
Draws a filled polygon defined by arrays of x and y
coordinates. Each pair of (x[i], y[i]) coordinates is a point.
Draws a closed polygon defined by a Polygon object.
Draws a filled polygon defined by a Polygon object.
Draws a polyline defined by arrays of x and y coordinates.
Each pair of (x[i], y[i]) coordinates is a point.
Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All
rights reserved.
7
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. The first program in this chapter can be
rewritten using paintComponent.
TestPaintComponent Run
Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All
rights reserved.
8
Drawing Geometric Figures
 Drawing Strings
 Drawing Lines
 Drawing Rectangles
 Drawing Ovals
 Drawing Arcs
 Drawing Polygons
Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All
rights reserved.
9
Drawing Strings
(0, 0) (getWidth(), 0)
(getWidth(), getHeight())
(0, getHeight())
(x, y) s is display here
(0, 0) (getWidth(), 0)
(getWidth(), getHeight())
(0, getHeight())
(x1, y1)
(x2, y2)
drawLine(int x1, int y1, int x2, int y2);
drawString(String s, int x, int y);
Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All
rights reserved.
10
Drawing Rectangles
drawRect(int x, int y, int w, int h);
fillRect(int x, int y, int w, int h);
(x, y)
w
h
(x, y)
w
h
Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All
rights reserved.
11
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)
w
h
ah/2
aw/2
Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All
rights reserved.
12
Drawing Ovals
drawOval(int x, int y, int w, int h);
fillOval(int x, int y, int w, int h);
(x, y)
w
h
Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All
rights reserved.
13
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.
FigurePanel
+LINE = 1
+RECTANGLE = 2
+ROUND_RECTANGLE = 3
+OVAL = 4
-type: int
-filled: boolean
+FigurePanel()
+FigurePanel(type: int)
+FigurePanel(type: int, filled: boolean)
+getType(): int
+setType(type: int): void
+isFilled(): boolean
+setFilled(filled: boolean): void
javax.swing.JPanel
-char token
+getToken
+setToken
+paintComponet
+mouseClicked
LINE, RECTANGLE,
ROUND_RECTANGLE, and OVAL are
constants.
Specifies the figure type (default: 1).
Specifies whether the figure is filled (default: false).
Creates a default figure panel.
Creates a figure panel with the specified type.
Creates a figure panel with the specified type and filled property.
Returns the figure type.
Sets a new figure type.
Checks whether the figure is filled with a color.
Sets a new filled property.
FigurePanel
Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All
rights reserved.
14
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, Ninth Edition, (c) 2013 Pearson Education, Inc. All
rights reserved.
15
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, Ninth Edition, (c) 2013 Pearson Education, Inc. All
rights reserved.
16
Drawing Arcs Example
DrawArcs Run
Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All
rights reserved.
17
Drawing Polygons and Polylines
int[] x = {40, 70, 60, 45, 20};
int[] y = {20, 40, 80, 45, 60};
g.drawPolygon(x, y, x.length);
(x[0], y[0])
(x[1], y[1])
(x[2], y[2])
(x[3], y[3])
(x[4], y[4])
g.drawPolyline(x, y, x.length);
(x[0], y[0])
(x[1], y[1])
(x[2], y[2])
(x[3], y[3])
(x[4], y[4])
Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All
rights reserved.
18
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, Ninth Edition, (c) 2013 Pearson Education, Inc. All
rights reserved.
19
Drawing Polygons Example
DrawPolygon Run
Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All
rights reserved.
20
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 getDescent()
 public int getLeading()
getAscent()
getLeading()
getDescent()
getHeight()
 public int getHeight()
 public int stringWidth(String str)
Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All
rights reserved.
21
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.
Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All
rights reserved.
22
Welcome to Java
stringWidth
stringAscent
getHeight()
getWidth()
panel
TestCenterMessage Run
Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All
rights reserved.
23
Case Study: MessagePanel
MessagePanel
-xCoordinate: int
-yCoordinate: int
-centered: boolean
-message: String
-interval: int
+MessagePanel()
+MessagePanel(message: String)
+moveLeft(): void
+moveRight(): void
+moveUp(): void
+moveDown(): void
javax.swing.JPanel
-char token
+getToken
+setToken
+paintComponet
+mouseClicked
The get and set methods for these data
fields are provided in the class, but
omitted in the UML diagram
The x-Coordinate for the message (default 20).
The y-Coordinate for the message (default 20).
Specifies whether the message is displayed centered.
The message to be displayed.
The interval to move the message in the panel.
Constructs a default message panel.
Constructs a message panel with a specified string.
Moves the message to the left.
Moves the message to the right.
Moves the message up.
Moves the message down.
MessagePanel Run
This case study
develops a useful class
that displays a message
in a panel. The class
enables the user to set
the location of the
message, center the
message, and move the
message with the
specified interval.
TestMessagePanel
Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All
rights reserved.
24
Case Study: StillClock
DisplayClock Run
StillClock
StillClock
-hour: int
-minute: int
-second: int
+StillClock()
+StillClock(hour: int, minute: int,
second: int)
+setCurrentTime(): void
javax.swing.JPanel
-char token
+getToken
+setToken
+paintComponet
+mouseClicked
The get and set methods for these data
fields are provided in the class, but
omitted in the UML diagram
The hour in the clock.
The minute in the clock.
The second in the clock.
Constructs a default clock for the current time.
Constructs a clock with a specified time.
Sets time to current time.
Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All
rights reserved.
25
Drawing Clock
xEnd = xCenter + handLength  sin()
yEnd = yCenter - handLength  cos()
Since there are sixty seconds
in one minute, the angle for
the second hand is
second  (2/60)
Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All
rights reserved.
26
Drawing Clock, cont.
xEnd = xCenter + handLength  sin()
yEnd = yCenter - handLength  cos()
The position of the minute hand is
determined by the minute and
second. The exact minute value
combined with seconds is minute +
second/60. For example, if the time
is 3 minutes and 30 seconds. The
total minutes are 3.5. Since there are
sixty minutes in one hour, the angle
for the minute hand is
(minute + second/60)  (2/60)
Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All
rights reserved.
27
Drawing Clock, cont.
xEnd = xCenter + handLength  sin()
yEnd = yCenter - handLength  cos()
Since one circle is divided into
twelve hours, the angle for the
hour hand is
(hour + minute/60 + second/(60
 60)))  (2/12)
Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All
rights reserved.
28
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();
Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All
rights reserved.
29
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
+drawImage(image: Image, x: int, y: int,
observer: ImageObserver): void
+drawImage(image: Image, x: int, y: int,
width: int, height: int, observer:
ImageObserver): void
+drawImage(image: Image, x: int, y: int,
width: int, height: 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.
Same as the preceding method except that it does not specify a background
color.
Draws a scaled version of the image that can fill all of the available space
in the specified rectangle.
Same as the preceding method except that it provides a solid background
color behind the image being drawn.
Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All
rights reserved.
30
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.
Run
DisplayImage
Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All
rights reserved.
31
Case Study: ImageViewer Class
Displaying an image is a common task in Java programming. This
case study develops a reusable component named ImageViewer that
displays an image in a panel. The ImageViewer class contains the
properties image, imageFilename, stretched, xCoordinate, and
yCoordinate.
ImageViewer
-image: Image
-stretched: boolean
-xCoordinate: int
-yCoordinate: int
+ImageViewer()
+ImageViewer(imageFile: String)
javax.swing.JPanel
Image in the image viewer.
True if the image is stretched in the viewer.
x-coordinate of the upper-left corner of the image in the viewer.
y-coordinate of the upper-left corner of the image in the viewer.
Constructs an image viewer with no image.
Constructs an image viewer with the specified image file.
The get and set methods for these data
fields are provided in the class, but
omitted in the UML diagram for brevity.
Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All
rights reserved.
32
ImageView Example
This example gives an example that creates six images using the
ImageViewer class.
Run
SixFlags

More Related Content

PPT
PPT
PPT
Chapter 3 Arrays in Java
PPT
Chapter 4 - Classes in Java
PPT
Chapter 2 Method in Java OOP
PPT
Java™ (OOP) - Chapter 7: "Multidimensional Arrays"
PPT
Ch2 Liang
PDF
Lec 9 05_sept [compatibility mode]
Chapter 3 Arrays in Java
Chapter 4 - Classes in Java
Chapter 2 Method in Java OOP
Java™ (OOP) - Chapter 7: "Multidimensional Arrays"
Ch2 Liang
Lec 9 05_sept [compatibility mode]

What's hot (20)

PPT
Java cơ bản java co ban
PDF
Informatics Practices (new) solution CBSE 2021, Compartment, improvement ex...
PPTX
Array
PDF
Question Paper Code 065 informatic Practice New CBSE - 2021
PPTX
18. Dictionaries, Hash-Tables and Set
PDF
GATE Computer Science Solved Paper 2004
PDF
Midterm sols
PDF
PPTX
Object Oriented Programming - Value Types & Reference Types
PDF
Designing Architecture-aware Library using Boost.Proto
PPT
Computer Programming- Lecture 8
PDF
ARIC Team Seminar
PDF
Approximation Data Structures for Streaming Applications
PDF
Cvpr2010 open source vision software, intro and training part-iii introduct...
PDF
Introduction to Gura Programming Language
PDF
Category Theory for Mortal Programmers
PDF
Output Units and Cost Function in FNN
PDF
C++ Templates 2
PDF
Gaussian Processes: Applications in Machine Learning
PDF
Generic programming and concepts that should be in C++
Java cơ bản java co ban
Informatics Practices (new) solution CBSE 2021, Compartment, improvement ex...
Array
Question Paper Code 065 informatic Practice New CBSE - 2021
18. Dictionaries, Hash-Tables and Set
GATE Computer Science Solved Paper 2004
Midterm sols
Object Oriented Programming - Value Types & Reference Types
Designing Architecture-aware Library using Boost.Proto
Computer Programming- Lecture 8
ARIC Team Seminar
Approximation Data Structures for Streaming Applications
Cvpr2010 open source vision software, intro and training part-iii introduct...
Introduction to Gura Programming Language
Category Theory for Mortal Programmers
Output Units and Cost Function in FNN
C++ Templates 2
Gaussian Processes: Applications in Machine Learning
Generic programming and concepts that should be in C++
Ad

Viewers also liked (18)

PPT
PPT
PPT
PPT
PPT
PPT
PPT
PPT
JavaYDL5
PPT
JavaYDL18
PPT
bai giang java co ban - java cơ bản - bai 1
PPT
01slide
PPTX
kg0000931 Chapter 1 introduction to computers, programs part ia
PPT
PPT
9781285852744 ppt ch02
PPTX
문과생 대상 파이썬을 활용한 데이터 분석 강의
PDF
Introduction to Java Programming Language
PPT
Exception handling
PPT
String handling session 5
JavaYDL5
JavaYDL18
bai giang java co ban - java cơ bản - bai 1
01slide
kg0000931 Chapter 1 introduction to computers, programs part ia
9781285852744 ppt ch02
문과생 대상 파이썬을 활용한 데이터 분석 강의
Introduction to Java Programming Language
Exception handling
String handling session 5
Ad

Similar to 13slide graphics (20)

PPT
JavaYDL13
PPT
Chapter 4 Mathematical Functions Character and string
PPT
JavaProgramming 17321_CS202-Chapter8.ppt
PDF
Computer Graphics in Java and Scala - Part 1
PPTX
graphics programming in java
PPTX
Basic Graphics in Java
PDF
Computer Graphics in Java and Scala - Part 1b
PPT
C++ Inheritance
PPT
java graphics
PDF
ImplementDijkstra’s algorithm using the graph class you implemente.pdf
PDF
PPT
Displaying information within a window.68
PDF
Language Language Models (in 2023) - OpenAI
PPTX
U5 JAVA.pptx
PDF
CP Handout#9
PDF
Numerical analysis
PPT
Data Structures and Algorithoms 08slide - 2D Arrays.ppt
PDF
Chapter 1: Linear Regression
DOC
Java applet handouts
JavaYDL13
Chapter 4 Mathematical Functions Character and string
JavaProgramming 17321_CS202-Chapter8.ppt
Computer Graphics in Java and Scala - Part 1
graphics programming in java
Basic Graphics in Java
Computer Graphics in Java and Scala - Part 1b
C++ Inheritance
java graphics
ImplementDijkstra’s algorithm using the graph class you implemente.pdf
Displaying information within a window.68
Language Language Models (in 2023) - OpenAI
U5 JAVA.pptx
CP Handout#9
Numerical analysis
Data Structures and Algorithoms 08slide - 2D Arrays.ppt
Chapter 1: Linear Regression
Java applet handouts

Recently uploaded (20)

PDF
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
PDF
August Patch Tuesday
PDF
Mushroom cultivation and it's methods.pdf
PDF
Video forgery: An extensive analysis of inter-and intra-frame manipulation al...
PDF
NewMind AI Weekly Chronicles - August'25-Week II
PDF
A comparative study of natural language inference in Swahili using monolingua...
PPTX
1. Introduction to Computer Programming.pptx
PDF
Univ-Connecticut-ChatGPT-Presentaion.pdf
PDF
Diabetes mellitus diagnosis method based random forest with bat algorithm
PDF
Agricultural_Statistics_at_a_Glance_2022_0.pdf
PDF
gpt5_lecture_notes_comprehensive_20250812015547.pdf
PPTX
Group 1 Presentation -Planning and Decision Making .pptx
PDF
Reach Out and Touch Someone: Haptics and Empathic Computing
PDF
Advanced methodologies resolving dimensionality complications for autism neur...
PPTX
TLE Review Electricity (Electricity).pptx
PDF
Per capita expenditure prediction using model stacking based on satellite ima...
PDF
Machine learning based COVID-19 study performance prediction
PPTX
A Presentation on Artificial Intelligence
PDF
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
PDF
Build a system with the filesystem maintained by OSTree @ COSCUP 2025
TokAI - TikTok AI Agent : The First AI Application That Analyzes 10,000+ Vira...
August Patch Tuesday
Mushroom cultivation and it's methods.pdf
Video forgery: An extensive analysis of inter-and intra-frame manipulation al...
NewMind AI Weekly Chronicles - August'25-Week II
A comparative study of natural language inference in Swahili using monolingua...
1. Introduction to Computer Programming.pptx
Univ-Connecticut-ChatGPT-Presentaion.pdf
Diabetes mellitus diagnosis method based random forest with bat algorithm
Agricultural_Statistics_at_a_Glance_2022_0.pdf
gpt5_lecture_notes_comprehensive_20250812015547.pdf
Group 1 Presentation -Planning and Decision Making .pptx
Reach Out and Touch Someone: Haptics and Empathic Computing
Advanced methodologies resolving dimensionality complications for autism neur...
TLE Review Electricity (Electricity).pptx
Per capita expenditure prediction using model stacking based on satellite ima...
Machine learning based COVID-19 study performance prediction
A Presentation on Artificial Intelligence
Architecting across the Boundaries of two Complex Domains - Healthcare & Tech...
Build a system with the filesystem maintained by OSTree @ COSCUP 2025

13slide graphics

  • 1. Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 1 Chapter 13 Graphics
  • 2. Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 2 Motivations If you want to draw shapes such as a bar chart, a clock, or a stop sign, how do you do it?
  • 3. Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 3 Objectives  To describe Java coordinate systems in a GUI component (§13.2).  To draw things using the methods in the Graphics class (§13.3).  To override the paintComponent method to draw things on a GUI component (§13.3).  To use a panel as a canvas to draw things (§13.3).  To draw strings, lines, rectangles, ovals, arcs, and polygons (§§13.4, 13.6-13.7).  To obtain font properties using FontMetrics and know how to center a message (§13.8).  To display an image in a GUI component (§13.11).  To develop reusable GUI components FigurePanel, MessagePanel, StillClock, and ImageViewer (§§13.5, 13.9, 13.10, 13.12).
  • 4. Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 4 Java Coordinate System (0, 0) X Axis Y Axis (x, y) x y Java Coordinate System X Axis Conventional Coordinate System (0, 0) Y Axis
  • 5. Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 5 Each GUI Component Has its Own Coordinate System (0, 0) Component c2 Component c1 (0, 0) (0, 0) (x1, y1) (x2, y2) (x3, y3) Component c3 c3’s coordinate system c2’s coordinate system c1’s coordinate system
  • 6. Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 6 The Graphics Class You can draw strings, lines, rectangles, ovals, arcs, polygons, and polylines, using the methods in the Graphics class. java.awt.Graphics +setColor(color: Color): void +setFont(font: Font): void +drawString(s: String, x: int, y: int): void +drawLine(x1: int, y1: int, x2: int, y2: int): void +drawRect(x: int, y: int, w: int, h: int): void +fillRect(x: int, y: int, w: int, h: int): void +drawRoundRect(x: int, y: int, w: int, h: int, aw: int, ah: int): void +fillRoundRect(x: int, y: int, w: int, h: int, aw: int, ah: int): void +draw3DRect(x: int, y: int, w: int, h: int, raised: boolean): void +fill3DRect(x: int, y: int, w: int, h: int, raised: boolean): void +drawOval(x: int, y: int, w: int, h: int): void +fillOval(x: int, y: int, w: int, h: int): void +drawArc(x: int, y: int, w: int, h: int, startAngle: int, arcAngle: int): void +fillArc(x: int, y: int, w: int, h: int, startAngle: int, arcAngle: int): void +drawPolygon(xPoints: int[], yPoints: int[], nPoints: int): void +fillPolygon(xPoints: int[], yPoints: int[], nPoints: int): void +drawPolygon(g: Polygon): void +fillPolygon(g: Polygon): void +drawPolyline(xPoints: int[], yPoints: int[], nPoints: int): void Sets a new color for subsequent drawings. Sets a new font for subsequent drwings. Draws a string starting at point (x, y). Draws a line from (x1, y1) to (x2, y2). Draws a rectangle with specified upper-left corner point at (x, y) and width w and height h. Draws a filled rectangle with specified upper-left corner point at (x, y) and width w and height h. Draws a round-cornered rectangle with specified arc width aw and arc height ah. Draws a filled round-cornered rectangle with specified arc width aw and arc height ah. Draws a 3-D rectangle raised above the surface or sunk into the surface. Draws a filled 3-D rectangle raised above the surface or sunk into the surface. Draws an oval bounded by the rectangle specified by the parameters x, y, w, and h. Draws a filled oval bounded by the rectangle specified by the parameters x, y, w, and h. Draws an arc conceived as part of an oval bounded by the rectangle specified by the parameters x, y, w, and h. Draws a filled arc conceived as part of an oval bounded by the rectangle specified by the parameters x, y, w, and h. Draws a closed polygon defined by arrays of x and y coordinates. Each pair of (x[i], y[i]) coordinates is a point. Draws a filled polygon defined by arrays of x and y coordinates. Each pair of (x[i], y[i]) coordinates is a point. Draws a closed polygon defined by a Polygon object. Draws a filled polygon defined by a Polygon object. Draws a polyline defined by arrays of x and y coordinates. Each pair of (x[i], y[i]) coordinates is a point.
  • 7. Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 7 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. The first program in this chapter can be rewritten using paintComponent. TestPaintComponent Run
  • 8. Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 8 Drawing Geometric Figures  Drawing Strings  Drawing Lines  Drawing Rectangles  Drawing Ovals  Drawing Arcs  Drawing Polygons
  • 9. Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 9 Drawing Strings (0, 0) (getWidth(), 0) (getWidth(), getHeight()) (0, getHeight()) (x, y) s is display here (0, 0) (getWidth(), 0) (getWidth(), getHeight()) (0, getHeight()) (x1, y1) (x2, y2) drawLine(int x1, int y1, int x2, int y2); drawString(String s, int x, int y);
  • 10. Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 10 Drawing Rectangles drawRect(int x, int y, int w, int h); fillRect(int x, int y, int w, int h); (x, y) w h (x, y) w h
  • 11. Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 11 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) w h ah/2 aw/2
  • 12. Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 12 Drawing Ovals drawOval(int x, int y, int w, int h); fillOval(int x, int y, int w, int h); (x, y) w h
  • 13. Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 13 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. FigurePanel +LINE = 1 +RECTANGLE = 2 +ROUND_RECTANGLE = 3 +OVAL = 4 -type: int -filled: boolean +FigurePanel() +FigurePanel(type: int) +FigurePanel(type: int, filled: boolean) +getType(): int +setType(type: int): void +isFilled(): boolean +setFilled(filled: boolean): void javax.swing.JPanel -char token +getToken +setToken +paintComponet +mouseClicked LINE, RECTANGLE, ROUND_RECTANGLE, and OVAL are constants. Specifies the figure type (default: 1). Specifies whether the figure is filled (default: false). Creates a default figure panel. Creates a figure panel with the specified type. Creates a figure panel with the specified type and filled property. Returns the figure type. Sets a new figure type. Checks whether the figure is filled with a color. Sets a new filled property. FigurePanel
  • 14. Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 14 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
  • 15. Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 15 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
  • 16. Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 16 Drawing Arcs Example DrawArcs Run
  • 17. Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 17 Drawing Polygons and Polylines int[] x = {40, 70, 60, 45, 20}; int[] y = {20, 40, 80, 45, 60}; g.drawPolygon(x, y, x.length); (x[0], y[0]) (x[1], y[1]) (x[2], y[2]) (x[3], y[3]) (x[4], y[4]) g.drawPolyline(x, y, x.length); (x[0], y[0]) (x[1], y[1]) (x[2], y[2]) (x[3], y[3]) (x[4], y[4])
  • 18. Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 18 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);
  • 19. Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 19 Drawing Polygons Example DrawPolygon Run
  • 20. Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 20 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 getDescent()  public int getLeading() getAscent() getLeading() getDescent() getHeight()  public int getHeight()  public int stringWidth(String str)
  • 21. Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 21 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.
  • 22. Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 22 Welcome to Java stringWidth stringAscent getHeight() getWidth() panel TestCenterMessage Run
  • 23. Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 23 Case Study: MessagePanel MessagePanel -xCoordinate: int -yCoordinate: int -centered: boolean -message: String -interval: int +MessagePanel() +MessagePanel(message: String) +moveLeft(): void +moveRight(): void +moveUp(): void +moveDown(): void javax.swing.JPanel -char token +getToken +setToken +paintComponet +mouseClicked The get and set methods for these data fields are provided in the class, but omitted in the UML diagram The x-Coordinate for the message (default 20). The y-Coordinate for the message (default 20). Specifies whether the message is displayed centered. The message to be displayed. The interval to move the message in the panel. Constructs a default message panel. Constructs a message panel with a specified string. Moves the message to the left. Moves the message to the right. Moves the message up. Moves the message down. MessagePanel Run This case study develops a useful class that displays a message in a panel. The class enables the user to set the location of the message, center the message, and move the message with the specified interval. TestMessagePanel
  • 24. Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 24 Case Study: StillClock DisplayClock Run StillClock StillClock -hour: int -minute: int -second: int +StillClock() +StillClock(hour: int, minute: int, second: int) +setCurrentTime(): void javax.swing.JPanel -char token +getToken +setToken +paintComponet +mouseClicked The get and set methods for these data fields are provided in the class, but omitted in the UML diagram The hour in the clock. The minute in the clock. The second in the clock. Constructs a default clock for the current time. Constructs a clock with a specified time. Sets time to current time.
  • 25. Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 25 Drawing Clock xEnd = xCenter + handLength  sin() yEnd = yCenter - handLength  cos() Since there are sixty seconds in one minute, the angle for the second hand is second  (2/60)
  • 26. Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 26 Drawing Clock, cont. xEnd = xCenter + handLength  sin() yEnd = yCenter - handLength  cos() The position of the minute hand is determined by the minute and second. The exact minute value combined with seconds is minute + second/60. For example, if the time is 3 minutes and 30 seconds. The total minutes are 3.5. Since there are sixty minutes in one hour, the angle for the minute hand is (minute + second/60)  (2/60)
  • 27. Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 27 Drawing Clock, cont. xEnd = xCenter + handLength  sin() yEnd = yCenter - handLength  cos() Since one circle is divided into twelve hours, the angle for the hour hand is (hour + minute/60 + second/(60  60)))  (2/12)
  • 28. Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 28 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();
  • 29. Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 29 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 +drawImage(image: Image, x: int, y: int, observer: ImageObserver): void +drawImage(image: Image, x: int, y: int, width: int, height: int, observer: ImageObserver): void +drawImage(image: Image, x: int, y: int, width: int, height: 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. Same as the preceding method except that it does not specify a background color. Draws a scaled version of the image that can fill all of the available space in the specified rectangle. Same as the preceding method except that it provides a solid background color behind the image being drawn.
  • 30. Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 30 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. Run DisplayImage
  • 31. Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 31 Case Study: ImageViewer Class Displaying an image is a common task in Java programming. This case study develops a reusable component named ImageViewer that displays an image in a panel. The ImageViewer class contains the properties image, imageFilename, stretched, xCoordinate, and yCoordinate. ImageViewer -image: Image -stretched: boolean -xCoordinate: int -yCoordinate: int +ImageViewer() +ImageViewer(imageFile: String) javax.swing.JPanel Image in the image viewer. True if the image is stretched in the viewer. x-coordinate of the upper-left corner of the image in the viewer. y-coordinate of the upper-left corner of the image in the viewer. Constructs an image viewer with no image. Constructs an image viewer with the specified image file. The get and set methods for these data fields are provided in the class, but omitted in the UML diagram for brevity.
  • 32. Liang, Introduction to Java Programming, Ninth Edition, (c) 2013 Pearson Education, Inc. All rights reserved. 32 ImageView Example This example gives an example that creates six images using the ImageViewer class. Run SixFlags