Graphics

1
 Java Coordinate System
x
Y Axis
(0, 0) X Axis

y
(x, y)
(0, 0) X Axis
Java Coordinate Conventional
System Coordinate
System
Y Axis

2
 Each GUI Component Has its Own Coordinate System

(c3.getX(), (x, y) c3’s coordinate

(0, 0) Component c3
c3.getY()) system
c3.getX()

(c2.getX(), (x, y)
(0, 0) Component c2 c2’s coordinate
c2.getY())
system
(x, y)
(0, 0) Component c1
(c1.getX(), c1’s coordinate
c1.getY()) system

3
 The Graphics Class
You can draw strings, java.awt.Graphics

lines, rectangles,
+setColor(color: Color): void Sets a new color for subsequent drawings.
+setFont(font: Font): void Sets a new font for subsequent drwings.

ovals, arcs, polygons, +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).

and polylines, using +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.

the methods in the +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.

Graphics class.
+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.
nPoints: int): void Each pair of (x[i], y[i]) coordinates is a point.
4
 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.

5
 A Drawing Example
(0, 0)

(50, 50)

Draw a line and a text

TestGetGraphics

6
 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 redisplayed.

7
 Drawing Geometric Figures
 Drawing Strings
 Drawing Lines
 Drawing Rectangles
 Drawing Ovals
 Drawing Arcs
 Drawing Polygons

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

drawString(String s, int x, int y); drawLine(int x1, int y1, int x2, int y2);

9
 Drawing Rectangles

drawRect(int x, int y, int w, int h);

fillRect(int x, int y, int w, int h);

10
 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);

11
 Drawing Ovals
drawOval(int x, int y, int w, int h);
fillOval(int x, int y, int w, int h);

12
 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, RECTANGLE,
+LINE = 1
+mouseClicked ROUND_RECTANGLE, and OVAL are
+RECTANGLE = 2 constants.
+ROUND_RECTANGLE = 3
+OVAL = 4
-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.
FigurePanel +isFilled(): boolean Checks whether the figure is filled with a color.
+setFilled(filled: boolean): void Sets a new filled property.

13
 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

14
 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

15
Drawing Arcs Example

DrawArcs
16
 Drawing Polygons and Polylines

int[] x = {40, 70, 60, 45, 20};

int[] y = {20, 40, 80, 45, 60}; g.drawPolyline(x, y, x.length);
g.drawPolygon(x, y,
x.length);

17
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);

18
Drawing Polygons Example

DrawPolygon

19
 Case Study: StillClock

javax.swing.JPanel The get and set methods for these data

fields are provided in the class, but
-char token omitted in the UML diagram

+getToken StillClock
+setToken
+paintComponet
-hour: int
+mouseClicked 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)
+setCurrentTime(): void Sets time to current time.

StillClock DisplayClock

20
 Drawing Clock

xEnd = xCenter + handLength  sin() Since there are sixty seconds

in one minute, the angle for
yEnd = yCenter - handLength  cos() the second hand is

second  (2/60)

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

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

23