Transcript Document

Chapter 15
Graphics Objects



Chapter 15
Basic Figures
Colors
Fonts and Other Text Details
Java: an Introduction to Computer Science & Programming - Walter Savitch
1
Basic Figures





Chapter 15
Earlier chapters explain how to make graphical user
interfaces (GUIs).
This chapter explains a different way of using
graphics in Java: drawing pictures.
We will learn how to basic figures such as lines,
ovals, and rectangles.
Basic figures can be combined to create elaborate
pictures.
An optional section explains how to draw polygons.
Java: an Introduction to Computer Science & Programming - Walter Savitch
2
Screen Coordinate System
(0, 0)
origin
X-coordinate is
positive and
increasing to the
right.
Y-coordinate is
positive and
increasing in the
downward direction.
Chapter 15
All coordinates are
normally positive.
Java: an Introduction to Computer Science & Programming - Walter Savitch
3
Screen Coordinate System
(0, 0)
origin
Y-coordinate:
75 pixels from
top edge of
screen
(100, 75)
X-coordinate:
100 pixels
from left edge
of screen
Chapter 15
Location of a
rectangle is specified
by coordinates of
upper left corner.
Java: an Introduction to Computer Science & Programming - Walter Savitch
4
Screen Coordinate System
(0, 0)
origin
(100, 75)
Location of an oval is
specified by a tightly
fitting rectangle.
Chapter 15
Java: an Introduction to Computer Science & Programming - Walter Savitch
5
The paint Method




Chapter 15
Most Swing and Swing related components have a
method named paint.
The paint method draws the component on the
screen.
To draw basic figures such as ovals and rectangles,
you need to redefine the paint method.
The paint method is called automatically and
should not be invoked in the programmer’s code.
Java: an Introduction to Computer Science & Programming - Walter Savitch
6
public void paint(Graphics g)
The complete paint method
{
from Madeleine.java
super.paint(g);
g.drawOval(X_FACE, Y_FACE, FACE_DIAMETER, FACE_DIAMETER);
//Draw Nose:
g.fillOval(X_NOSE, Y_NOSE, NOSE_DIAMETER, NOSE_DIAMETER);
//Draw Eyes:
g.fillOval(X_LEFT_EYE, Y_LEFT_EYE, EYE_WIDTH, EYE_HEIGHT);
g.fillOval(X_RIGHT_EYE, Y_RIGHT_EYE, EYE_WIDTH, EYE_HEIGHT);
//Draw eyebrows:
g.drawLine(X1_LEFT_BROW, Y1_LEFT_BROW,
X2_LEFT_BROW, Y2_LEFT_BROW);
g.drawLine(X1_RIGHT_BROW, Y1_RIGHT_BROW,
X2_RIGHT_BROW, Y2_RIGHT_BROW);
//Draw Mouth:
g.drawArc(X_MOUTH, Y_MOUTH, MOUTH_WIDTH, MOUTH_HEIGHT,
MOUTH_START_ANGLE, MOUTH_ARC_SWEEP);
The program
}
draws this
picture.
Chapter 15
Java: an Introduction to Computer Science & Programming - Walter Savitch
7
public void paint(Graphics g)
The face, nose, and eyes are
{
ovals. The eyebrows are lines,
super.paint(g);
and the mouth is an arc.
g.drawOval(X_FACE, Y_FACE, FACE_DIAMETER, FACE_DIAMETER);
//Draw Nose:
g.fillOval(X_NOSE, Y_NOSE, NOSE_DIAMETER, NOSE_DIAMETER);
//Draw Eyes:
g.fillOval(X_LEFT_EYE, Y_LEFT_EYE, EYE_WIDTH, EYE_HEIGHT);
g.fillOval(X_RIGHT_EYE, Y_RIGHT_EYE, EYE_WIDTH, EYE_HEIGHT);
//Draw eyebrows:
g.drawLine(X1_LEFT_BROW, Y1_LEFT_BROW,
X2_LEFT_BROW, Y2_LEFT_BROW);
g.drawLine(X1_RIGHT_BROW, Y1_RIGHT_BROW,
X2_RIGHT_BROW, Y2_RIGHT_BROW);
//Draw Mouth:
The method
for drawing
each MOUTH_HEIGHT,
g.drawArc(X_MOUTH,
Y_MOUTH,
MOUTH_WIDTH,
shape has numeric parameters
MOUTH_START_ANGLE, MOUTH_ARC_SWEEP);
telling where to draw the shape
}
and how big to make it.
Chapter 15
Java: an Introduction to Computer Science & Programming - Walter Savitch
8
public void paint(Graphics g)
{
super.paint(g);
The paint method receives
g.drawOval(X_FACE, Y_FACE,
oneFACE_DIAMETER,
parameter, whichFACE_DIAMETER);
is an
//Draw Nose:
object of the Graphics class.
g.fillOval(X_NOSE, Y_NOSE, NOSE_DIAMETER, NOSE_DIAMETER);
//Draw Eyes:
Calling the paint method
of the parent
g.fillOval(X_LEFT_EYE,
Y_LEFT_EYE,
EYE_WIDTH, EYE_HEIGHT);
class is a good programming
practice.
g.fillOval(X_RIGHT_EYE,
Y_RIGHT_EYE,
EYE_WIDTH, EYE_HEIGHT);
//Draw eyebrows:
g.drawLine(X1_LEFT_BROW, Y1_LEFT_BROW,
X2_LEFT_BROW, Y2_LEFT_BROW);
g.drawLine(X1_RIGHT_BROW, Y1_RIGHT_BROW,
X2_RIGHT_BROW, Y2_RIGHT_BROW);
//Draw Mouth:
The Graphics parameter is the calling
g.drawArc(X_MOUTH, Y_MOUTH, MOUTH_WIDTH, MOUTH_HEIGHT,
object for all of the methods that draw
MOUTH_START_ANGLE, MOUTH_ARC_SWEEP);
lines and shapes.
}
Chapter 15
Java: an Introduction to Computer Science & Programming - Walter Savitch
9
The Graphics class



Contains methods used to draw basic shapes and lines
Is part of the AWT package (or library) so the AWT must be
imported:
import java.awt.*;
Most methods for painting shapes have two versions:
» A draw version which only draws the outline of the shape
drawOval
» A fill version which fills in the shape
fillOval
Chapter 15
Java: an Introduction to Computer Science & Programming - Walter Savitch
10
Drawing Rectangles and Ovals
(0, 0)
X and Y coordinates
of upper left corner
width
g.fillRect(100, 50, 40, 20);
Graphics
object
40
height
(100, 50)
20
g.fillOval(100, 120, 40, 20);
40
(100, 120)
20
Chapter 15
Java: an Introduction to Computer Science & Programming - Walter Savitch
11
Drawing Arcs


An arc is specified by giving an oval and then specifying what
portion of the oval will be used for the arc.
To tell which part of the oval will be used, specify the beginning
angle and the degrees of the sweep.
gdrawArc(x, y, width, height, 0, 360);
width
(x,y)
positive direction
0 degrees
Chapter 15
height
Java: an Introduction to Computer Science & Programming - Walter Savitch
12
Arc Examples
gdrawArc(x, y, width, height, 0, 360);
negative direction
0 degrees
positive direction
0 degrees
gdrawArc(x, y, width, height, 0, -90);
gdrawArc(x, y, width, height, 0, 90);
180 degrees
plus 90 degrees
gdrawArc(x, y, width, height, 180, 90);
Chapter 15
Java: an Introduction to Computer Science & Programming - Walter Savitch
13
Round Rectangles


Round rectangle is a rectangle where corners have been
replaced with arcs.
Specify by giving rectangle information and then height and
width of corner arcs.
gdrawRoundRect(x, y, width, height, arcWidth, arcHeight);
width
(x,y)
arcWidth
height
arcHeight
Chapter 15
Java: an Introduction to Computer Science & Programming - Walter Savitch
14
Polygons
drawPolygon allows a program to draw shapes with any number of
sides.
public void drawPolygon(int[] x, int[] y, int point)





Chapter 15
Each point in the polygon will have an x coordinate from the first
parameter and a y coordinate from the corresponding element of the
second parameter.
The third parameter tells how many points the polygon will have.
Always draws a closed polygon. If first and last points are not equal,
draws a line from last to first.
drawPolyline is similar but can draw an open figure.
fillPolygon is similar but fills with color instead of drawing outline.
Java: an Introduction to Computer Science & Programming - Walter Savitch
15
Action Drawings and repaint



Chapter 15
The SadMadeleine program demonstrates how a program can
change a picture.
In the original picture, the face has a frown.
When the user clicks on the button, the picture changes to a
smiling face and moves up on the screen.
Java: an Introduction to Computer Science & Programming - Walter Savitch
16
Action Drawings and repaint


The actionPerformed method changes the smile variable
that the paint method uses.
When the smile variable is changed to true, the paint
method knows to draw a smile instead of a frown.
public void actionPerformed(ActionEvent e)
{
if (e.getActionCommand().equals("Click for a Smile."))
smile = true;
else
System.out.println("Error in button interface.");
repaint();
}
Chapter 15
Java: an Introduction to Computer Science & Programming - Walter Savitch
17
Action Drawings and repaint



Unless the repaint method is called, the change will not be
shown on screen.
The repaint method calls paint to update the picture.
The paint methd should not be called directly.
public void actionPerformed(ActionEvent e)
{
if (e.getActionCommand().equals("Click for a Smile."))
smile = true;
else
System.out.println("Error in button interface.");
repaint();
}
Chapter 15
Java: an Introduction to Computer Science & Programming - Walter Savitch
18
Colors



Draw and fill methods like fillOval will use the current color.
You can use the setColor method of a Graphics object to
change the current color.
To draw a red mouth you could change the paint method of the
Madeleine program to include these lines:
//Draw Mouth:
g.setColor(Color.red);
g.drawArc(X_MOUTH, Y_MOUTH, MOUTH_WIDTH, MOUTH_HEIGHT,
MOUTH_START_ANGLE, MOUTH_ARC_SWEEP);
Chapter 15
Java: an Introduction to Computer Science & Programming - Walter Savitch
19
Defining Colors

The Color class mixes amounts of red, green, and blue to
produce a new color.
Color brown = new Color(204, 102, 0);




Chapter 15
Since colors are made by combing different amounts of red,
green, and blue, this is called the RGB color system.
The parameters to the Color constructor must be type int or
float.
When integers are used as parameters to the Color constructor
they should be in the range 0 to 255.
When floats are used as parameters to the Color constructor
they should be in the range 0.0 to 1.0.
Java: an Introduction to Computer Science & Programming - Walter Savitch
20
Fonts and Other Text Details




A font is a style of text.
A program can use the drawString method to display text on
the screen.
The first parameter tells which characters to display.
The last two parameters to drawString are coordinates that
tell where on the screen to put the text.
g.drawString(theText, X_START, Y_START);
Chapter 15
Java: an Introduction to Computer Science & Programming - Walter Savitch
21
Setting the Font


Chapter 15
The method setFont in a Graphics object can be
used to change the current font.
Java guarantees that at least three fonts will be
available:
» Monospaced
» SanSerif
» Serif
Java: an Introduction to Computer Science & Programming - Walter Savitch
22
Using the Font Constructor

To specify a font with a particular name, style, and size, use the
Font constructor.
Font f = new Font(“Serif”, Font.BOLD|Font.ITALIC,
POINT_SIZE);
g.setFont(f);
Name of the font
Size of the font in
points (an integer)
Style of the font:
bold and italic
Size of the font is specified in points.
Each point is 1/72 of an inch, but point sizes are only approximate.
Chapter 15
Java: an Introduction to Computer Science & Programming - Walter Savitch
23
Summary

You can draw figures such as lines, ovals, and rectangles using
methods in the class Graphics.

You can specify the color of each figure drawn using the method
setColor of the Graphics class.
You can define your own colors using the class Color.




Chapter 15
Colors are defined using the RGB (Red/Green/Blue) system.
You can add text to a a graphics drawing by using the
Graphics method drawString.
You can set the font and point size for a text written using
drawString with the Graphics method setFont.
Java: an Introduction to Computer Science & Programming - Walter Savitch
24