Graphics Chapter 6

(1)

Chapter 6

Graphics

(2)

6.1 Creating a Drawing

• Java’s Abstract Window Toolkit (AWT) provides classes and other tools that are used to build

programs that have a graphical user interface.

• The Graphics class, which belongs to the

java.awt package, makes it possible to create line drawings on the screen.

• This class provides methods for drawing lines, rectangles, ovals, arcs, polygons, and polylines.

• There’s also a method for displaying text.

(3)

Graphics Contexts

• An instance of the Graphics class is a

rectangular area, called a graphics context, that's capable of storing an image.

• A graphics context consists of many tiny pixels

(picture elements), each capable of displaying a

single speck of color.

(4)

Graphics Contexts

• An image consisting of black and white pixels:

(5)

Graphics Contexts

• The pixels in a graphics context are arranged in rows and columns.

• Each pixel can be identified by a pair of

coordinates, with the x coordinate coming first.

• The pixel at the upper left corner is located at position (0, 0).

• A graphics context typically contains an image that’s being displayed on the user’s screen.

• A graphics context can also be printed or used to

store an image that's not visible on the screen.

(6)

A Sample Graphics Context

(7)

Using Graphics Methods

• If g is a graphics context, the pixels in g can be changed by calling one of the drawing methods in the Graphics class.

• The drawLine method draws a line from one point to another:

g.drawLine(x1, y1, x2, y2);

(x1, y1) is one of the line’s endpoints; (x2, y2) is

the other.

(8)

The DrawableFrame Class

• The DrawableFrame class makes it easy to experiment with the Graphics class.

• DrawableFrame belongs to the jpb package, which is not a part of the standard Java API.

• A DrawableFrame object is a window in which images can easily be drawn.

• When a DrawableFrame object is created, a title for the frame must be specified:

DrawableFrame df = new DrawableFrame(title);

(9)

The DrawableFrame Class

• Creating a DrawableFrame object doesn’t cause it to be displayed on the screen.

• The show method is used to make a frame visible:

df.show();

• The next step is to call setSize to specify the size of the frame’s graphics context:

df.setSize(width, height);

• The values in the call of setSize don’t

determine the size of the frame itself, but rather

the drawable area inside the frame.

(10)

The DrawableFrame Class

• The appearance of a drawable frame in Windows:

(11)

The DrawableFrame Class

• Before doing any drawing within a frame, it’s necessary to call getGraphicsContext:

Graphics g = df.getGraphicsContext();

getGraphicsContext returns the frame’s graphics context.

• After the pixels in g have been changed, the

repaint method should be called to make sure that the changes appear on the screen:

df.repaint();

(12)

Program: Drawing a Line

• The DrawLine program illustrates how to create a DrawableFrame object and draw a line within it.

• The line will go from (50, 50) to (100, 100).

(13)

The DrawLine Frame

(14)

// Draws a line inside a frame import java.awt.*;

import jpb.*;

public class DrawLine {

public static void main(String[] args) { // Create drawable frame

DrawableFrame df = new DrawableFrame("Draw Line");

df.show();

df.setSize(150, 150);

// Obtain graphics context

// Draw line

g.drawLine(50, 50, 100, 100);

// Repaint frame df.repaint();

(15)

Drawing Rectangles

• The Graphics class provides methods to draw three types of rectangles:

– Ordinary rectangles

– Rectangles with rounded corners – “Three-dimensional” rectangles

• For each type, there’s one method to draw an outline and another to draw a filled rectangle.

• Rectangle methods take four arguments or more:

– The first two specify the rectangle’s upper left corner.

– The next two specify the rectangle’s width and height.

(16)

Ordinary Rectangles

• The drawRect method draws the outline of a rectangle:

g.drawRect(x, y, width, height);

• The fillRect method draws a filled rectangle:

g.fillRect(x, y, width, height);

(17)

Ordinary Rectangles

• An ordinary rectangle:

(18)

Rectangles with Rounded Corners

• drawRoundRect draws an outline of a rectangle with rounded corners:

g.drawRoundRect(x, y, width, height, arcWidth, arcHeight);

• fillRoundRect draws a filled rectangle:

g.fillRoundRect(x, y, width, height, arcWidth, arcHeight);

(19)

Rectangles with Rounded Corners

• A rectangle with rounded corners:

(20)

Rectangles with Rounded Corners

• The arcWidth argument specifies the horizontal diameter of the arc at each corner; arcHeight is the vertical diameter.

• The upper-right corner of a rounded rectangle:

(21)

Drawing Ovals

• The drawOval and fillOval methods will draw the outline of an oval or a filled oval,

respectively:

g.drawOval(x, y, width, height);

g.fillOval(x, y, width, height);

• x and y are the coordinates of the upper-left corner of an imaginary rectangle enclosing the oval.

• width and height are the measurements of this

rectangle.

(22)

Drawing Ovals

• An oval:

• If the width and height arguments are equal,

drawOval and fillOval will draw circles.

(23)

Drawing Arcs

• An arc is a segment of an oval.

• The drawArc method requires six arguments:

g.drawArc(x, y, width, height, startAngle, arcAngle);

• The last two arguments specify the angle at which the oval starts and the “arc angle” of the oval.

– Angles are measured in degrees, with zero degrees at 3 o’clock.

– If the arc angle is positive, drawing is done in the counterclockwise direction.

– If the arc angle is negative, drawing is done in the clockwise direction.

(24)

Drawing Arcs

• If startAngle is 90 and arcAngle is 135,

drawArc will draw the following shape:

(25)

Filling Arcs

• The fillArc method draws a filled arc, which resembles a slice of pie.

• The arguments to fillArc are the same as those for drawArc.

• The filled area is a portion of the oval described by the first four arguments to fillArc.

• The values of startAngle and arcAngle

determine which portion is filled.

(26)

Filling Arcs

• If startAngle is 90 and arcAngle is 135,

fillArc will draw the following shape:

(27)

Drawing Polygons

• A call of drawPolygon requires two arrays.

• One array contains the x coordinates of the

polygon’s vertices. The other array contains the y coordinates:

int[] xCoordinates = {0, 100, 200};

int[] yCoordinates = {100, 0, 100};

• drawPolygon also requires a third argument, indicating the number of vertices:

g.drawPolygon(xCoordinates, yCoordinates, xCoordinates.length);

(28)

Drawing Polygons

• The result of calling drawPolygon:

(29)

Filling Polygons

• Filling a polygon is similar to drawing one:

g.fillPolygon(xCoordinates, yCoordinates, xCoordinates.length);

• The third argument in the calls of drawPolygon and fillPolygon could have been 3.

• Using xCoordinates.length or

yCoordinates.length is a better choice.

That way, the method call won’t have to be

changed later if the number of vertices changes.

(30)

The Polygon Class

• There’s a second technique for drawing (or filling) a polygon.

• The java.awt package provides a class named Polygon.

• Instances of this class represent specific polygons.

• A statement that creates a Polygon object:

Polygon p =

new Polygon(xCoordinates, yCoordinates, xCoordinates.length);

(31)

The Polygon Class

• The drawPolygon and fillPolygon

methods will accept a Polygon object as their argument:

g.drawPolygon(p);

g.fillPolygon(p);

• The Polygon class provides several useful operations on polygons.

• The translate method changes the position of a polygon, and the addPoint method adds

another vertex to a polygon.

(32)

Polygons in Java

• A polygon in Java is any series of lines that form a closed region in two-dimensional space.

• Some polygons are convex—a line drawn from

any corner to any other corner will stay within the

polygon:

(33)

Polygons in Java

• Java doesn’t require that polygons be convex.

• A legal polygon that’s not convex:

• Java even allows the lines that form a polygon to

cross.

(34)

Polygons in Java

• The following polygon was created from four points (the four corners):

• To produce this figure, the points were placed in the

order {upper-left, lower-right, upper-right, lower-

(35)

Drawing Polylines

• A polyline is a series of lines, with each line after the first sharing an endpoint with the previous

line.

• A polyline is the same as a polygon, except that

Java doesn’t automatically connect the last line

back to the first to form a closed figure.

(36)

Drawing Polylines

• Drawing a polyline is similar to drawing a polygon.

• The first step is to create arrays containing the x and y coordinates of the points in the polyline:

int[] xCoordinates = {0, 100, 200};

int[] yCoordinates = {100, 0, 100};

• The next step is to call drawPolyline:

g.drawPolyline(xCoordinates, yCoordinates, xCoordinates.length);

The arguments are the same as for drawPolygon .

(37)

Drawing Polylines

• The result of calling drawPolyline:

(38)

6.2 Drawing in Color

• The state of a Graphics object consists of more than just the pixels that it stores.

• Each Graphics object also has a “current

color.” All drawing is done in that color until the setColor method is called.

• By default, the drawing color is black.

(39)

The Color Class

• The argument to the setColor method must be an instance of the Color class, which belongs to the java.awt package.

• A Color object can be created from three integers, indicating the red, green, and blue components of the color.

• Each component has a value between 0 (no

contribution) and 255 (maximum contribution).

• The color “black” has red, green, and blue values

of 0. “White” has values of 255 for all three.

(40)

Color Constants

• The Java API provides constants representing frequently used colors.

• These constants are defined inside the Color

class itself.

(41)

Color Constants

Red Green Blue

Name Component Component Component

black 0 0 0

blue 0 0 255

cyan 0 255 255

darkGray 64 64 64

gray 128 128 128

green 0 255 0

lightGray 192 192 192

magenta 255 0 255

orange 255 200 0

pink 255 175 175

red 255 0 0

white 255 255 255

(42)

Calling the setColor Method

• Using a constant from the Color class is done by writing the name of the class (Color), a dot, and then the name of the constant.

• A call of setColor that changes the current drawing color to magenta:

g.setColor(Color.magenta);

(43)

Calling the setColor Method

• If no Color constant is available for a particular color, a new Color object can be created.

• Code that sets the drawing color to light blue:

Color lightBlue = new Color(64, 192, 255);

g.setColor(lightBlue);

• The new Color object can be passed directly to setColor, without storing it in a variable first:

g.setColor(new Color(64, 192, 255));

(44)

6.3 Displaying Text

• The drawString method is used to display text.

• drawString requires three arguments:

– A string containing the text to be displayed.

– The x and y coordinates at which the text is to be displayed.

• A call of drawString:

g.drawString("Java rules!", x, y);

(45)

Coordinates for Displaying Text

• x specifies the horizontal position of the first

character in the string. y specifies the vertical

position of the string’s baseline:

(46)

The Font Class

• When text is written using drawString, the appearance of the text depends on the “current

font,” which is stored in every Graphics object.

• The current font can be changed by calling the setFont method:

g.setFont(newFont);

• The argument to setFont must be a Font

object.

(47)

The Font Class

• Font objects are created by calling the Font constructor, which requires three arguments: the font’s name, style, and size.

• Font name. The font name is a string, such as

"Monospaced", "Serif", or "SansSerif".

• Other font names are allowed, but there’s no

guarantee that a particular font will be available on

the user’s computer.

(48)

The Font Class

• Font style. Possible styles are bold, italic, and

plain, represented by the constants Font.BOLD, Font.ITALIC, and Font.PLAIN.

• Writing Font.BOLD + Font.ITALIC creates a font that’s both bold and italic.

• Font size. Font sizes are measured in points. (A

point is approximately 1/72" or 0.35 mm.)

(49)

The Font Class

• An example of using the Font constructor:

Font f = new Font("SansSerif", Font.BOLD, 24);

• The font name can be stored in a variable:

Font f = new Font(fontName, Font.BOLD, 24);

• Don’t put quotes around a variable name:

Font f = new Font("fontName", Font.BOLD, 24);

The Font constructor will treat "fontName"

itself as the name of the desired font.

(50)

Calling the setFont Method

• Passing f to the setFont method changes the current font:

g.setFont(f);

• If desired, the font can be created within the call of setFont:

g.setFont(new Font("SansSerif", Font.BOLD, 24));

• A common programming mistake is to create a

Font object, but fail to pass it to setFont.

(51)

Program: Displaying Text in Different Colors

• The DisplayText program displays text in

three different colors and styles:

(52)

// Displays text in three different colors and styles import java.awt.*;

import jpb.*;

public class DisplayText {

DrawableFrame df = new DrawableFrame("Display Text");

df.show();

(53)

g.setColor(Color.red);

g.setFont(new Font("Monospaced", Font.BOLD, 20));

g.drawString("Monospaced Bold", 15, 25);

// Display "SansSerif Italic"

g.setColor(Color.green);

g.setFont(new Font("SansSerif", Font.ITALIC, 20));

g.drawString("SansSerif Italic", 15, 50);

// Display "Serif Plain"

g.setColor(Color.blue);

g.setFont(new Font("Serif", Font.PLAIN, 20));

g.drawString("Serif Plain", 15, 75);

} }

(54)

6.4 Combining Text with Graphics

• Combining text with graphics is easy, because the graphics methods (such as drawLine and

drawRect) and the text method (drawString)

all operate on a Graphics object.

(55)

Program: Displaying a Stop Sign

• The StopSign program displays a stop sign:

(56)

Design of the StopSign Program

• The program will need to draw three figures:

– An eight-sided polygon (black).

– A filled eight-sided polygon (red).

– The word STOP in sans serif (white).

• drawPolygon can be used to draw the black polygon.

• fillPolygon can be used to draw the filled red polygon.

• drawString can be used to display the word

(57)

// Displays a stop sign import java.awt.*;

import jpb.*;

public class StopSign {

DrawableFrame df = new DrawableFrame("Stop Sign");

df.show();

// Define coordinates of outer polygon (edge of sign) and // inner polygon (red portion)

int[] xOuter = {36, 87, 123, 123, 87, 36, 0, 0};

int[] yOuter = {0, 0, 36, 87, 123, 123, 87, 36};

(58)

int[] yInner = {5, 5, 37, 86, 118, 118, 86, 37};

// Draw edge of sign in black g.setColor(Color.black);

g.drawPolygon(xOuter, yOuter, xOuter.length);

// Fill interior of sign with red g.setColor(Color.red);

g.fillPolygon(xInner, yInner, xInner.length);

// Display "STOP" in white g.setColor(Color.white);

g.setFont(new Font("Helvetica", Font.BOLD, 36));

g.drawString("STOP", 13, 76);

(59)

The FontMetrics Class

• There’s no simple relationship between the size of a font and the pixel sizes of the characters in the font.

• The FontMetrics class solves this problem by providing methods for computing the sizes of

characters in a font.

(60)

The FontMetrics Class

• To use the FontMetrics class, the first step is to create an object representing a particular font:

• Next, the Font object is passed to the getFontMetrics method:

FontMetrics fm = g.getFontMetrics(f);

• It’s also legal to use a DrawableFrame object to obtain a FontMetrics object:

FontMetrics fm = df.getFontMetrics(f);

(61)

The FontMetrics Class

• The FontMetrics class provides methods that return information about the size of a font.

• Advance width—The distance from the beginning

of a character to the place where the next character

would go in a line of text:

(62)

The FontMetrics Class

• Ascent—The distance from the baseline to the top of most alphanumeric characters.

• Descent—The distance from the baseline to the bottom of most alphanumeric characters.

• Leading—The recommended amount of space between the descent of one line of text and the ascent of the next line.

• Height—The recommended distance between the

baselines of adjacent lines of text. The height is

(63)

The FontMetrics Class

• A figure that illustrates the meaning of ascent,

descent, leading, and height:

(64)

The FontMetrics Class

• Commonly used FontMetrics methods:

Description Action

int getAscent() Returns the ascent for this font.

int getDescent() Returns the descent for this font.

int getHeight() Returns the height for this font.

int getLeading() Returns the leading for this font.

int getMaxAdvance() Returns the maximum advance width for any character in this

font.

int stringWidth(String str) Returns the advance

(65)

The FontMetrics Class

• Most FontMetrics methods return information about the font as a whole, not any particular

character.

• One exception is stringWidth, which returns the advance width of a particular string.

• Each FontMetrics method returns an integer, representing a measurement in pixels.

• To find the maximum ascent or descent for any

character in a font, use the getMaxAscent and

getMaxDescent methods.

(66)

Program: Obtaining Font Information

• The FontInfo program displays information

about a 20-point sans serif font. The information is

displayed in the font itself:

(67)

// Displays information about a font. Uses the FontMetrics // class to obtain the information to be displayed.

import java.awt.*;

import jpb.*;

public class FontInfo {

DrawableFrame df = new DrawableFrame("Font Information");

df.show();

// Get graphics context

// Create font, get metrics for font, and compute height // of font

Font f = new Font("SansSerif", Font.PLAIN, 20);

FontMetrics fm = g.getFontMetrics(f);

(68)

g.setFont(f);

g.drawString("Ascent: " + fm.getAscent(), 10, height);

g.drawString("Descent: " + fm.getDescent(), 10, height * 2);

g.drawString("Height: " + height, 10, height * 3);

g.drawString("Leading: " + fm.getLeading(), 10, height * 4);

g.drawString("Maximum advance: " + fm.getMaxAdvance(), 10, height * 5);

g.drawString("Width of \"Why?\": " +

fm.stringWidth("Why?"), 10, height * 6);

} }

(69)

6.5 Case Study: A Message Window

• The MessageWindow program will display a message within a frame.

• The user will enter a font (name and size), the number of lines in the message, and the message itself:

Enter font name: Serif Enter font size: 40

Enter number of lines in message: 3 Enter line 1: I'm the

Enter line 2: king of the Enter line 3: world!

• The program will allow spaces before and after each input item.

(70)

Appearance of the Message Window

• A frame labeled “Message Window” will now appear, with the user’s message displayed in blue and each

line centered within the frame:

(71)

Appearance of the Message Window

• The size of the frame will vary, depending on the message and the font:

– The distance between the baselines of consecutive lines will match the font’s height.

– The distance from the top of the graphics context to the baseline of the first line will be the font’s ascent plus its leading.

– The space below the last line’s baseline will be equal to the font’s descent.

– The amount of horizontal space on either side of the widest line will also match the font’s descent.

(72)

Design of the MessageWindow Program

• Determining the size of the frame requires

knowing the number of lines in the message and the width of the widest line (in pixels).

• The frame size also depends on the metrics of the font selected by the user.

• As a result, the MessageWindow program can’t

display the message until all of it has been read.

(73)

Design of the MessageWindow Program

• An outline of the MessageWindow program:

1. Prompt the user to enter the font name.

2. Prompt the user to enter the font size and convert the input to an integer.

3. Create the frame and font objects and obtain the metrics for the font.

4. Prompt the user to enter the number of lines in the message and convert the input to an integer.

5. Read and store the lines in the message, computing the width of the widest line.

6. Open the frame and set its size.

7. Obtain the graphics context; set the drawing color and the font.

8. Display the lines in the message.

9. Repaint the frame.

(74)

Design of the MessageWindow Program

• The program will need to store the lines in the message until they can be displayed in step 8; an array is the logical choice.

• Step 5 can be written as a loop containing the following steps:

1. Prompt the user to enter a line; store the line in the array.

2. Compare the width of the line with the maximum width read so far, replacing the maximum width if necessary.

(75)

// Program name: MessageWindow // Author: K. N. King

// Written: 1999-04-04

//// Displays a message within a frame. Prompts the user to // enter a font name and size, the number of lines in the // message, and the message to be displayed. Spaces are // allowed before and after each input item.

//// Once input is complete, a frame labeled "Message Window"

// will appear. The message will be displayed in blue against // a white background, with the lines of the message centered // within the frame. The size of the frame will depend

// on the message and the font. The distance between the // baselines of consecutive lines will match the font's

// height. The distance from the top of the graphics context // to the baseline of the first line will be the font's ascent // plus its leading. The space below the last line's baseline // will be equal to the font's descent. The amount of

// horizontal space on either side of the widest line will // also match the font's descent.

(76)

public class MessageWindow {

public static void main(String[] args) { // Prompt user to enter font name

SimpleIO.prompt("Enter font name: ");

String fontName = SimpleIO.readLine().trim();

// Prompt user to enter font size; convert to integer form SimpleIO.prompt("Enter font size: ");

String fontSizeString = SimpleIO.readLine().trim();

int fontSize = Integer.parseInt(fontSizeString);

// Create drawable frame and font objects;

// obtain font metrics

DrawableFrame df = new DrawableFrame("Message Window");

Font f = new Font(fontName, Font.PLAIN, fontSize);

(77)

SimpleIO.prompt("Enter number of lines in message: ");

String numLinesString = SimpleIO.readLine().trim();

int numLines = Integer.parseInt(numLinesString);

// Read and store lines in message, computing width of // widest line

String[] lines = new String[numLines];

int maxLineWidth = 0;

for (int i = 0; i < numLines; i++) {

// Prompt user to enter a line; store it in array SimpleIO.prompt("Enter line " + (i + 1) + ": ");

lines[i] = SimpleIO.readLine().trim();

// Compare width of line with maximum width read so // far, replacing maximum width if necessary.

int lineWidth = fm.stringWidth(lines[i]);

if (lineWidth > maxLineWidth) maxLineWidth = lineWidth;

}

(78)

int borderSize = fm.getDescent();

int height = fm.getHeight();

df.setSize(maxLineWidth + borderSize * 2,

numLines * height + fm.getLeading());

// Obtain graphics context; set drawing color and font Graphics g = df.getGraphicsContext();

g.setColor(Color.blue);

g.setFont(f);

// Display lines in message

int firstBaseline = fm.getLeading() + fm.getAscent();

for (int i = 0; i < numLines; i++) {

int lineWidth = fm.stringWidth(lines[i]);

g.drawString(lines[i],

borderSize + (maxLineWidth - lineWidth) / 2, firstBaseline + i * height);

}

(79)

Remarks

• The second argument to drawString is

borderSize + (maxLineWidth - lineWidth) / 2

• Subtracting lineWidth from maxLineWidth and dividing by 2 yields the number of “extra”

pixels on either side of line i.

• Adding this quantity to borderSize—the

number of pixels on either side of the widest line

—gives the x coordinate needed for line i to be

centered within the frame.

(80)

6.6 Debugging

• A program that displays graphics in a frame can still display output using System.out.print and System.out.println.

• This output will appear in the window from which the program was launched.

• The ability to display messages in the original

window is valuable for debugging.

(81)

Printing Objects

• System.out.println, when given an object as its argument, will automatically call the object's toString method. (System.out.print has the same ability.)

• All objects have a toString method. (If a class doesn’t declare a toString method, Java

supplies one automatically through a mechanism known as inheritance.)

• Printing an object may supply useful debugging

information about the object.

(82)

Printing Objects

• Printing a Color object:

System.out.println(Color.lightGray);

Output produced:

java.awt.Color[r=192,g=192,b=192]

• Printing a Font object:

System.out.println(f);

Output produced:

java.awt.Font[family=SansSerif,name=SansSerif, style=bold,size=24]

(83)