Basic Figures

1
Chapter 15
Graphics Objects

• Basic Figures
• Colors
• Fonts and Other Text Details

2
Basic Figures

• 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.

3
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.
All coordinates are normally positive.
4
Screen Coordinate System
(0, 0)
Y-coordinate 75 pixels from top edge of screen
origin
(100, 75)
Location of a rectangle is specified by
coordinates of upper left corner.
X-coordinate 100 pixels from left edge of screen
5
Screen Coordinate System
(0, 0)
origin
(100, 75)
Location of an oval is specified by a tightly
fitting rectangle.
6
The paint Method

• 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 programmers code.
  

7

• public void paint(Graphics g)
• 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 complete paint method from Madeleine.java
The program draws this picture.
8

• public void paint(Graphics g)
• 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 face, nose, and eyes are ovals. The eyebrows
are lines, and the mouth is an arc.
The method for drawing each shape has numeric
parameters telling where to draw the shape and
how big to make it.
9

• public void paint(Graphics g)
• 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 paint method receives one parameter, which is
an object of the Graphics class.
Calling the paint method of the parent class is a
good programming practice.
The Graphics parameter is the calling object for
all of the methods that draw lines and shapes.
10
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

11
Drawing Rectangles and Ovals
width
X and Y coordinates of upper left corner
(0, 0)
g.fillRect(100, 50, 40, 20)
height
40
Graphics object
(100, 50)
20
g.fillOval(100, 120, 40, 20)
40
(100, 120)
20
12
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
height
13
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)
14
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
15
Polygons

• drawPolygon allows a program to draw shapes with
  any number of sides.
  
• public void drawPolygon(int x, int y, int
  point)
  
• 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.
  

16
Action Drawings and repaint

• 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.

17
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()
18
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()
19
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)
20
Defining Colors

• The Color class mixes amounts of red, green, and
  blue to produce a new color.
  
• 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.
  

21
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)
22
Setting the Font

• 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

23
Using the Font Constructor

• To specify a font with a particular name, style,
  and size, use the Font constructor.
  
• Size of the font is specified in points.
• Each point is 1/72 of an inch, but point sizes
  are only approximate.
  

Font f new Font(Serif, Font.BOLDFont.ITALIC,
POINT_SIZE) g.setFont(f)
Name of the font
Style of the font bold and italic
Size of the font in points (an integer)
24
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.
  
• 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.