Download Chapter 10 Getting Started with Graphics Programming

Chapter 13 Graphics
Chapter 12 GUI Basics
§10.2, “Abstract Classes,” in Chapter 10
Chapter 13 Graphics
Chapter 14 Event-Driven Programming
§10.4, “Interfaces,” in Chapter 10
Chapter 15 Creating User Interfaces
Chapter 16 Applets and Multimedia
1
Objectives
To understand Java coordinate systems (§13.2).
To draw things using the methods in the Graphics class
(§13.3).
To obtain a graphics context using the getGraphics() method
(§13.3).
To override the paintComponent method to draw things on a
graphical context (§13.4).
To use a panel as a canvas to draw things (§13.5).
To draw strings, lines, rectangles, ovals, arcs, and polygons
(§§13.6, 13.8-13.9).
To obtain font properties using FontMetrics and know how
to center a message (§13.10).
To display image in a GUI component (§13.13).
To develop reusable GUI components FigurePanel,
MessagePanel, StillClock, and ImageViewer (§§13.7, 13.11,
13.12, 13.14).
2
Java Coordinate System
x
(0, 0)
Y Axis
X Axis
y
(x, y)
(0, 0)
Java Coordinate
System
Y Axis
Conventional
Coordinate
System
X Axis
3
Each GUI Component Has its
Own Coordinate System
(c3.getX(),
c3.getY())
c3.getX()
(x, y)
(c2.getX(),
c2.getY())
c3’s coordinate
system
Component c3
(0, 0)
(x, y)
(0, 0)
(x, y)
Component c2
(0, 0)
c2’s coordinate
system
Component c1
(c1.getX(),
c1.getY())
c1’s coordinate
system
ตัวอย่าง
c3 : JFrame
c2 : JPanel
c1 : JButton
c2.add(c1);
c3.add(c2);
4
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
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.
5
Obtaining Graphics Object
The Graphics class is an abstract class that 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, a Graphics object is created for the component on
the native platform.
•This object can be obtained using the getGraphics()
method.
–For example, the graphics context for a label
object jlblBanner can be obtained using
–Graphics graphics = jlblBanner.getGraphics();
•You can then apply the methods in the Graphics class to
draw things on the label’s graphics context.
6
(0, 0)
A Drawing Example
(50, 50)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import javax.swing.*;
import java.awt.Graphics;
public class TestGetGraphics extends JFrame {
private JLabel jlblBanner = new JLabel("Banner");
public TestGetGraphics() {
add(jlblBanner);
System.out.println(jlblBanner.getGraphics());//null
}
public static void main(String[] args) {
TestGetGraphics frame = new TestGetGraphics();
frame.setTitle("TestGetGraphics");
frame.setLocationRelativeTo(null); // Center the frame
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setSize(200, 100);
frame.setVisible(true);
JOptionPane.showMessageDialog(null,
"Delay on purpose\nClick OK to dismiss the dialog");
Graphics graphics = frame.jlblBanner.getGraphics();
graphics.drawLine(0, 0, 50, 50);
}}
}
7
Two Problems With the Preceding
Example
If you resize the frame, the line is gone.
It is awkward to program because you have to make
sure that the component to be displayed before
obtaining its graphics context using the getGraphics()
method.
For this reason, Lines 19 and 20 are placed after the frame is
displayed in Line 16. [frame.setVisible(true)]
To fix the 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.
8
The paintComponent Method
The paintComponent method is defined in JComponent,
and its header is as follows:
protected void paintComponent(Graphics g)
This method, defined in the JComponent class, is invoked
whenever
the component is first displayed or resized or minimized,
maximized
covered and uncovered by another application or
redisplayed using public void repaint() from Component class
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.
9
paintComponent Example
In order to draw things on a component (e.g., a
JLabel),
you need to declare a class that extends a Swing GUI
component class and
overrides its paintComponent method to specify what
to draw.
The first program in this chapter can be
rewritten using paintComponent.
10
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
TestPaintComponent
import javax.swing.*;
import java.awt.Graphics;
public class TestPaintComponent extends JFrame {
public TestPaintComponent() {
add(new NewLabel("Banner"));
}
public static void main(String[] args) {
TestPaintComponent frame = new TestPaintComponent();
frame.setTitle("TestPaintComponent");
frame.setLocationRelativeTo(null); // Center the frame
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setSize(200, 100);
frame.setVisible(true);
}
}
class NewLabel extends JLabel {
public NewLabel(String text) {
super(text);
}
protected void paintComponent(Graphics g) {
super.paintComponent(g);
g.drawLine(0, 0, 50, 50);
}
}
22
Without line 22
super.paintComponent(g);// displays the text in the label
11
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.
12
TestPanelDrawing
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import javax.swing.*;
import java.awt.Graphics;
public class TestPanelDrawing extends JFrame {
public TestPanelDrawing() {
add(new NewPanel());
}
public static void main(String[] args) {
TestPanelDrawing frame = new TestPanelDrawing();
frame.setTitle("TestPanelDrawing");
frame.setLocationRelativeTo(null); // Center the frame
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setSize(200, 100);
frame.setVisible(true);
}
}
class NewPanel extends JPanel {
protected void paintComponent(Graphics g) {
super.paintComponent(g);
g.drawLine(0, 0, 50, 50);
g.drawString("Banner", 0, 40);
}
}
13
invoking super.paintComponent(g) is necessary to ensure that the viewing area is cleared before a new drawing displayed
Drawing Geometric Figures
Drawing Strings
Drawing Lines
Drawing Rectangles
Drawing Ovals
Drawing Arcs
Drawing Polygons
14
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);
15
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
g.setColor(new Color(255,43,255));
16
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
17
Drawing Ovals
drawOval(int x, int y, int w, int h);
fillOval(int x, int y, int w, int h);
(x, y)
h
w
18
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
FigurePanel
+LINE = 1
+RECTANGLE = 2
LINE, RECTANGLE,
ROUND_RECTANGLE, and OVAL are
constants.
+ROUND_RECTANGLE = 3
+OVAL = 4
FigurePanel.java
TestFigurePanel.java
-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.
19
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
-positive or
negative
DrawArcs.java
20
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[1], y[1])
(x[3], y[3])
(x[0], y[0])
(x[1], y[1])
(x[4], y[4])
(x[3], y[3])
(x[2], y[2])
(x[4], y[4])
(x[2], y[2])
21
Drawing Polygons Using the
Polygon Class
Polygon polygon = new Polygon();
polygon.addPoint(40, 20);
polygon.addPoint(70, 40);
polygon.addPoint(60, 80);
polygon.addPoint(45, 45);
polygon.addPoint(20, 60);
g.drawPolygon(polygon);
DrawPolygon.java
22
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()
public int getHeight()
public int stringWidth(String str)
getLeading()
getHeight()
getAscent()
getDescent()
23
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.
panel
stringWidth
getHeight()
stringAscent
Welcome to Java
getWidth()
class CenterMessage extends JPanel {
/** Paint the message */
protected void paintComponent(Graphics g) {
super.paintComponent(g);
g.setFont(new Font("TimesRoman", Font.BOLD, 30));
// Get font metrics for the current font
FontMetrics fm = g.getFontMetrics();
// Find the center location to display
int stringWidth = fm.stringWidth("Welcome to Java");
int stringAscent = fm.getAscent();
...
}
}
TestCenterMessage.java
24
Case Study: MessagePanel
The get and set methods for these data
fields are provided in the class, but
omitted in the UML diagram
javax.swing.JPanel
MessagePanel
-xCoordinate: int
The x-Coordinate for the message (default 20).
-yCoordinate: int
The y-Coordinate for the message (default 20).
-centered: boolean
Specifies whether the message is displayed centered.
-message: String
The message to be displayed.
-interval: int
The interval to move the message in the panel.
+MessagePanel()
Constructs a default message panel.
+MessagePanel(message: String)
Constructs a message panel with a specified string.
+moveLeft(): void
Moves the message to the left.
+moveRight(): void
Moves the message to the right.
+moveUp(): void
Moves the message up.
+moveDown(): void
Moves the message down.
MessagePanel.java
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.java
25
Case Study: StillClock
The get and set methods for these data
fields are provided in the class, but
omitted in the UML diagram
javax.swing.JPanel
StillClock
-hour: int
The hour in the clock.
-minute: int
The minute in the clock.
-second: int
The second in the clock.
+StillClock()
Constructs a default clock for the current time.
+StillClock(hour: int, minute: int, Constructs a clock with a specified time.
second: int)
Sets time to current time.
+setCurrentTime(): void
StillClock.java
DisplayClock.java
26
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 imageIcon = 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();
27
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
DisplayImage.java
28
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.
javax.swing.JPanel
The get and set methods for these data
fields are provided in the class, but
omitted in the UML diagram for brevity.
ImageViewer
SixFlags.java
-image: Image
Image in the image viewer.
-stretched: boolean
True if the image is stretched in the viewer.
-xCoordinate: int
x-coordinate of the upper-left corner of the image in the viewer.
-yCoordinate: int
y-coordinate of the upper-left corner of the image in the viewer.
+ImageViewer()
Constructs an image viewer with no image.
+ImageViewer(imageFile: String)
Constructs an image viewer with the specified image file.
29