Introducing Graphics

1
Introducing Graphics

• There are two types of graphics facilities in
  Java
• Drawing
• Graphical user interfaces (GUIs)
• Well concentrate on drawing today
• Graphics objects are only available within
  certain contexts JFrames and JApplets
• JFrame a window displayed by a standalone
  application
• JApplet a window that can be displayed from
  another application (e.g. from a web browser)
• We will usually use JFrames for our graphical
  programs

2
Introducing Graphics

• We will normally add one more JPanels to our
  JFrame.
• There are two important things that we can do in
  a JPanel
• - Draw figures or pictures (which we will do
  today)
• - Add other GUI components, such as buttons and
  scroll bars (which we will do later in the
  workshop)

3
Summary

• JFrame a window that our program creates
• JPanel a drawing surface that we put inside of
  the window

4
Graphics Skeleton
import java.awt. import javax.swing. public
class GraphicsSkeleton private static final
int X_SIZE 100, Y_SIZE 100 public static
void main(String args) JFrame frame new
JFrame() frame.setDefaultCloseOperation(JFrame.
EXIT_ON_CLOSE) frame.setSize(X_SIZE,
Y_SIZE) GraphicsPanel panel new
GraphicsPanel() frame.add(panel) frame.setVi
sible(true) private static class
GraphicsPanel extends JPanel public void
paintComponent(Graphics g) super.paintCompo
nent(g) // Add drawing code here.
5
Graphics Methods

• drawLine(x1, y1, x2, y2)
• ltx1, y1gt is the source point, ltx2, y2gt is the
  destination point
• drawRect(x, y, width, height) and fillRect(x, y,
  width, height)
• Draw/fill rectangle starting at ltx, ygt with width
  and height as specified
• draw3DRect/fill3DRect(x, y, width, height, bool)
• bool is true or false denoting whether the
  rectangle is raised (true) or indented (false)
• drawRoundRect/fillRoundRect(x, y, width, height,
  awd, aht)
• The corners of the rectangle are rounded using
  awd and aht as the height and width of the arc
  for the corners
• drawOval/fillOval(x, y, width, height)
• draws or fills an oval that fills a bounded box
  starting at point ltx, ygt with height and width as
  specified
• drawString(str, x, y)
• prints the String str at point ltx, ygt
• NOTE x1, y1, x2, y2, x, y, width, height, awd
  and aht are all int values

6
Additional Graphics Methods

• setColor(col)
• changes the current drawing color, col must be of
  type Color and is often denoted as Color.name
  such as Color.BLUE or Color.RED
• setFont(ft)
• changes the font for drawString commands to a
  different font, ft must be of type Font
• drawPolygon/fillPolygon(x , y , num)
• draws/fills a polygon of ltx, ygt points where each
  point is stored as one element in each of arrays
  x and y, and where there are num points
• drawArc/fillArc(x, y, width, height, sAngle,
  aAngle)
• like draw/fillOval but only draws a portion based
  on the two angles provided
• drawImage(src, x, y, width, height, col, obsv)
• used to display an image src (gif, jpg) col is
  the background color for any transparent pixels,
  and obsv is an ImageObserver (use this)

7
A Graphics Example
protected void paintComponent(Graphics
g) super.paintComponent(g) g.setColor(Color.B
LUE) g.drawLine(20, 30, 140, 90) g.drawString(
"Line", 70, 110) g.setColor(Color.BLACK) g.
drawRect(160, 30, 120, 60) g.drawString("Rectang
le", 190, 110) g.setColor(Color.GREEN) g.dr
awOval(20, 140, 120, 60) g.drawString("Oval",
70, 230) g.setColor(new Color(155, 0,
255)) // purple g.fillOval(180, 130, 80, 80)
// a circle g.drawString("Disc", 210,
230) g.setColor(Color.RED) g.setFont(new
Font("Chicago", Font.ITALIC Font.BOLD,
40)) g.drawString("Whoo Hoo!", 40, 290)
8
More Examples
public void paintComponent(Graphics
g) super.paintComponent(g) g.setColor(Color.B
LUE) g.drawRoundRect(10, 10, 200, 200, 25,
25) g.setColor(Color.GREEN) g.drawRoundRect(40
, 40, 140, 140, 15, 15) g.setColor(Color.RED)
g.drawRoundRect(70, 70, 80, 80, 10,
10) g.setColor(Color.YELLOW) g.fillRoundRect(1
00, 100, 20, 20, 5, 5)
public void paintComponent(Graphics
g) super.paintComponent(g) g.setColor(new
Color(128, 64, 128)) g.draw3DRect(10, 10, 100,
100, false) g.draw3DRect(20, 20, 80, 80,
true) g.setColor(new Color(255, 0,
64)) g.fill3DRect(30, 30, 60, 60,
true) g.setColor(Color.WHITE) g.fill3DRect(40,
40, 40, 40, false)
9
More Examples
public void paintComponent(Graphics
g) super.paintComponent(g) g.setFont(new
Font("Ariel", Font.BOLD, 20)) g.drawString("Hell
o", 10, 20) g.setFont(new Font("Chicago",
Font.ITALIC, 28)) g.drawString("Goodbye", 10,
40)
public void paintComponent(Graphics
g) super.paintComponent(g) g.setColor(Color.R
ED) int x 15, 30, 60, 25, 35, 45, 10, 30,
45, 20, 10, 25 int y 10, 25, 40, 55, 30,
15, 30, 45, 60, 45, 30, 10 g.fillPolygon(x, y,
12)
10
Stop Sign
protected void paintComponent(Graphics
g) super.paintComponent(g) // -- Fill a
red hexagon. -- g.setColor(Color.RED) // It
will be centered at coordinates 100,100. // Each
edge has length 90. // Each of the six
equilateral triangles in the hexagon has //
height 78 (ie. 90 sqrt(3) / 2 rounded to the
nearest integer). int x 10, 55, 145, 190,
145, 55 int y 100, 22, 22, 100, 178,
178 g.fillPolygon(x, y, 6) // continued
on next slide
11
Stop Sign (contd)
// -- Draw the word "STOP" -- g.setColor(Color.
WHITE) g.setFont(new Font("Arial", Font.BOLD,
54)) // The following statement tells us
how wide the word "STOP" // will be using the
current font. int stringWidth
g.getFontMetrics().stringWidth("STOP") //
The following statement tells us how tall a //
capital letter will be using the current
font. int stringHeight g.getFontMetrics().getAs
cent() g.drawString("STOP", 100 -
stringWidth / 2, 100 stringHeight / 2)
12
More Examples
public void paintComponent(Graphics
g) super.paintComponent(g) ImageIcon icon
new ImageIcon("flag.gif") Image image
icon.getImage( ) g.drawImage(image, 10, 10,
300, 200, Color.BLACK, this)
public void paintComponent(Graphics
g) super.paintComponent(g) g.setColor(Color.B
LUE) g.fillArc(10, 10, 100, 100, 0,
45) g.setColor(Color.RED) g.fillArc(10, 10,
100, 100, 45, 45) g.setColor(Color.GREEN) g.fi
llArc(10, 10, 100, 100, 90, 45) g.setColor(Color
.YELLOW) g.fillArc(10, 10, 100, 100, 135, 45)
13
Checker Board
protected void paintComponent(Graphics g)
super.paintComponent(g) g.setColor(MY_BROWN)
g.fillRect(LEFT_X - BORDER_WIDTH,
UPPER_Y - BORDER_WIDTH, BOARD_WIDTH,
BOARD_WIDTH) for (int row 0 row lt 8
row) for (int col 0 col lt 8
col) if ((row col)
2 0) g.setColor(Color.RED
) else
g.setColor(Color.BLACK)
g.fillRect(LEFT_X col SQUARE_WIDTH,
UPPER_Y row SQUARE_WIDTH,
SQUARE_WIDTH, SQUARE_WIDTH)

14
Horse Race
public void paintComponent(Graphics
g) super.paintComponent(g) g.drawLine(FINISH_
X, Y1 - 2 RECT_HEIGHT, FINISH_X, Y3
3 RECT_HEIGHT) g.fillRect(x1 - RECT_WIDTH,
Y1, RECT_WIDTH, RECT_HEIGHT) g.fillRect(x2 -
RECT_WIDTH, Y2, RECT_WIDTH, RECT_HEIGHT) g.fi
llRect(x3 - RECT_WIDTH, Y3, RECT_WIDTH,
RECT_HEIGHT)
15
Displaying a user requested playing card
Download and run the programs DisplayCard.java
and DisplaySelectedCard.java(along with
cards.gif) from the web site.
16
Some Comments

• The paintComponent method is automatically called
  whenever
• the JPanel first appears on the screen
• the JPanel is resized or altered on the screen
• your code calls repaint( )
• Sizes, dimensions, end points, etc are all in
  terms of pixels, starting at lt0,0gt in the upper
  left hand corner of the JPanel

17
Colors

• As stated earlier, you can specify a color by
  name. There are 13 predefined colors in Java
  BLACK, BLUE, CYAN, DARK_GRAY, GRAY, GREEN,
  LIGHT_GRAY, MAGENTA, ORANGE, PINK, RED, WHITE,
  YELLOW
• You can also generate a color by specifying the
  amount of red, green and blue as int values
  between 0 and 255
• You could use this in a setColor instruction
• g.setColor(new Color(255, 64, 128))

18
Fonts

• Before drawing a String, you can specify a font
  by using new Font(type, style, size)
• type must be one of those available in your Java
  installation. You can find out what types are
  available using code on page 413 of the textbook.
  But for now, it suffices to stick with the
  following Ariel, Chicago, Times New Roman,
  SanSerif, Serif.
• style will be one of Font.PLAIN, Font.BOLD or
  Font.ITALIC, you can also combine the latter two
  as Font.BOLD Font.ITALIC
• g.setFont(new Font(Times New Roman, Font.PLAIN,
  28)